Плагины меню для CMS WordPress. Как сделать красивые меню в WordPress плагинами и без Wp боковое меню

Чтобы полностью раскрыть потенциал меню на WordPress, попробуйте несколько доступных плагинов. Выбор достаточно широкий, ведь плагины позволяют расширить возможности меню самым разным образом, например, бывают и мега-меню, и адаптивные меню, и кнопки меню и т.д. Ниже список из 8 лучших, на мой взгляд, плагинов для меню на WordPress.

1. Адаптивное меню

Если на вашем сайте еще нет адаптивного меню, то плагин Responsive Menu – хороший выбор для каждого уважающего себя владельца сайта. Расширение предоставляет возможность использовать множество настроек и имеет платную и бесплатную версии. Бесплатный вариант Responsive Menu позволяет изменить немало: цвет, шрифт, кегль, фоновые изображения, реализована возможность деактивировать элементы меню или поменять их порядок, поменять расположение меню на странице (слева, справа, сверху или снизу) и т.д.

2. Max Mega Menu

Удобство навигации и использования на сайтах, где меню состоит из десятков или сотен категорий и элементов, можно улучшить с помощью мега-меню. Мега-меню позволяют разместить все необходимые элементы и при этом не усложнять пользовательский интерфейс. Один из лучших плагинов для создания мега-меню - Max Mega Menu . Созданные с помощью него меню адаптивные, могут использоваться на устройствах с сенсорными и retina экранами.

В расширении Max Mega Menu используется drag-and-drop. Можно одновременно открывать несколько экземпляров плагина и наладить достаточно много визуальных эффектов в меню, например, которые появляются при наведении мыши. Можно сделать так, чтобы при наведении или нажатии мышью появлялись подменю, чтобы изображение плавно появлялось и исчезало, чтобы при навигации выдвигалось подменю сверху или сбоку, добавить иконки. Все это доступно в бесплатной версии, а в платной – еще больше.

Привет, друзья! Счастлив видеть вас на страницах моего блога. Эту статью целиком и полностью посвящаю меню WordPress. Постараюсь осветить эту тему со всех сторон: рассмотрю наиболее интересные плагины для меню WordPress, посвящу несколько строк созданию верхнего меню, расскажу о стандартных возможностях WP. Чтобы материал, описанный в этой статье, был понятен, обязательно перед его прочтением ознакомьтесь с постом о .

Стандартные способы создания и вывода меню в WordPress:

  1. Если тема поддерживает WordPress 3 Menu System, то верхнее menu можно создать через раздел «Внешний вид» — «Меню», в противном случае оно формируется автоматически из публикуемых страниц.
  2. Создать меню, содержащее активные рубрики блога, можно с помощью виджета «Рубрики».
  3. Меню с ссылками на страницы блога выводится с помощью виджета «Страницы». Лично я никогда этим виджетом не пользовался, потому что на блоге страницы WP используются для вывода технической информации (о себе, карта сайта, обратная связь и так далее). Лучшее место для них — в шапке блога в горизонтальном виде. Так уж принято.
  4. Произвольное меню создается в разделе «Внешний вид» — «Меню», для вывода на блог используется одноименный виджет.
  5. Использовать дополнительными плагины WordPress.

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

Стандартные возможности WordPress

Перейдите в раздел «Внешний вид» — «Меню», нажмите на кнопку «+» и введите заголовок.

Теперь необходимо добавить в него пункты:

Страницы — выберете нужные страницы и нажмите «Добавить в меню».

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

Не забывайте сохранять внесенные изменения.

В темах, которые поддерживают WordPress 3 Menu System присутствует так же опция «Области темы» — это место в , которое специально отведено под меню. Чаще всего оно предназначено для вывода верхнего горизонтального меню блога, которое часто называют «главным». В таком случае достаточно задать «Область темы», и оно автоматически появится на сайте.

В противном случае, используется виджет «Произвольное меню». Перейдите в раздел «Внешний вид» — «Виджеты», найдите в общем списке данный виджет и перетащите его в сайтбар (боковая колонка). После этого появятся настройки, в которых нужно выбрать созданное ранее меню.

Сохраните настройки и полюбуйтесь на свое творение.

