Снова здравствуйте, уважаемые читатели блога SEOBID.NET! Как и обещал, сегодня будем изучать работу плагинов и скриптов, которые создают wordpress аккордеон меню на сайте, построенном на CMS WordPress. Применение аккордеона в шаблоне сайта обеспечивает такой стиль вывода контента, который скрывает некоторые элементы и показывает его только после определенного действия.

В аккордеоне это действие — нажатие левой кнопки мыши на определенный пункт меню. Есть и другие варианты использования аккордеона, но самый распространенный – меню или отдельная страница типа ЧАВО (FAQ) с ответами на часто задаваемые вопросы.

На CMS WordPress такой wordpress аккордеон можно сделать двумя способами – при помощи плагинов или использованием скриптов. Некоторые плагины предназначены для создания одной функции в аккордеоне, а в некоторых функция аккордеона — это только составляющая часть вместе с другим функционалом.

Плагин Nextend Accordion Menu

Плагин Nextend Accordion Menu – узкопрофильный модуль, который позволяет создать и настроить раскрывающееся wordpress аккордеон меню на отдельной странице. После создания аккордеона можно также вставлять его в сайдбар через виджет.

Плагин Nextend Accordion Menu

Страница с настройками Nextend Accordion Menu довольно богатая – здесь и управление темами, и управление открыванием аккордеона (по клику мыши, по наведению курсора и т.д.), и управление выводом уровней меню, которые будут открываться по умолчанию, и установка типа анимации, которая будет использоваться в аккордеоне, и позиционирование меню.

Плагин Nextend Accordion Menu

Бесплатная версия, которую предлагает плагин аккордеон wordpress, обеспечивает работу только с одним скином (платная версия – несколько десятков). Но здесь есть один, чисто русский, выход: можно изменять стили отображения аккордеона в бэкэнде.

То есть — выводить или отключать отображение иконок, менять шрифт, менять позиции пунктов меню аккордеон, менять цветовую гамму. Плагин хороший и мощный, и единственный его недостаток – один скин.

JQuery Accordion Menu Widget плагин

Следующий, довольно функциональный плагин для создания на блоге wordpress меню страниц или рубрик — JQuery Accordion Menu Widget. На парочке своих сайтов я пробовал работать с этим плагином, и на одном оставил его – понравилось. Очень удобно настраивать и работать с ним — просто вставляете через админпанель виджет меню, и все – аккордеон появляется в полностью рабочем состоянии.

JQuery Accordion Menu Widget плагин

Плагин JQuery Accordion Menu Widget легок в установке и в использовании, к тому же очень функционален. В нем присутствует несколько тем оформления, цветов самого меню в wordpress.

JQuery Accordion Menu Widget плагин

Еще один большой плюс плагина — простая установка и настройка. Скачиваете, активируете, плагин создает виджет, который вы просто перетаскиваете в нужное место в сайдбаре блога.

JQuery Accordion Menu Widget плагин

Ну, а теперь – как устанавливать и настраивать плагин. Установка – обычная, подробнее вы можете почитать здесь — Несколько способов установки плагинов на WordPress. После того, как вы активировали плагин консоли WordPress, зайдите во вкладку «Внешний вид» — «Виджеты». Там вы увидите новый виджет с названием плагина. Просто перетащите его в нужное место сайдбара, и он начнет работать.

Настройки плагина JQuery Accordion Menu Widget

В настройках – выбор цвета меню (7 вариантов), темы оформления, технические настройки. В них входит выбор открывания меню — при наведении курсора или при клике мыши, скорость открывания — медленно или быстро, время открывания, выбор произвольного меню и возможность указать свои стили отображения меню. Как видите, wordpress создание меню на этом плагине простое и быстрое, а самое главное – аккордеон работает надежно.

Работаем с рубриками и подрубриками

Если на сайте организован вывод подрубрик, то, чтобы в аккордеоне они отображались правильно, нужно в пункте «Внешний вид» — «Меню» консоли управления создать произвольное меню. Для создания произвольного меню в WordPress придумайте ему любое название и нажмите на кнопку «Создать меню».

