Чтобы полностью раскрыть потенциал меню на 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:
- Если тема поддерживает WordPress 3 Menu System, то верхнее menu можно создать через раздел «Внешний вид» — «Меню», в противном случае оно формируется автоматически из публикуемых страниц.
- Создать меню, содержащее активные рубрики блога, можно с помощью виджета «Рубрики».
- Меню с ссылками на страницы блога выводится с помощью виджета «Страницы». Лично я никогда этим виджетом не пользовался, потому что на блоге страницы WP используются для вывода технической информации (о себе, карта сайта, обратная связь и так далее). Лучшее место для них — в шапке блога в горизонтальном виде. Так уж принято.
- Произвольное меню создается в разделе «Внешний вид» — «Меню», для вывода на блог используется одноименный виджет.
- Использовать дополнительными плагины 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 добавить меню. Казалось бы не сложная задача, но хороших 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 добавить горизонтальное меню, а также привел код для создания шаблона меню вордпресс.
Советую прочесть статью , а также буду благодарный за клик на кнопку поделится