Верхнее меню WordPress — как отредактировать и удалить

Во многих темах верхнее menu формируется автоматически из публикуемых страниц, которые в основном используются для общей информации — «О блоге», «Полезная информация», «Карта сайта» и так далее. Для этого в файле header.php используется следующий код:

> >

В моей теме оно дублируется еще внизу страницы, поэтому этот же код был и в шаблоне footer.php.

Чем это неудобно:

  • Формируется динамически из всех созданных и опубликованных страниц, хотите вы того или нет. Порой некоторые страницы нужно оставить незамеченными.
  • В некоторых темах под верхнее меню выделяется очень мало места, поэтому в нем отображаются только первые 3-4 пункта, а остальные скрываются под соседним слоем (будь то область контента или логотип). Смотрится это очень некрасиво, да и поисковые системы могут это счесть за преднамеренное сокрытие ссылок от посетителей.

Исправить эти недочеты достаточно легко — нужно просто удалить тот код, что я привел выше и написать следующую конструкцию:

Для людей, которые знают html, разобраться в этом коде не составит труда, для незнающих поясню. Строчки будут отличатся только двумя параметрами.

Давайте рассмотрим решение одной тривиальной задачи с которая время от времени встречается разработчикам. Бывает, что на сайтах нужно выводить сразу два меню, которые при этом между собой взаимосвязаны: одно верхнее горизонтальное 1-го уровня, а второе в сайдбаре 2-го уровня. Причем в боковом отображаются только те подпункты, для которых выбран соответствующий родительский элемент в главном меню. Например, если у вас в шапке сайта есть перечень стран, то выбрав, допустим, Италию, в сайдбаре получите только лишь список итальянских городов.

Теоретически, реализовать такую фишку можно с помощью функции и какого-то хитрого PHP кода, но я предлагаю воспользоваться готовым решением — виджетом меню для wordpress под названием Advanced Sidebar Menu. Это максимально просто и не нужно делать никакие правки шаблона.

Скачать плагин можно отсюда или установить через админку. Основная функция — создание и вывод динамического бокового меню с учетом связи «родитель / наследник» для страниц и категорий сайта.

Никаких дополнительных настроек после установки делать не нужно, в разделе «Внешний вид» — «Виджеты» просто появится 2 новых элемента: Advanced Sidebar Pages Menu и Advanced Sidebar Categories Menu. Настройки данных виджетов меню для wordpress плюс-минус похожие:

  • Title — заголовок виджета.
  • Include Parent Page — добавлять ли родительский элемент в меню.
  • Include Parent Even With No Children — включать ли страницы без подстраниц.
  • Order By — варианты сортировки (порядковый номер, заголовок, дата).
  • Use this Plugin’s Styling — использование стилей оформления от плагина.
  • Pages to Exclude (ids) — исключаемые страницы.
  • Always Display Child Pages — всегда выводить подстраницы.
  • Levels to Display — количество уровней меню для отображения.

Как видите на скриншоте выше, для категорий все, в принципе, аналогично, но без сортировки и уровней. Плюс добавляется опция отображения элемента на странице с полным текстом записи (Display Categories on Single Posts).

Итого, в большинстве случаев вам просто нужно добавить виджет меню для wordpress в сайдбар и он сразу начнет работать. Конечно, при этом на сайте должна существовать соответствующая иерархия с подстраницами. Если честно, не совсем понятно как настроить зависимое меню для сложных проектов с родительской страницей, начиная со 2-го уровня. В описании модуля сказано, что нужно назначить родительскую страницу/категорию, но в настройках ничего похожего я не увидел. С другой стороны подобные ситуации встречаются крайне редко, как правило, зачастую у вас всего 2 меню (боковое и главное), поэтому виджет Advanced Sidebar Menu полностью подходит.

Напоследок следует заметить, что есть в модуле Pro версия с более широкими настройками (опции оформления, стиль аккордеона для меню и т.п.). Разработчикам советую заглянуть на страницу Developer Docs где собрана информация о специальных фильтрах/функциях для более сложных вариантов использования плагина.

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

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

Max Mega Menu

