JQuery плагин вертикального аккордеон меню для блога WordPress

Разместил / Просмотров: 24 068 / Комментариев: 101

Здравствуйте, дорогие читатели блога. В этот день расскажу Вам я про превосходный плагин, который создаёт на блоге WordPress классное меню аккордеон — JQuery Accordion Menu Widget. Я сам пользуюсь этим плагинов, и естественно Вы его можете посмотреть в действии справа в рубриках. Очень удобный плагин, просто вставляешь через админку виджет и радуйся.

Плагин

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

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

Ну а теперь давайте перейдём к процессу установки и настройки плагина.

Установка плагина

Теперь нужно, в админке блога, зайти во вкладку плагины, затем выбрать Добавить новый и в поле для поиска вписать JQuery Accordion Menu Widget далее нажать поиск.

Нужный нам плагин будет самый первый в списке. А под ним будет ссылка Установить плагин. После того как он установится нужный нам виджет появится во вкладке Внешний вид — Виджеты.

На рисунке выше я подчеркнул название самого виджета.

После Вам всего лишь понадобится перетащить его в сайдбар, который находится сплава, в нужно Вам место.

Настройки плагина

После того как виджет будет добавлен в сайдбар его можно будет настроить по Вашему вкусу. А именно выбрать цвет самого меню, тему оформления. Как будет открываться меню при наведении на него или при клике. Углубляться сильно в настройки не буду, они лёгкие и понятные.

Важный момент: рубрики и подрубрики.

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

Чтобы создать произвольное меню в WordPress Вам нужно зайти в Внешний вид, а затем в Меню. Далее нужно придумать название меню, выберите какое Вам понравится:-) после нажимаем на кнопочку Создать меню.

Когда меню будет создано нужно будет выбрать его элементы, в нашем случае это будут рубрики. Ниже будет не большое окошко с рубриками, в этом окошке нужно будет выбрать вкладку Все, затем нажать Выделить все, а после нажать Добавить в меню. Теперь давайте посмотрим что у меня получилось с рубриками на beloweb.ru.

Теперь нужно создать подрубрики. В данном случае у рубрики WordPress будет подрубрика Плагины. Для этого Плагины нужно перетащить чуть правее. Смотрите на рисунке ниже, что у меня получилось.

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