Дальше выбирайте элементы меню – рубрики. Ниже вы увидите небольшое окно с рубриками, и в нем нужно выбирайте нужные рубрики или «Все», дальше жмите «Добавить в меню». Чтобы организовать в этом новом меню выбор подрубрик, пункт меню подрубрики перетащите под нужную рубрику и сдвиньте его правее. Смотрите, что должно получиться:

Настройки плагина JQuery Accordion Menu Widget

После того, как вы выполните этот пункт, плагин JQuery Accordion Menu Widget будет работать и с подрубриками.

Скрипт JQuery для меню аккордеон

Решив написать о том, что такое wordpress раскрывающееся меню, на необъятных просторах интернета я нашел wordpress меню jquery аккордеон, выполненное не в виде плагина, а в виде скрипта. Преимущества скриптов вам, думаю, понятны – они не создают нагрузку на ваш сервер, сайт и базу данных, так как работают на внешних библиотеках jquery, которые вы встраиваете в код сайта.

Этот скрипт создает аккордеон меню, которое сворачивается и разворачивается по клику мыши левой кнопкой. То есть – открывает или закрывает ссылки на страницы или рубрики сайта. Мне понравился оригинальный дизайн меню, поэтому покажу, как аккордеон работает, и приведу нужные коды. Вот внешний вид меню, который я создал при помощи стилей CSS:

Скрипт JQuery для меню аккордеон

Функциональность меню построена на работе небольшого скрипта jQuery, плавно открывающего подразделы аккордеона. Цветовые оттенки можно подобрать на свой вкус, то есть – под дизайн вашего сайта. Теперь изучим HTML построение меню, CSS и jQeury обработчик для этого аккордеона. Вот код HTML для меню:

 <ul class="accordion"> <!--Блок всего меню-->

   <li id="one" class="files"> <!--Блок раздела-->

       <a href="#one">Мои файлы<span>10</span></a> <!--Ссылка блока раздела-->

       <ul class="sub-menu"> <!--Блок подменю раздела-->

           <li><a href="#"><em>01</em>Файл<span>1</span></a></li> <!--Ссылки подменю-->

       </ul>

   </li>

   <li id="two" class="mail">

       <a href="#two">Мои картинки<span>20</span></a>

       <ul class="sub-menu">

          <li><a href="#"><em>01</em>Альбом<span>2</span></a></li>

       </ul>

   </li>

   <li id="three" class="cloud">

       <a href="#three">Сфера<span>30</span></a>

       <ul class="sub-menu">

           <li><a href="#"><em>01</em>Файлы сферы<span>3</span></a></li>

       </ul>

   </li>

   <li id="four" class="sign">

       <a href="#four">Вход</a>

       <ul class="sub-menu">

           <li><a href="#"><em>01</em>Войти на сайт</a></li>

       </ul>

   </li>

</ul> 

Вы можете добавлять сколько угодно разделов, подразделов, своих ссылок в меню и подменю – их число не ограничено. Теперь код стилей меню:

.accordion,

.accordion ul,

.accordion li,

.accordion a,

.accordion span {

margin: 0;

padding: 0;

border: none;

outline: none;

}

.accordion li {

list-style: none;

}

/* Определение и стили элементов */

.accordion li > a {

display: block;

position: relative;

min-width: 110px;

padding: 0 10px 0 40px;

height: 32px;

color: #fdfdfd;

font: bold 12px/32px Arial, sans-serif;

text-decoration: none;

text-shadow: 0px 1px 0px rgba(0,0,0, .35);

background: #6c6e74;

background: -moz-linear-gradient(top, #6c6e74 0%, #4b4d51 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6c6e74), color-stop(100%,#4b4d51));

background: -webkit-linear-gradient(top, #6c6e74 0%,#4b4d51 100%);

background: -o-linear-gradient(top, #6c6e74 0%,#4b4d51 100%);

background: -ms-linear-gradient(top, #6c6e74 0%,#4b4d51 100%);

background: linear-gradient(top, #6c6e74 0%,#4b4d51 100%);

-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);

-moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);

box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);

}

.accordion > li:hover > a,

.accordion > li:target > a,

.accordion > li > a.active {

color: #3e5706;

text-shadow: 1px 1px 1px rgba(255,255,255, .2);

background: #a5cd4e;

background: -moz-linear-gradient(top, #a5cd4e 0%, #6b8f1a 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a));

background: -webkit-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);

background: -o-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);

background: -ms-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);

background: linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);

}