Max Mega Menu - автоматически преобразует ваше существующее меню или меню в мегаменю. Затем вы можете добавить любой виджет WordPress в свое меню, изменить стиль своего меню с помощью редактора тем и изменить поведение меню с помощью встроенных настроек. Max Mega Menu - это полноценный плагин для управления меню, идеально подходящий для управления существующим меню и превращения его в удобное для пользователя, доступное и готовое к касанию меню с помощью всего нескольких щелчков мыши.

Особенности Max Mega Menu :

  • Основывается на стандартной системе меню WordPress
  • Поддерживает несколько мест меню, каждое со своей конфигурацией
  • Конструктор путем перетаскивания элементов
  • Показывает виджеты WordPress в меню
  • Настраиваются стили меню с помощью встроенного редактора тем
  • Переходы подменю Fade, Fade Up, Slide Up или Slide
  • Добавление иконок к пунктам меню
  • Опции пунктов меню, включая «Скрыть текст», «Отключить ссылку», «Скрыть на мобильном» и т. д.
  • Выравнивание пунктов меню

Admin Menus Fixed
Это один из наиболее известных бесплатных плагинов меню для WordPress, который позволяет добавлять разнообразные меню. Вам не нужна дополнительная прокрутка.

Особенности Admin Menus Fixed:

  • Работает с WordPress 3.5+
  • Имеет три варианта Admin Menus Fixed
  • Включает в себя панель инструментов WordPress
  • Автоматически встраивается в WordPress
  • Показывает элемент окна администратора

У вас нет разрешения на просмотр содержимого!

Dropdown Menu Widget
Этот бесплатный плагин для меню в WordPress позволяет создавать пользовательские выпадающие навигационные меню, имеет множество тем CSS, которые являются частью основных характеристик плагина.


Особенности Dropdown Menu Widget:
  • Выпадающее меню только для CSS
  • Страницы листинга
  • Вертикальное или горизонтальное расположение
  • Выбор тем для виджета

У вас нет разрешения на просмотр содержимого!

The official plugin for OpenMenu
Создавайте выпадающее меню с помощью плагина The official plugin for OpenMenu, получайте удовольствие от его работы.

Особенности OpenMenu:

  • Тип пользовательских записей для OpenMenu
  • Пользовательские функции
  • Настройки ширины сайта
  • Управление просмотром меню

У вас нет разрешения на просмотр содержимого!

Admin Menu Tree Page View
Название этого бесплатного плагина меню для WordPress говорит о его работе, вы можете легко редактировать и просматривать порядок, установленный для выпадающего меню.

  • Возможность изменить порядок
  • Обзор всех страниц
  • Иерархическая древовидная структура
  • Совместимость с WPML

У вас нет разрешения на просмотр содержимого!

JQuery Accordion Menu Widget
Используйте более продвинутые виджеты и шорткоды для создания красивого выпадающего меню с помощью этого бесплатного плагина для меню.

Особенности JQuery Accordion Menu Widget:

  • Клик/Наведение
  • Автоматическое расширение в зависимости от текущей страницы/пункта
  • Отключение родительских ссылок
  • Различные меню
  • Задержка при наведении

У вас нет разрешения на просмотр содержимого!

Admin Menu Tree Page View
Удобные меню поиска и редактирования, создание иерархического выпадающего меню и упорядочивание всех меню так, как вам нужно.

Особенности Admin Menu Tree Page View:

  • Изменение порядка страниц
  • Просмотр всех страниц
  • Совместимость с WPML

У вас нет разрешения на просмотр содержимого!

Responsive Select Menu
Автоматически встраивается в WordPress 3.0 и выше, меню в окне выбора лучшее для мобильных устройств. Этот бесплатный плагин для меню в WordPress весьма интересен в использовании.

Особенности Responsive Select Menu:

  • Устойчивая работа на мобильных устройствах
  • Более лёгкая навигация для устройств с сенсорным экраном
  • Не нуждается в дополнительном PHP-коде

У вас нет разрешения на просмотр содержимого!

JQuery Mega Menu Widget
Создавайте различные выпадающие меню с использованием меню пользователя в WordPress, просто используя jQuery.

Особенности JQuery Mega Menu:

  • Наведение/Клик
  • Нумерация элементов в строке
  • Несколько обложек
  • Эффект анимации
  • Скорость анимации
  • Набор подменю