Надеюсь, что всё ясно и доступно объяснил. Если Вам всё таки Вам будет что то не понятно спрашивайте в комментариях. До скорых встреч, друзья.

  • Спасибо чел буду внедрять в жизнь данный плуг

  • А с версией WP 2.91 он будет дружить?

  • Наверное нет, автор пишет, что требуется версия 3.0 и выше. Хотя может и будет работать.

  • Хм, работает на 2.91 отлично. Только что проверял.

  • Инна

    Александр подскажите как настроить плагин как у вас на сайте, чтоб меню было выпадающим.

  • Что у Вас именно не получается?

  • Инна

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

  • Я так понял меню которое справа? В админке зайдите в «внешний вид» затем «виджеты» далее в виджете плагина измените Click на Hover

  • Подскажите какой плагин использовался для соц кнопок….?

  • Марьян, посмотрите вот эту статью http://beloweb.ru/wp/top-13-plaginov-dlya-sotsialnyih-zakladok-na-blog-wordpress.html

  • Огромное спасибо за статью. Это именно то, что мне было нужно. Просто идеально подошёл.

  • И Вам спасибо за комментарий

  • Алексей

    А есть ли плагин, который позволяет делать аккордеон в записи? У меня есть длинное оглавление, в котором есть разделы, и в каждом разделе несколько параграфов. Вот бы их сворачивать в аккордеон…

  • Алексей, за плагин не знаю, но можно в пост добавить самому любой аккордеон, даже слайдер, единственная проблема, что код нужно вставлять самому. Аккордеон меню можете посмотреть тут http://beloweb.ru/javascript-jquery/16-besplatnyih-jquery-i-css3-poleznostey-dlya-vashego-sayta.html Думаю, найдёте что нибудь полезное.

  • Антон

    Александр, у меня не получается так, чтоб когда наводишь на рубрику, выдвигались подрубрики, как у тебя на сайте. Поставил галочку на Hover, и всё остальное сделал как ты пишешь…
    Может моя тема не поддерживает, типа, такие эффекты…

  • Антон, а как у Вас подрубрики показываются? Только после клика? И скажите, кака у Вас версия вордпресс?

  • Антон

    Под главной рубрикой идут подрубрики, и нет такого эфекта чтоб заезжали и выезжали. Вордпресс у меня версии 3.3

  • Антон

    Что пред кликлм что после, подрубрики всегда видны ниже главной рубрики.

  • Антон, попробуйте убрать все галочки в виджете, и там где Hover Delay поставьте No Delay. Если не поможет, скорее всего плагин пока что не совместим с новой версией вордпресс, будем ждать обновления плагина.

  • Антон

    А на версии 3.2 работает?

  • Антон

    Не помогло…

  • У меня версия 3 2 1 и как видите работает. Возможно у Вас шаблон такой. Или проверьте в Хроме. Возможно в Опере не работает.

  • Антон

    Да, поставил другую тему всё заработало.
    А можно над старой темой как нибудь поколдовать с кодами или еще чем, чтоб и на ней заработал плагин?

  • Антон, честно скажу в php я не разбираюсь, извините, тут я ничем помочь не могу.

  • Подскажите, в чем может быть дело, плагин установился без проблем, но он некорректно работает: меню при любых настройках виджета всегда в развернутом виде (главные пункты меню и подменю выведены просто как карта сайта и ни сворачиваются, ни разворачиваются). Пробовал разные темы (шаблонов 20 ставил). Версия WordPress актуальная — 3.3.1. Может где то что то прописывать надо дополнительно, чтобы плагин нормально работал?

  • Алексей, Вы точно как в статье всё сделали? Меню делали?

  • Конечно я сделал меню и в нескольких пунктах меню сделал подменю, в виджете выбрал это меню.. я сделал все как у Вас в статье.. Но меню выдается как карта сайта — списком. В самом виджете я перебрал все варианты настроек, в виджете работают скины (т.е. шкуры меняются), но меню остается полностью расрыто (все пункты меню).
    Я читал офиц. фак (форум) этого плагина, там описаны какие то проблемы, но все на английском, что понимал — делал: пробовал по другому подключить jQuery-библиотеки, прописывал разные версии библиотек и с прямой ссылки с Гугля и закачивал себе на сайт, подгружал библиотеку из functions.php и другими способами в header.php.
    Может напишете названия шаблонов где Вы точно пробовали этот плагин и он работал, хотя я кучу шаблонов перепробовал и вряд ли в этом дело…

  • Возможно, выше в комментариях, написано, что поменяли шаблон и всё заработало, но мне кажется, что тут ещё проблема в версиях вордпресс, особенно с последней, и с которой плагин никак пока дружить не хочет. У меня версия 3.2.1. и как видите всё работает.

    Попробуйте скачать шаблон как у меня и проверить на нём, его название AllTuts.

  • Теперь ясно, что дело не в шаблоне, с шаблоном AllTuts тоже самое. Далее, методом исключения я пробовал отключать плагины, которые используют jQuery, в т.ч. nextgen-gallery, и убирал слайдер на jQuery врезанный в шапку, всё равно менюшка не работает должным образом… Если все таки дело в версии WP то обидно… хотелось использовать этот плагин…
    Последняя надежда — может быть Вы или другой спец, который прочитает этот коммент подскажет мне в чем дело посмотрев меню на моем сайте http://антольчик.рф — я поставил эту менюшку на пару — тройку дней (т.к. больше не хочу чтобы она висела в неработающем виде).. пришлось адаптировать один из скинов плагина под мою тему, чтобы не так заметно менюшку было.. разместил её в самом низу левого sidebar’а, там видно что 2 пунта меню, в одном 3 подменю, в другом 2 подменю, шапка на jQuery робит, т.е. значит библиотека подключена нормально… Если за это время никто ничего не подскажет придется на одном из серваков пробовать устанавливать старый WP 3.2.1. чтобы до конца исключить все возможные проблемы…

  • Скорее всего это плагин просто пока что не дружит с последней версией вордпресс

  • Чтобы народ не пугался )) по поводу этого плагина — обязательно отпишусь: наконец то я нашел в чем дело, я создал новый нулевой сайтик и поставил один только этот плагин JQuery Accordion Menu Widget — он заработал в т.ч. с моей темой и на последнем WP. Тогда я начал поочередно отключать уже на действующем сайте плагины и нашел плагин который конфликтовал с этим, вот его название Superb slideshow gallery. Уж не знаю что за конфликты между ними, но как я отрубаю плагин для слайдшоу — менюшка сразу же робит (само слайдшоу может даже нигде не задействовано — просто сам по себе активированный плагин конфликтует плагином менюшки)! Так что плагин робит на актуальной версии WP, Спасибо за плагин и Ваши ответы. Теперь буду думать как решить конфликты, если не разберусь, то буду решать от какого из плагинов отказываться ))

  • И Вам спасибо, что решили одну из проблем, и оставили, такие подробные комментарии :-)

  • xakerxak

    Спасибо Агромное!

  • Всегда рад :-)

  • Александр

    Меню не будет работать, если в footer.php не будет функции wp_footer();

  • Александр, вроде бы как в footer.php всегда есть такая функция wp_footer();

  • Александр

    Доброго дня есть вопрос такого типа,как изнутри поменять цвет черный на красный,понятно его в установочнике нет,как сделать чтобы он был.Есть варианты?

  • Александр, скачайте плагин и попробуйте в css посмотреть плагина. Скорее всего там стоит фоновое изображение, которое и нужно поменять на необходимое.

  • Всё верно, в css плагина можно взять блэк-шкуру (black.css) и её изменить под себя — там и фон и цвет букв можно прописать и фоновые изображения в папке images нужно подменить. Можете глянуть как у меня на сайте эта менюшка выглядит, выше в моём предыдущем сообщение ссылку на сайт уже оставлял…

  • Не плохо придумали. Надо и у себя чё нибудь изменить :-)

  • Евгений

    Не работает данный плагин, нету выпадающего меню. Версия WP 3.3.1 У кого нибудь возникали проблемы с данным плагином ?

  • Евгений, Вы всё так как в статье написано сделали?

  • Евгений

    С той лишь разницей что меню было создано раньше установки плагина. Подрубрики создал, родители у этих страниц указаны.

  • Евгений

    Могут ли стили в сайдбаре мешать корректной работе плагина. Я до стилей еще просто не добрался.

  • Всё возможно, ещё проблема может быть в шаблоне попробуйте изменить, чтобы проверить.

  • Дамир

    Алексей, где подредактировать, что бы можно было менять ширину менюшки, шрифты и тд?

  • Дамир, я Александр. :-) Вам нужно скачать этот плагин на компьютер. Далее в исходниках найти файл стилей style.css (возможно по другому называется) и там отредактировать то что нужно.

  • Дамир

    Извините =) Спасибо за ответ =)

  • Станислав

    а я хочу убрать меню из шапки и оставить только в сайт баре. что бы шапку сайта оно вообще не касалось !! что бы там как положено отображалось то что я хочу. как это сделать?

  • Станислав, это всё зависит от шаблона блога. Если меню в шапке нужно убрать, придётся лезть в код. Или посмотрите в настройках шаблона, возможно там его можно убрать.

  • Ольга

    А ведь верно! Без не работало!! Спасибо!!

  • Дима

    Здравствуйте.. А можно как то сделать, что бы после того как я перешел по ссылке в меню и оно открылось(стоит при нажатии) на странице куда я перешел, этот подпункт меня был раскрыт(как у Вас на сайте, при наведении)

  • Дима

    так как у Вас в футере сделано..

  • Дима, если я Вас правильно понял, тогда можно, но нужно в коде плагина ковыряться, и хотя бы иметь не большое представление как это сделать. Мне кажется, что лучше будет поставить хлебные крошки.

  • Саня

    Спасиииибоооо друг, отлично все работает с этой функцией.

  • Crow

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

  • Crow, Вы сами уже ответили на свой же вопрос. Не знаю почему, но данный плагин на отрез отказывается работать с некоторыми шаблонами.

    Ещё эта проблема возникает, когда нет функции wp_footer(); в footer.php, проверьте.

  • Crow

    Да вот как раз wp_footer() есть, jquery подключен и работает… В общем к чему, видимых причин для отказа в работе нет. Странно все это.

  • Crow

    Собственно, отсюда другой вопрос. Есть ли для таких «инвалидных» шаблонов альтернатива, для решения вопроса с подобным меню? :)

  • Crow, а версия вордпресс какая?

  • Crow, есть множество похожих плагинов. Просто мне почему то понравился именно этот. :-) На сайте вордпресс поищите и обязательно найдёте.

  • Crow

    WP 3.4.1. Но дело не в этом, как я думаю. Ведь не зря же на этой версии ВП, но другом шаблоне, все работает.

  • Crow, тогда однозначно проблема с шаблоном. Возможно там пропустили какую нибудь функцию без которой меню не хочет работать. Возможно выйдет обновление шаблона, и всё будет нормально.

  • Hе могу даже настройки найти этого плагина в админке. Версия Вордпресс последняя 3.4.1

  • Прошу прощения, невнимательно читал… В виджете его искать надо))

  • Ольга

    Здравствуйте! Скажите, а disable class — это исключение рубрик из аккордеона? надо ставить id с минусом, например -5, -6 и т.д? А еще вопрос. Если есть у подрубрик еще подрубрики, так же будет выезжать? спасибо.

  • Ольга, правильно disable class это исключение id рубрики. С подрубриками нужно пробовать.

  • Ринат

    дЛя тех кто не смог все таки настроить вот название более лучшего плагина настроил в 2 клика!
    Collapsing Categories вбейте в поисковик или в разделе плагины. Работает как часы сам лично проверил!

  • Спасибо, Ринат :-)

  • Ринат

    Правда я передумал использовать его чето он мне дизайн портит :D

  • Натали

    Здравствуйте Александр! Помогите пожалуйста…Я установила этот плагин, работает, но только почему в других статических (такие как: последние записи, архивы и т.д.) виджетах стили пропали ??? не могу понять в чём причина? как решить эту проблему?

    ( у меня последняя версия 3.4.2)

  • Натали, в смысле сами виджеты не работают?

  • Натали

    Нет… виджеты работают, на сайте отображаются без стиля. Самое интересное то, что в css таблице стили прописаны для этих виджетов и без этого плагина всё отображается правильно: размер шрифта, цвет шрифта, фон и т.д, а как только плагин активирую, то такое впечатление, что JQuery Accordion Menu Widget отключает стили соседних виджетов. Не знаю…что делать(((( а мне этот плагин больше нравиться, чем другие подобные. И без него мне не вариант.. в моём блоге будет много подкатегорий!

  • Натали, скорее всего файлы стилей CSS меню и других виджетов одинаковы, вернее название одинаковое. По этому получается такой баг. Ещё возможно, что это происходит из за шаблона. Попробуйте активировать его на другом шаблоне и посмотрите что получится. А ещё может быть, что данный плагин пока что не совместим с последней версией Вордпресс, в этом случае нужно ждать обновления плагина от производителя.

  • Натали

    Ну я тоже это предполагаю(( Да ещё проблема в том, что я очень долго искала подходящий шаблон (т.е. даже больше подходящий каркас шаблона) и изменила полностью его дизайн, по-этому этот вариант не подходит к сожелению(((

  • Натали, ну тогда нужно ждать обновление.

  • Натали

    Ну в принципе да… пока попробую по колдовать с плагином Collapsing Categories, он работает корректней) Спасибо Александр за содействие))

  • Натали, рад был помочь :-)

  • Алексей

    Большое человеческое СПАСИБО. За 12 часов сидения за компом в поиске способа вывода рубрик в виде выпадающего меню в сайдбаре и опробования массы плагинов, этот заработал на все про все вместе с настройкой 15 минут.

  • Алексей, очень рад, что Вам понравился плагин :-)

  • Мария

    Все прекрасно работает, но написание идет в английском стиле — если в названии раздела/рубрики больше одного слова, то все слова ставятся с заглавной буквы. В русском в заголовках только первое слово должно быть с заглавной. Где это можно поменять?

  • Здравствуйте, Мария. Ван нужно найти стили CSS в архиве с плагином, и не много отредактировать его.

  • виталий

    Здравствуйте Александр! Сможете ли вы создать мне сайт , если да, напишите сколько будет стоить ваша работа?

  • Здравствуйте Виталий. Если установить на хостинг вордпресс и установить желаемый шаблон то 470р. Если возникнут вопросы напишите мне в контактах.

  • Мария

    Спасибо! Наконец, нашла! Вместо capitalize вписала none и все встало красиво.

  • Мария, рад, что у Вас получилось :-)

  • Может я ошибся с названием, у меня просто оно так в теме Вордпреса называется — верхнее меню с рубриками Вашими :»JavaScript», «JQuery», «Новичкам» и т.д. Красивое меню, а самое главное работает плавно и все подрубрики выплывают!

  • Евгений

    Добрый день, у меня установлен плагин, описанный выше, хотел установить в дополнение плагин Category & Page Icons для страниц в этом аккордеон-меню, но иконки не появляются. Не подскажете, в чем может быть дело?

  • Здравствуйте, Евгений, причин может быть множество, попробуйте другой плагин поставить или же обратитесь к разработчику плагина.

  • Катерина

    После проведения нескольких часов в поисках причины некоректной работы плагина наткнулась на Ваш блог…и вуаля .. в футере…функции wp_footer(); не было! Действительно, странная связь! Спасибо, за подсказку!

  • Рад был помочь, Катерина :)

  • Alex Vityuk

    как его сделать чтобы было всегда раскрыты подпункты?

  • Здравствуйте, попробовать поискать другой плагин.

  • Denis

    Доброго времени суток! Если на главной странице установить слайдер меню не работает, firebug пишет такую фигню:TypeError: jQuery(…).dcAccordion is not a function speed: ‘slow’ Как решить данную проблему?

  • Скорее всего классы в скриптах одинаковые.

  • Ирина

    Встал как родной. Спасибо!
    Столько мучилась, а ларчик просто открывался.

  • Андрей

    Здравствуйте у меня проблема с 2 пунктами подменю.
    Второй пункт встал напротив первого, а все остальные работают нормально. Подскажите как исправить и сделать так что бы оно не стояло напротив первого пункта. Скрин прилагаю

  • Андрей

    Упс. Вот ссылка на скриншот

    http://pikucha.ru/idfVW

  • Попробуйте добавить br

  • Артем

    Как можно убрать белую полосу в плагине?(на фото красным выделил)

  • Рамиль

    А как можно в это меню вставить иконки для каждой рубрики?