Создание меню в Wordrpess, а также сортировка страниц и категорий часто становится довольно сложной проблемой для начинающих вебмастеров. В связи с этим я решил написать небольшое руководство, в котором мы подробно рассмотрим, как создавать произвольные меню в WordPress. С их помощью вы сможете самостоятельно создавать произвольные меню, добавлять или удалять пункты меню, изменять их название, расположение и вложенность.
В одной из предыдущих статей мы уже рассматривали способ, как сортировать страницы и рубрики в WordPress при помощи плагинов. К счастью на данный момент в WordPress появилась встроенная функция, которая позволяет создавать произвольные меню, не прибегая к использованию плагинов. Данная функция доступна во всех версиях WordPress, начиная с версии 3.0.
Сразу хочу обратить ваше внимание на то, что поддержка произвольных меню включена не во всех шаблонах. В связи с этим статья будет состоять из двух частей. В первой части статьи мы рассмотрим, как создавать пункты меню в WordPress через административную панель, если произвольные меню уже подключены в шаблоне.
Как создать меню в WordPress? Создание меню сайта на Вордпрес, как сделать меню сайта, как настроить
Во второй части статьи мы научимся самостоятельно включить поддержку произвольных меню в WordPress и настраивать вывод меню через php функцию wp_nav_menu. Эти знания вам пригодятся на случай, если в вашем шаблоне не предусмотрено использование произвольных меню или же вы сами пишете или редактируете тему оформления WordPress и хотите добавить туда возможность создания произвольных меню.
Включение поддержки произвольных меню в WordPress
Первым делом нам нужно зарегистрировать использование произвольных меню и самих меню. Для этого открываем на редактирование файл function.php вашей темы оформления и добавляем следующий код.
Где «top» — идентификатор меню, а «Верхнее меню» — название месторасположения.
Если нужно добавить несколько меню, то перечисляем их через запятую.
После добавления данного кода поддержка произвольных меню будет включена автоматически. Убедиться в этом вы можете, перейдя в Административную панель – Внешний вид – Меню. Но самой регистрации меню недостаточно. Меню нужно еще вывести в шаблоне. Для этого мы воспользуемся специальной функцией wp_nav_menu.
Вывод произвольного меню. Функция wp_nav_menu
Как уже говорилось выше, выводить произвольные меню мы будем при помощи функции wp_nav_menu, которая может принимать следующие параметры.
При этом параметры можно передавать как через массив, так и через строку. В любом случае меню будет работать. Для наглядности рассмотрим оба варианта.
Передача параметров через массив
Передача параметров через строку
Лично я предпочитаю второй вариант, так как он более компактный, на мой взгляд. В любом случае результатом работы функции будет следующий код.
На этом я заканчиваю данную статью. Основные моменты мы рассмотрели и в 99% случаев данной информации вам будет достаточно для самостоятельного создания произвольных меню в WordPress. Если же у вас возникнут какие-то вопросы, вы всегда сможете задать их в комментариях.
На этом все. Удачи вам и успехов в создании сайтов на WordPress.
Как создать второе меню в WordPress
Давайте начнем с создания второго меню в том виде, в котором мы хотим его видеть в футере сайта. Излагаю я на примере темы Twenty Twelve, которая, по умолчанию, поддерживает только одно меню.
Зайдите в админку WordPress и перейдите в Внешний вид – Меню.
Вы попадете на страницу, где будет показана структура вашего базового меню. И здесь же вы можете наблюдать аж две кнопки “Создать меню” (справа вверху и внизу) и еще есть ссылка с текстом “Отредактируйте меню ниже или создайте новое меню”.
Кликайте по кнопке или ссылке создания меню.
На открывшейся странице заполните название меню. Если желаете, чтобы новые страницы верхнего уровня автоматически добавлялись в это меню, то поставьте соответствующую галочку.
Область темы отмечать не надо. Если вы поставите галочку “Основное меню”, то ваше меню в хедере заменится вот этим, которое вы сейчас создаете. Т.е., если вам не нужно второе меню, а вы хотите изменить содержимое основного, тогда отмечайте область темы “Основное меню”.
Далее слева отметьте галочками те страницы, ссылки на которые вы хотите вывести в меню.
Также, ниже вы можете добавить в меню произвольную ссылку или ссылку на рубрику(и).
После того, как выбрали все необходимое для вывода в меню жмите Добавить в меню. И затем кликайте по Сохранить меню.
Все, второе меню создано.
Как вывести меню WordPress
Итак, у нас уже есть второе меню, но оно пока не выводится. Как я написал выше, тема Twenty Twelve изначально использует только одно меню и таких “одноменюшных” тем много. Давайте разберемся как подключить и вывести второе меню.
Меню подключается в файле functions.php следующим образом:
Видите, тут и в комментарии написано, что тема использует меню в одном месте.
Указанную выше строку кода, нужно заменить на такой код
Функцию подключения одного меню register_nav_menu() мы заменяем функцией подключения нескольких меню – register_nav_menus(). И в качестве параметра передаем её массив наших меню, которые мы хотим зарегистрировать (базовое меню, и наше второе меню для футера).
Теперь откройте файл footer.php и найдите строку вывода меню:
Здесь нужно изменить значение параметра области theme_location с primary на footer_menu.
Теперь осталось указать для нашего нового меню область вывода footer_menu.
Вернитесь в админку: Внешний вид – Меню. И здесь можно в двух местах задать область вывода для меню:
1. Во вкладке “Управление областями”.
2. Внизу в структуре меню “Области темы”.
Сохраняйте изменения, и проверяйте. В хедере у вас должно остаться базовое меню, а в футере – меню, созданное вами.
WordPress плагины для меню: 6 лучших бесплатных решений
Приветствую вас, друзья!
Не так давно в комментариях к статье о выделении активного пункта меню с помощью JQuery один из посетителей попросил меня помочь разобраться с плагином меню для WordPress Jquery Vertical Accordion Menu, где подсветка текущего пункта меню не работала.
Я пообещал разобраться с этой проблемой, но, к сожалению, затянул с выполнением обещанного. Новогодние праздники, авралы на работе постоянно мешали мне заняться блогом. В итоге пришлось всту
Но, наконец, у меня появилось немного времени и я решил наверстать упущенное.
И чтобы статья получилась интересной не только для пользователей проблемного плагина, но и для всех фанатов CMS WordPress, я решил составить свежий обзор лучших плагинов меню, чтобы каждый мог выбрать себе решение по душе.
Обзоров подобного плана в сети полно, т.к. создание меню WordPress – проблема насущная, поэтому мне было нелегко решиться на написание сегодняшнего материала.
Однако, при детальном изучении других статей я обнаружил, что в них либо использовались устаревшие решения, либо пиарились исключительно коммерческие разработки, либо практически не было ничего сказано о возможностях решений.
Данный факт меня вдохновил, поэтому в данном материале будут рассмотрены исключительно бесплатные плагины меню для WordPress (либо условно-бесплатные) с подробным перечнем как их достоинств, так и недостатков, некоторые из которых я попробую по ходу сразу же решать.
Единственное, что я решил взять из изученных мною обзоров, — это рассмотрение не только новых решений.
Естественно, что из-за этого могут возникнуть определённые трудности, т.к. плагины могут быть несовместимы с новыми версиями движка, но это не повод отказываться от них.
Также, перед тем, как мы начнём, я хотел бы подчеркнуть, что данная статья — это не рейтинг, лучший мы выбирать не будем, т.к. все плагины имеют абсолютно различную реализацию – то, что подойдёт одним, других не устроит.
Технические требования
Для тестирования работы плагинов я использовал самую последнюю версию WordPress на текущий момент – 4.7.
Все эксперименты проводились на моём любимом локальном веб-сервере OpenServer, который я рекомендую всем своим знакомым-фанатам Denwer, и был достаточно хорошо описан в статье о программах для создания сайтов.
С темой WordPress я решил не заморачиваться и использовал стандартную – Twenty Sixteen.
Самую свежую Twenty Seventeen я брать не стал, потому что она сделана в формате лендинга, поэтому многие меню на нём не будут работать либо придётся потратить достаточное количество времени для их настройки.
Структура меню для проведения тестов была выбрана следующая:
Я специально не стал использовать стандартное меню WordPress и сделал своё, чтобы создать в нём пункты с различными уровнями вложенности и посмотреть, как плагины меню с ними справятся.
Также хотел сказать, что кандидаты для обзора были выбраны с особым цинизмом — по количеству их скачиваний и средним баллам пользователей, чтобы можно было назвать наших кандидатов объективно лучшими плагинами меню WordPress.
В итоге, в данной статье вы не увидите продуктов, имеющих меньше 10 000 скачиваний и средний балл ниже 4.5 из 5.
И ещё! Перед тем, как мы перейдём к обзору лучших бесплатных плагинов меню для WordPress, предлагаю взглянуть на аналогичный премиум плагин — JetMenu, чтобы по ходу чтения вы понимали, почему за всех участников нашей сегодняшней подборки их разработчики не берут денег
Если быть точнее — в нём собраны все самые лучшие фишки представленных далее, позволяя делать меню для WordPress сайтов легко настраиваемыми, быстрыми и многофункциональными. У бесплатных же постоянно чего-то не будет хватать, можете к этому морально приготовиться
На этом вступительная часть закончена и мы переходим непосредственно к обзору плагинов меню для WordPress.
Также, для лучшего восприятия информации я решил рассортировать все решения на две группы: универсальные плагины ВордПресс и плагины мобильного меню WordPress.
Думаю, что вам понравится Поехали!
Плагины меню для WordPress – универсальные решения
В данной категории плагинов вы найдёте решения, которые предназначены для создания меню сайта, которое будет хорошо смотреться на различных устройствах.
Казалось бы, это требование само собой разумеется. Однако, в современном мире, когда мобильный трафик растёт безудержными темпами с каждым днём, стало всё больше появляться специализированных мобильных решений — плагинов, предназначенных только для мобильных сайтов.
О плагинах мобильного меню WordPress мы поговорим немного позже, а в данном блоке рассмотрим именно решения для различных версий сайта.
Max Mega Menu
Начать я решил с безоговорочного лидера нашего обзора плагинов меню для WordPress, который скачали больше 100 000 раз!
И уже этот факт говорит о том, что мы будем говорить о действительно стоящем решении.
Ссылка на плагин — https://ru.wordpress.org/plugins/megamenu/.
У данного решения множество настроек и возможностей, в результате чего можно сделать горизонтальное адаптивное меню WordPress.
У Max Mega Menu, к сожалению, нет готовых скинов оформления, которые у многих решений идут «из коробки». Вместо этого есть кое-что получше
На странице настроек данного плагина WordPress в админке прописаны все возможные стили всех возможных элементов, что делает настройку комфортной, лишает необходимости копаться в коде сайта и при этом позволяет достичь требуемого эффекта.
Также есть возможность делать свои цветовые схемы оформления, сохраняя наборы стилей. Кроме того имеются настройки анимаций и сценариев поведения (при клике на подменю, например).
Есть подсветка активного пункта меню (пришлось, правда, покопаться в настройках, т.к. по умолчанию отключена).
В итоге, на самом сайте меню выглядит следующим образом:
Внешне выглядит неказисто, но это за счёт того, что готовых скинов и тем оформления нет.
Зато все требуемые элементы можно настроить вручную с помощью визуального редактора, где потребуется только выбрать нужные цвета, шрифты и стили.
Настройки пунктов меню, кстати, разделены по уровням вложенности. Это значит, что главным пунктам и подпунктам меню можно будет задать абсолютно уникальное оформление.
Размещение виджета меню на сайте также максимально комфортно для пользователя, т.к. имеются все возможные способы: PHP-код, шорткод и просто визуальное добавление через меню виджетов.
Плагин позволяет создать меню WordPress, адаптивное к мобильным устройствам, позволяя минимизировать его подобным образом, что невероятно удобно:
Как видите, на мобильной версии сайта данный плагин позволяет создать accordion menu WordPress, что многим может прийтись по вкусу.
И, самое главное, этот плагин при своей массе возможностей, не уступающих множеству платных решений, является бесплатным!
Разработчики зарабатывают себе на хлеб лишь за счёт благотворительных пожертвований и продажей Pro-версии, позволяющей добавлять в меню логотип сайта и другие интересные возможности.
Цена полной версии также не заоблачна – 19$.
Для ознакомления с функционалом Pro-версии рекомендую вам просмотреть следующее видео:
За счёт широкого спектра настроек рассматриваемое дополнение подойдёт для различных типов сайтов.
Как видите, возможностей и достоинств у данного плагина меню WordPress очень много. Однако, это, в свою очередь, создаёт дополнительные трудности в виде необходимости разбираться с массой настроек.
Но, как по мне, это мелочи, которые с лихвой перекрываются преимуществами этого решения. Так что лично я ставлю Max Mega Menu заслуженную пятёрку.
JQuery Accordion Menu Widget
Следующим плагином меню для WordPress в нашем списке идёт как раз виновник всей затеи – расширение, с которым меня просили помочь.
Тем более, он является одним из самых популярных среди пользователей (более 40000 установок) несмотря на то, что не обновлялся уже более 5 лет, следовательно, последняя версия движка, совместимость с которой проверялась – 3.4.2.
Плагин на официальном сайте WordPress можете найти по этому адресу — https://wordpress.org/plugins/jquery-vertical-accordion-menu/
Он позволяет создать меню WordPress, выполненное в виде всем известного «аккордеона», т.е. когда меню ВордПресс выпадающее, а пункты расположены вертикально.
Процедура установки данного расширения была стандартной. Она подробно описана в целевой статье об установке плагинов WordPress.
Настройка весьма проста – поскольку продукт оформлен в виде виджета, то все его опции размещены на экране добавления виджета на сайт:
Как видите, возможностей у него не много, разработчики даже не стали выносить их на отдельную страницу настроек.
Также порадовало наличие различных скинов (вариантов оформления внешнего вида меню) и возможности размещения данного плагина меню для WordPress на сайте с помощью шорткода.
Смотрится простенько и со вкусом Меню выглядит в виде вертикального столбца со списком всех пунктов, которые были добавлены предварительно в админке.
У данного решения существует также примитивная мобильная версия. Примитивная, потому что меню просто растягивается на всю ширину родительского блока, что, однако, не портит общий вид.
За исключением, пожалуй, того факта, что меню, размещённое, как в моём случае, в сайдбаре, на мобильных устройствах будет находится ближе к низу страницы, а не сверху, как должно быть.
Полный функционал и варианты оформления вы можете увидеть на демо-версии данного плагина — http://www.designchemical.com/lab/demo-wordpress-vertical-accordion-menu-plugin/
А для более подробного и наглядного ознакомления с возможностями данного плагина вертикального выпадающего меню для WordPress рекомендую просмотреть следующее видео:
На самом деле, для плагина, который не обновлялся последние 5 лет, в целом, всё выглядит очень неплохо. По крайней мере, он работает и выполняет все возложенные на него функции — создает вертикальное меню WordPress.
За исключением проблемы, которая и подстегнула меня к написанию данной статьи – отсутствие выделения активного пункта меню.
На деле ничего серьёзного не оказалось — решение задачи отняло у меня минут 10 от силы. Плагин реагировал на выбор пункта меню, добавляя ссылке внутри него CSS-класс active, однако свойства класса нигде не были определены, из-за чего не наблюдалось никакого визуального эффекта.
В итоге, я просто прописал в файле стилей выбранного мною скина оформления (можно было прописать код в любом CSS-файле, подключаемом на сайте) следующие строки:
.active
Как результат, при переходе в какую-то рубрику, соответствующий пункт меню меняет фон на более тёмный (при наведении на неактивный пункт наблюдается такой же эффект).
В целом, плагин достаточно неплохой, но на сайт бы себе такой не поставил Однако, любителям крайнего минимализма и WordPress accordion menu он, возможно, придётся по вкусу, о чём свидетельствует высокая оценка скачавших его пользователей — 4.8 из 5.
Зато неоспоримым преимуществом данного плагина для меню WordPress является то, что он абсолютно бесплатен в отличие от многих решений из данного обзора. Из-за этого, скорее всего, и такая низкая частота обновлений
Nextend Accordion Menu
Следующим плагином меню WordPress идёт не такое популярное решение, как предыдущее (всего более 10 000 скачиваний против 40 000 и средней оценкой 4.7 против 4.8), но, тем не менее, заслуживающее не меньшего внимания.
Данный плагин представляет собой стандартное аккордеон меню WordPress с множеством настроек внешнего вида.
После его установки в меню админки появляется пункт для доступа к настройкам. Он состоит из 3 подпунктов:
- Существующие аккордеон меню ВордПресс
- Добавить новое меню
- Купить Pro-версию
Сама структура меню подразумевает, что с помощью данного плагина можно создавать различные меню и использовать их в пределах одного сайта.
На экране добавления нового меню мы видим множество параметров нового меню:
По вкладкам, как у других плагинов, они не рассортированы, но, зато, при нажатии на некоторые кнопки открываются модальные окна, содержащие целые простыни дополнительных опций:
Параметров настройки меню ну просто ооочень много Среди них:
- Отображение подменю в главных пунктах меню;
- Выбор действия и всевозможные эффекты анимации для открытия/закрытия подменю;
- Загрузка скинов оформления и шрифтов меню;
- Кастомное оформление пунктов меню (цвет, иконки, шрифты, положение) для всех уровней вложенности, вплоть до 5-го.
После добавления нового меню можно просмотреть список всех существующих:
На этом экране можно увидеть шорткоды каждого аккордеон меню WordPress, созданного с помощью этого плагина, а также изменить существующие или удалить их. Экран редактирования выглядит так же, как и создания нового меню.
Добавить меню на сайт можно с помощью уже упомянутых шорткодов, а также через меню администрирования виджетов, где нужно будет выбрать добавляемое меню и можно будет задать ему заголовок.
Визуально на сайте меню выглядит так:
Выглядит неказисто, но эта проблема решаема путём настройки внешнего вида, которой я не стал заморачиваться, сфокусировавшись на обзоре функциональных возможностей.
В мобильной версии сайта меню растягивается на всю ширину родительского блока, что не назвать полноценной адаптивностью к мобильным устройствам, но этого вполне достаточно, чтобы назвать плагин user-friendly.
Подводя резюме, стоит сказать, что данный плагин меню ВордПресс меня впечатлил намного больше, чем JQuery Accordion Menu Widget за счёт более тонкой настройки элементов меню и тем, что у него подсвечивается активный пункт меню, с чем у его претендента наблюдались некоторые проблемы.
Единственное, чем рассматриваемое решение уступает предыдущему, с моей точки зрения, – это отсутствие скинов оформления (по умолчанию доступен всего один).
Но этот недостаток решается приобретением Pro-версии, которая стоит 30$ или самостоятельным переопределением стилей в CSS-файлах сайта.
Причём, скины оформления – это единственное существенное расширение базового функционала (не считая индивидуальной тех. поддержки). Также слегка расстроила низкая частота обновлений (последний раз плагин обновлялся 7 месяцев назад)
Вот этот факт и стал для меня той самой «ложкой дёгтя в бочке мёда», без которой всё выглядит достаточно прилично
Плагины мобильного меню WordPress
В данную категорию попали плагины меню для WordPress, предназначенные исключительно для мобильных версий сайтов.
В большинстве своём они даже не отображались на сайте при просмотре его с настольных компьютеров, что делает возможным их использование только в паре с какими-либо универсальными плагинами либо desktop-меню придётся прописывать самостоятельно.
Responsive Menu
Данный плагин меню для WordPress является вторым по популярности после Max Mega Menu с более, чем 80 000 скачиваниями и средним баллом пользователей — 4.7 из 5.
И это, надо сказать, неспроста. Данное решение позволяет создать очень красивое меню WordPress для мобильной версии сайта.
Ссылка на плагин — https://ru.wordpress.org/plugins/responsive-menu/.
После установки в главном меню админки так же появляется пункт для перехода на экран настроек:
Параметров очень много, и они рассортированы по 9 вкладкам. Всего их более 150, что особенно отмечается разработчиками плагина.
Кстати, по факту, большинство параметров оказались закрытыми. Сделать их доступными можно только после приобретения Pro-версии.
Премиум-версия плагина включает оформление desktop-версии меню, возможность загрузки иконочных шрифтов, дополнительные варианты анимаций и т. д.
Приобрести её можно за 15$ для одного сайта и 50$ для неограниченного числа ресурсов (предложение для веб-студий).
Но даже того, что есть в бесплатной, более чем достаточно. Среди них установка изображения меню и фона (изменение цвета фона возможно только в PRO-версии, кстати), направление появления, картинки для кнопок меню и т.д.
В некоторых ситуациях ограничение функционала, с моей точки зрения, выглядело слегка глупо.
К примеру, размер шрифта в бесплатной версии можно устанавливать только в пикселях. А в Pro – в процентах, em и rem. Как по мне, без этого вполне можно обойтись
Визуально, во фронтальной части сайта, меню ВордПресс, созданное данным плагином, выглядит следующим образом:
Как видите, достаточно неплохо. Лично мне ещё очень понравилось, что загружаемая картинка меню большого размера и смотрится интереснее маленькой пинктограмки, которая отображалась в других решениях. Но это дело вкуса
В общем и целом, плагин очень и очень годный. Особенно порадовала частота обновлений,, что говорит о том, что данным плагином меню для WordPress разработчики занимаются всерьез — последний раз 2 месяца назад.
К сожалению, он подходит только как дополнение к уже существующему меню, т.к. вызвать его на desktop-версии сайта лично у меня не получилось.
И у него также не подсвечивается активный пункт меню. Хотя, возможно, я просто недостаточно внимательно изучил список опций, которых у данного плагина меню WordPress, повторюсь, очень много.