У вас нет разрешения на просмотр содержимого!

WP-Easy Menu
Автоматическая генерация классификации для меню, пользовательских записей и добавление пользовательских ссылок на ваш сайт.

Особенности WP-Easy Menu:

  • Страницы или пользовательские ссылки
  • Создание встроенного меню
  • Автоматическая работа меню

У вас нет разрешения на просмотр содержимого!

jQuery Dropdown Menu
Создавайте горизонтальное и вертикальное выпадающего меню с помощью этого известного плагина для меню в WordPress

Особенности jQuery Dropdown Menu:

  • Цвет заднего фона в главном меню
  • Скруглённые границы (или нет)
  • Разделение кнопок
  • Указатель мыши поверх цвета заднего фона
  • Задаётся размер и цвет шрифта в меню

У вас нет разрешения на просмотр содержимого!

Ozh’ Admin Drop Down Menu
Создавайте прекрасное горизонтальное выпадающее меню с помощью плагина Ozh’ Admin Drop Down.

Особенности Ozh’ Admin Drop Down Menu:

  • Выпадающее меню для CSS
  • Интерфейс API для программистов
  • Не поддерживаются инсталляции WordPress

У вас нет разрешения на просмотр содержимого!

JQuery Vertical Mega Menu Widget

Этот плагин для WordPress позволит вам при создании виджета добавлять вертикальное меню в ваши колонки, просто используйте меню пользователя в WordPress с помощью данного плагина.

Особенности JQuery Vertical Mega Menu Widget:

  • Нумерация элементов в строке
  • Эффект анимации
  • Управление анимацией
  • Скорость анимации
  • 8 различных обложек

У вас нет разрешения на просмотр содержимого!

WP Responsive Menu

WP Responsive Menu - это простой плагин, который позволяет в кратчайшие сроки добавить настраиваемое адаптивное меню на любой сайт WordPress, а настройку можно выполнить прямо со страницы настроек, без необходимости кодирования.

Особенности WP Responsive Menu:

  • Получите красивое слайд-меню менее чем за минуту.
  • Заставляет ваше меню работать лучше на мобильных устройствах.
  • Легко настроить без каких-либо навыков кодирования.
  • Позволяет установить направление открытия меню сверху/снизу/влево/вправо в соответствии с вашими потребностями.
  • Возможность изменить анимацию значка меню в соответствии с вашим сайтом.
  • Добавьте свой логотип в строку меню и легко укажите ссылку на него.
  • Поставляется в двух разных вариантах отображения на ваш вкус.
  • Быстро скрыть ненужные элементы, когда активно адаптивное меню.
  • Предоставляет лучшую возможность открывать / закрывать меню с помощью простых жестов.
  • Легко настроить размеры шрифта и стили из настроек.
  • Дает вам гибкость, чтобы добавить окно поиска внутрь меню.

У вас нет разрешения на просмотр содержимого!

Custom Taxonomies Menu Widget
Очень простое классификационное меню может быть создано с помощью Custom Taxonomies Menu Widget, также вы можете использовать панель управления виджета для дополнительных опций.

Особенности Custom Taxonomies Menu Widget:

  • Выбор классификации пользователя для отображения
  • Изменение порядка отображения в пользовательских классификациях
  • Возможность выбора, следует ли отображать классификацию
  • Возможность выбора, следует ли отображать список терминов в виде иерархии
Получилась такая подборка лучших плагинов меню для WordPress. Если вы знаете ещё какие-то интересные плагины, то напишите о них в комментариях они будут добавлены обзор.

Всем привет, сегодня я хочу рассказать вам как можно в wordpress добавить меню. Казалось бы не сложная задача, но хороших 10 - 15% вопросов связаные именно с меню, ведь несмотря на то, что у вордпресс есть специальная функция wp_nav_menu - разработчики шаблонов то и дело маются ерундой и делают его через всем известное место. Далее я покажу вам пошаговую инструкцию как создать шаблон меню.

В качестве примера предлагаю вам, вместе со мной, сделать простенькое, одноуровневое, горизонтальное меню wordpress.