.accordion li > a span {

display: block;

position: absolute;

top: 7px;

right: 0;

padding: 0 10px;

margin-right: 10px;

font: normal bold 12px/18px Arial, sans-serif;

background: #404247;

-webkit-border-radius: 15px;

-moz-border-radius: 15px;

border-radius: 15px;

-webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);

-moz-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);

box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);

}

.accordion > li:hover > a span,

.accordion > li:target > a span,

.accordion > li > a.active span {

color: #fdfdfd;

text-shadow: 0px 1px 0px rgba(0,0,0, .35);

background: #3e5706;

}

/* Иконки перед разделами */

.accordion > li > a:before {

position: absolute;

top: 0;

left: 0;

content: '';

width: 24px;

height: 24px;

margin: 4px 8px;

background-repeat: no-repeat;

background-image: url(../img/icons.png); /* Ссылка на картинку-спрайт иконок */

background-position: 0px 0px;

}

.accordion li.files > a:before { background-position: 0px 0px; }

.accordion li.files:hover > a:before,

.accordion li.files:target > a:before,

.accordion li.files > a.active:before { background-position: 0px -24px; }

.accordion li.mail > a:before { background-position: -24px 0px; }

.accordion li.mail:hover > a:before,

.accordion li.mail:target > a:before,

.accordion li.mail > a.active:before { background-position: -24px -24px; }

.accordion li.cloud > a:before { background-position: -48px 0px; }

.accordion li.cloud:hover > a:before,

.accordion li.cloud:target > a:before,

.accordion li.cloud > a.active:before { background-position: -48px -24px; }

.accordion li.sign > a:before { background-position: -72px 0px; }

.accordion li.sign:hover > a:before,

.accordion li.sign:target > a:before,

.accordion li.sign > a.active:before { background-position: -72px -24px; }

/* Стили для под меню */

.sub-menu li a {

color: #797979;

text-shadow: 1px 1px 0px rgba(255,255,255, .2);

background: #e5e5e5;

border-bottom: 1px solid #c9c9c9;

-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);

-moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);

box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);

}

.sub-menu li:hover a { background: #efefef; }

.sub-menu li:last-child a { border: none; }

.sub-menu li > a span {

color: #797979;

text-shadow: 1px 1px 0px rgba(255,255,255, .2);

background: transparent;

border: 1px solid #c9c9c9;

-webkit-box-shadow: none;

-moz-box-shadow: none;

box-shadow: none;

}

.sub-menu em {

position: absolute;

top: 0;

left: 0;

margin-left: 14px;

color: #a6a6a6;

font: normal 10px/32px Arial, sans-serif;

}

/* Скрываем неактивные блоки */

.accordion li > .sub-menu {

display: none;

}

.accordion li:target > .sub-menu {

display: block;

}

Если jQuery библиотека на вашем сайте еще не подключена, то подключаем ее при помощи вот такого кода:

 $(document).ready(function() {

// Указываем переменные

 var accordion_head = $('.accordion > li > a'),

     accordion_body = $('.accordion li > .sub-menu');

// Автоматически открывает первый раздел

// Чтобы не открывался можно удалить

 accordion_head.first().addClass('active').next().slideDown('normal');

// Функция клика

 accordion_head.on('click', function(event) {

// Скрывает открытый раздел по повторному клику

event.preventDefault();

 if ($(this).attr('class') == 'active'){

     accordion_body.slideUp('normal')

     $(this).removeClass('active');

     return false;

     }

// Открывает следующий, скрывая открытый

if ($(this).attr('class') != 'active'){

     accordion_body.slideUp('normal');

     $(this).next().stop(true,true).slideToggle('normal');

     accordion_head.removeClass('active');

     $(this).addClass('active');

     }

   });

});

Также здесь в скрипт добавлена функция, скрывающая подменю по повторному клику на ссылку рубрики или страницы. Мне такое решение очень понравилось – если эту функцию убрать, то постоянно будет виден какой-то открытый пункт меню аккордеон.

На этом – все. Пробуйте и получайте результат. Здесь – решение и для неопытных веб-мастеров, и для тех, кто может работать с PHP, CSS и HTML кодами. До встречи!