Если вы искали информацию о выпадающих меню wordpress, советую обратить внимание на эти статьи:

В этих статьях описан механизм создания меню, вам будет достаточно скопировать html и CSS с примеров и вывести через php меню для WordPress как описано ниже в этой статье.

Навигация по странице:

Для начала нам потребуется хтмл код для меню, им мы и займемся.

Горизонтальное меню wordpress на HTML+CSS

Я не буду особо много времени уделять моментам по созданию Html и CSS для нашего меню. Постараюсь просто привести части кода и краткое описание к ним.

Html код нашего меню будет самый простой:

Именно таким списком ul по-умолчанию генерирует меню вордпресс.

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

Стили CSS

#nav1{ position:relative; width:100%; height:62px; background:#0076c6; border-bottom:5px solid #e5eef4; box-sizing:border-box; z-index:11; font-family:Arial, sans-serif; } #nav1 ul{ display:block; list-style:none; margin:0px; padding:0px; text-align:justify; font-size:1px; line-height:1px; width:100%; height:57px; } #nav1 ul::after{ display:inline-block; width:100%; height:0px; content:" "; } #nav1 ul li{ display:inline-block; width:auto; height:auto; font-size:15px; line-height:1.4em; vertical-align:top; } #nav1 ul li a{ display:block; width:auto; height:57px; box-sizing:border-box; padding:18px 20px 0px 20px; font-size:15px; color:#ffffff; } #nav1 ul li a:hover{ background:#11476C; text-decoration:none; }

Горизонтальное меню wordpress, которое растягивается на всю ширину блока.

Вот так это меню выглядит в браузере:

CSS код нужно скопировать в свою тему в style.css. Html код также можно скопировать в нужное место темы, обычно это header.php + потребуется малость подогнать CSS стили, чтоб меню стало так как вам нужно на сайте.

Как добавить шаблон меню в wordpress

Надеюсь вы скопировали CSS и HTML к себе в шаблон. Теперь нам нужно подкоректировать наш код.

1) Открываем место, где находится меню и вместо

  • Главная
  • О нас
  • Отзывы
  • Новости
  • Статьи
  • Вопрос/Ответ
  • Контакты

ставим вот такой вызов функции вордпресс:

"menu1", "container"=>false, "depth"=>"1", "echo"=>"1")); ?>

В итоге у нас получится вот так:

Обратите внимание на название "menu1" вот точно с таким идентификатором мы должны зарезервировать место под меню.

"container"=>false – говорим что нам не нужно оборачивать в контейнер наше меню.

"depth"=>"1" – выводим только 1 уровень меню

"echo"=>"1" – шаблон меню выводим сразу. Если указать 0, то можно получить меню в переменную.

2) Открываем файл functions.php вашего шаблона и регистрируем там наше меню, но для начала стоить проверить, вдруг функция register_nav_menus уже используется. Для этого воспользуйтесь поиском Ctrl+F. Если такой функции все же нет, добавляем такой код:

"Меню верх")); ?>

Как вы поняли "menu1" это название идентификатора, если его переименовать тут, то нужно будет переименовать в предыдущей функции.

WordPress добавить меню в админке

3) Заходим в админку сайта, теперь нам нужно создать и добавить меню в wordpress. Заходить нужно по этому адресу ваш_сайт/wp-admin/nav-menus.php

И создаем новое меню. Я назвал его "Top", нажимаем создать как у меня на скине:


Теперь у вас появляется окно, в котором можно добавлять пункты меню. Смотрим скин ниже, я добавил парочку страниц, а также выбрал чекбокс напротив "Меню верх", а это как мы помним и есть наше "menu1".

4) Сохраняем меню и смотрим результат. Если вы все сделали правильно, у вас должно быть полностью рабочее горизонтальное меню wordpress.

Проблемы с wordpress меню

В версии вордпресс 4.4 начались жуткие проблемы с меню, а именно:

  • между пунктами меню пропали пробелы;
  • меню не растягивается на всю ширину блока;
  • неправильно добавляются разделители.

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

Сейчас я покажу вам код, который решает эту проблему:

Его нужно записать в самый конец файла functions.php вашей темы. С помощью этого не хитрого кода, можно вернуть правильную работу меню.

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

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