16 плагинов для создания меню в wordpress

WP Mobile Menu Free WordPress Plugin

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

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

WP Mobile Menu – The Mobile-Friendly Responsive Menu

Developer:
Freshlight Lab

Price:
Free

JC пошаговое оформление корзины для WooCommerce

Плагин JC WooCommerce Multistep Checkout разработан для улучшения процесса оплаты и замены стандартного макета оплаты товаров в WooCommerce. Цель этого плагина — четкое отображение каждого шага процесса оплаты так, что пользователи точно знают на каком они шаге и как далеко они прошли в этом процессе.

Примечательные функции:

  • простая настройка какой шаг отображать
  • возможность добавить дополнительный шаг, как например, авторизация пользователя
  • функции настройки текста, стиля и макета
  • и другое

JC WooCommerce Multistep Checkout это хороший выбор для более ясного отображения процесса оплаты товаров в WooCommerce.

Что такое липкое меню?

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

Вот пример липкого меню на главной странице блога HubSpot.

Зачем внедрять липкое меню?

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

Липкие меню – простое решение этой надоедливой (и отнимающей много времени) проблемы. Благодаря фиксированной панели навигации посетители могут быстро найти на вашем сайте то, что им нужно. Это повышает удобство работы с сайтом и побуждает посетителей потреблять больше контента, что приводит к снижению показателей отказов. 

Зачем нужна пользовательская панель управления в WordPress?

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

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

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

Я расскажу о нескольких вариантах, а вы уже сами решите что вам ближе в зависимости от требований клиента.

Добавление меню на ваш сайт

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

  1. Прокрутите вниз окно редактора меню.
  2. В разделе Область отображения установите флажок для того места, где вы хотите разместить свое меню.
  3. Нажмите на кнопку Сохранить меню чтобы сохранить изменения.

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

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

У каждого пункта меню есть стрелка конфигурации справа от заголовка пункта меню, при нажатии на которую открывается окно конфигурации. Кликните на стрелку второй раз, чтобы закрыть окно конфигурации. Если вы не видите «Цель ссылки», «Классы CSS», «Отношение к ссылке (XFN))» и «Описание», то в разделе убедитесь, что эти флажки установлены, чтобы их можно было здесь увидеть.

Затем выбор конфигурации:

Текст ссылки

Текст для этого конкретного пункта меню

Атрибут заголовка

Атрибут, используемый при отображении метки

Открывать в новой вкладке

Отметте флажком, если вы хотите, что бы страница открывалась в новом окне.

Классы CSS (необязательно)

Классы CSS для этого пункта меню

Отношение к ссылке (XFN)

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

Описание

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

Удалить

Удалить этот пункт из меню.

Отмена

Отмените настройку пункта меню

Создание многоуровневых меню

При планировании структуры вашего меню полезно думать о каждом пункте меню как о заголовке в формальном отчетном документе. В формальном отчете заголовки основных разделов (заголовки уровня 1) расположены ближе всего к левому краю страницы; заголовки подразделов (заголовки уровня 2) смещены немного дальше вправо; любые другие подчиненные заголовки (уровень 3, 4 и т. д.) в том же разделе имеют еще больший отступ вправо.

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

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

  1. Наведите указатель мыши на «дочерний» пункт меню.
  2. Удерживая левую кнопку мыши, перетащите ее вправо.
  3. Отпустите кнопку мыши.
  4. Повторите эти шаги для каждого пункта подменю.
  5. Нажмите на кнопку Сохранить меню чтобы сохранить изменения.

Как сделать кнопку в странице/записи WordPress

Создание кнопки в WordPress происходит легко и быстро. И, как говорилось выше, для этого не понадобится установка каких-либо плагинов, а соответственно, не нужна будет и дополнительная настройка. Всё делается в стандартном редакторе записей и страниц (Guttenberg) в WordPress.

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

Найдите и выберите блок “Кнопки”. Найти его можно с помощью запроса в форме поиска.

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

Чтобы вызвать меню кнопки, нужно кликнуть на неё в редакторе. Нажмите на иконку в виде звена цепи в меню кнопки и задайте URL, на который эта кнопка должна переводить при клике. Также URL можно задать и в правой колонке редактора в поле “Link”. Кроме того, вам доступна опция открытия этого URL в новой вкладке.

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

На данный момент в редакторе WordPress, к сожалению, нет возможности сориентировать эту кнопку по левому, правому краю или по центру, используя только встроенные инструменты. Она располагается по левому краю. Также не имеется возможности добавить кнопку в сайдбар или другую область виджетов.

Fading Menu Plugin

Fading Menu Plugin

Основная часть представленных здесь плагинов — бесплатные. Конечно, есть в этом списке и исключения — Fading Menu Plugin. Не стоит торопиться. Разработка полностью оправдывает свои расходы. Оказывается, этот плагин отличительно зарекомендовал себя у пользователей. Отказов становится меньше, а значит поисковики будут проявлять к сайту интерес.

Вся настройка плагина Fading Menu Plugin сводится к простым действиям. Содержание и вывод меню настраивается через панель WP. При настройке Вы сможете выбрать: виджет снизу или сверху. Предпочтительный вариант — сверху

Классический вариант лучше привлекает внимание пользователей. Не перестарайтесь с перенасыщенностью цветами

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

Добавление кнопки без плагина, через CSS/HTML код

Простая HTML кнопка

Старый как веб-мир способ — прописать в коде тег button:

<button >Seodelux.ru</button>

Кнопку можно выровнять и прописать ей урл, будет выглядеть так:

Редактор блоков

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

Жмем на плюсик слева вверху. Выбираем блок «кнопка».

Настраиваем стиль кнопки и цвет текста.

Можно также настроить:

  • цвет фона (сплошной и градиентный)
  • выбрать произвольный цвет (не из набора)
  • закругление углов — от квадратной до круглой кнопки
  • открытие в этой вкладке или в новой
  • атрибуты rel, например nofollow

Всё. Очень просто, без дополнительных плагинов, настройки html кодов и правки файлов сайта. Водпресс- это сила, надо просто полностью использовать его функционал.

JQuery Vertical Mega Menu Widget

Несмотря на добавленное в название слово «Mega», ничего сверхъестественного тут нет. Однако, добавить вертикальное меню с расширенным функционалом — возможно. Главное достоинство этого меню виджет wordpress — бесплатная лицензия на использование. Это означает, что без каких либо дополнительных расходов, Вы получаете качественное меню для сайта.

С помощью JQuery Vertical Mega Menu Widget можно делать всплывающие меню, добавлять виджеты. Присутствуют настройки анимации, вывода и категорий. В результате получится нечто схожее с accordion. Редактируйте классы и стили CSS. Не забываем про активацию плагина через «Внешний вид» и перемещаем его в нужную область сайта.

Список доступных параметров для функции wp_nav_menu( )

Параметр Описание
menu название меню. Может содержать: id, slug или имя.

<?php
  wp_nav_menu(array(‘menu’ => ‘primary-menu’));
?>

1
2
3

<?php
 wp_nav_menu(array(‘menu’=>’primary-menu’));

?>

menu_class имя CSS класса, который будет назначен элементу оборачивающему меню (ul).
По умолчанию — ‘menu’.

<?php
  wp_nav_menu(array(‘menu_class’ => ‘menu-top’));
?>

1
2
3

<?php
 wp_nav_menu(array(‘menu_class’=>’menu-top’));

?>

menu_id имя идентификатора, который будет назначен элементу оборачивающему меню (ul). 

<?php
  wp_nav_menu(array(‘menu_id’ => ‘menu-top’));
?>

1
2
3

<?php
 wp_nav_menu(array(‘menu_id’=>’menu-top’));

?>

container название контейнера, в который будет обернуто меню.
По умолчанию — ‘div’.

<?php
  wp_nav_menu(array(‘container’ => ‘nav’));
?>

1
2
3

<?php
 wp_nav_menu(array(‘container’=>’nav’));

?>

container_class имя CSS класса для контейнера меню.
По умолчанию — ‘menu-{menu slug}-container’.

<?php
  wp_nav_menu(array(‘container_class’ => ‘nav-menu-top’));
?>

1
2
3

<?php
 wp_nav_menu(array(‘container_class’=>’nav-menu-top’));

?>

container_id имя идентификатора для контейнера меню.

<?php
  wp_nav_menu(array(‘container_id’ => ‘nav-menu-top’));
?>

1
2
3

<?php
 wp_nav_menu(array(‘container_id’=>’nav-menu-top’));

?>

fallback_cb если меню не существует будет вызвана обратная функция (callback). Если ее вызов не нужен, установите значение — ‘false’.
По умолчанию — ‘wp_page_menu’.

<?php
  wp_nav_menu(array(‘fallback_cb’ => ‘__return_empty_string’));
  //функция __return_empty_string() возвращает пустую строку,
  //поэтому в данном случае, если меню нет, то ничего выводится не будет.
?>

1
2
3
4
5

<?php

 wp_nav_menu(array(‘fallback_cb’=>’__return_empty_string’));

 //функция __return_empty_string() возвращает пустую строку,

 //поэтому в данном случае, если меню нет, то ничего выводится не будет.

?>

before текст, отображающийся перед ссылкой (перед тегом <a>).

<?php
  wp_nav_menu(array(‘before’ => ‘|’));
?>

1
2
3

<?php
 wp_nav_menu(array(‘before’=>’|’));

?>

after текст, отображающийся после ссылки (после тега <a>).

<?php
  wp_nav_menu(array(‘before’ => ‘|’));
?>

1
2
3

<?php
 wp_nav_menu(array(‘before’=>’|’));

?>

link_before текст, отображающийся перед значением ссылки (внутри тега <a>).

<?php
  wp_nav_menu(array(‘link_before’ => ‘[‘));
?>

1
2
3

<?php
 wp_nav_menu(array(‘link_before’=>'[‘));

?>

link_after текст, отображающийся после значения ссылки (внутри тега <a>).

<?php
  wp_nav_menu(array(‘link_after’ => ‘]’));
?>

1
2
3

<?php
 wp_nav_menu(array(‘link_after’=>’]’));

?>

echo отвечает за вывод меню. Значение ‘true’ — вывести меню, значение ‘false’ — не выводить меню.
По умолчанию — ‘true’.

<?php
  wp_nav_menu(array(‘echo’ => ‘false’));
?>

1
2
3

<?php
 wp_nav_menu(array(‘echo’=>’false’));

?>

depth вывод определенного количества вложенных уровней меню. Значение 0 — вывод всех уровней.
По умолчанию — 0.

<?php
  wp_nav_menu(array(‘depth’ => 1)); //будет выводится только первый уровень вложенного меню
?>

1
2
3

<?php
 wp_nav_menu(array(‘depth’=>1));//будет выводится только первый уровень вложенного меню

?>

walker указывает объект, в котором описано построение меню.
По умолчанию — Walker_Nav_Menu.

<?php
  wp_nav_menu(array(‘walker’ => new my_custom_walker));
  //наш собственный объект описывающий построение меню
?>

1
2
3
4

<?php
 wp_nav_menu(array(‘walker’=>newmy_custom_walker));

 //наш собственный объект описывающий построение меню

?>

theme_location выбор места, где нужно вывести меню.  Значение должно быть зарегистрировано в функции register_nav_menu()

<?php
  wp_nav_menu(array(‘theme_location’ => ‘primary_menu’));
?>

1
2
3

<?php
 wp_nav_menu(array(‘theme_location’=>’primary_menu’));

?>

items_wrap описывает способ обертки пунктов списка.
По умолчанию — ‘<ul id=»%1$s» class=»%2$s»>%3$s</ul>’. 

<?php
  wp_nav_menu(array(‘items_wrap’ => ‘%3$s’)); //будет удалена обёртка <ul>
?>

1
2
3

<?php
 wp_nav_menu(array(‘items_wrap’=>’%3$s’));//будет удалена обёртка <ul>

?>

Структура меню

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

После наполнения меню, можно сразу заполнить «Настройки меню». Там два пункта:

1- Автоматически добавлять страницы. Если нужно, чтобы вновь создаваемые страницы добавлялись в меню, выделите «чек» этого пункта.

2 — Область отображения. Здесь вы можете сразу положить меню в нужную область меню вашего шаблона. Например, верхнее меню.

Аналогичную настройку, выбор области, вы можете сделать после сохранения созданного меню на вкладке  «Управление областями».

UberMenu – WordPress Mega Menu Premium WordPress Plugin

Mega Menu — сенсация на рынке меню WordPress, а UberMenu — горячий пирог. С более чем 75 тысячами продаж вы не ошибетесь в выборе UberMenu, трендовым плагином мега-меню, который на несколько ступеней выше обычного плагина меню.

Это плагин мега-меню номер один в Codecanyon, который поставляется с гибкими макетами, адаптивным дизайном, расширенным контентом (вы можете добавлять карты и многое другое в меню), улучшенным пользовательским интерфейсом и динамической генерацией элементов.

Он поставляется с мощным настройщиком, который поддерживает более 50 комбинаций стилей, подменю с вкладками и несколько меню с отличными переходами. Все эти (и другие) функции втиснуты в красивый плагин, который легко установить, изучить и использовать.

О меню и его значении

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

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

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

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

Добавление справочного ресурса в клиентскую панель управления

По мере выполнения заказов вы все чаще будете замечать, что клиенты задают схожие вопросы, у них возникают одинаковые трудности/недопонимания. Поэтому имеет смысл в пользовательскую панель администрирования добавить справочный раздел или раздел ЧаВо. Таким образом, вы предоставите своим клиентам должную поддержку и при этом сэкономите время, не отвечая персонально на одни и те же вопросы.

Лучше всего справочный раздел добавить с помощью плагина WP Help. После его активирования в админ баре WordPress появится новый раздел «Publishing Help». Щелкните по названию, и вы перейдете на страницу настроек.

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

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

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

Mega Main Menu Premium WordPress Menu Plugin

Вы ищете идеальное многофункциональное адаптивное меню WordPress для вашего сайта?

Тогда вам подойдет — Mega Main Menu, плагин WordPress для меню, который поддерживает неограниченное количество цветов + значки, функциональность, 10+ выпадающих списков, 600+ шрифтов Google, 1600+ векторных иконок, виджеты, шорткоды и потрясающую поддержку других функций.

Mega Main Menu — отличное решение, если вы не хотите кодировать свое собственное меню. Плагин позволяет легко добавлять разное содержание в выпадающие списки мега-меню. Некоторые примеры включают в себя акции, рекламные объявления, несколько столбцов, миниатюры последних сообщений, сетки значков и даже виджеты.

Также Mega Main Menu включает встроенные опции стилей, так что вы можете изменить цвет, выравнивать вертикальную / горизонтальную ориентацию и даже добавить логотип без необходимости кодировать его самостоятельно. Просто настройте и нажмите «Сохранить»!

Mega Main Menu также совместимо с WPML, BuddyPress, WooCommerce, Bootstrap, текущей версией WordPress и основными браузерами. Используйте предварительный просмотр в реальном времени, чтобы увидеть, какие комбинации вы можете придумать для главного меню Mega.

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

Меню навигации WordPress — Mega Main Menu

Mega Main Menu позволяет быстро создавать современное меню навигации для сайтов на WordPress и имеет следующие, ключевые особенности:

  • «Липкое» меню, добавление значков, выпадающие меню, логотип и поиск которые могут присутствовать в одном меню.
  • Неограниченные вариации цвета. Вы можете легко изменить цвет любого элемента меню. Используйте «плоские» цвета, градиенты и фоновые текстуры или изображения.
  • Более 10 различных комбинаций контента. Вы можете поместить любое содержимое, в выпадающем меню — ссылки, текст, изображения, виджеты и шорткоды.
  • Используйте 1600+ иконок в меню вашего сайта. Векторные иконки имеют четкую графику, которая будет отлично смотреться на любом устройстве, с любым разрешением.
  • 600+ Google шрифтов. Вы можете выбрать из более чем 600 google шрифтов для вашего меню. Шрифт легко меняется их настроек плагина.

Установка плагина стандартная и никаких проблем вызвать не должна. После активации плагина переходим в Внешний вид — Mega Main Menu

Страница настроек плагина имеет четыре основные закладки, на каждой из которых расположены раскрывающиеся собственно с самими настройками:

General имеет три подраздела – primary, mobile_menu и secondary. В разделе primary можно указать все основные значения меню, такие как высота, выравнивание иконок относительно текста, настройка сепаратора, визуального скругления углов меню, включить прилипаемость меню наверху экрана, настроить показ логотипа и прочее. Для mobile_menu и secondary все эти настройки дублируются отдельно. Стоит отметить так же возможность переключения меню из привычного горизонтального вида в вертикальное.

Skins позволяет полностью настроить «шкурку» вашего меню. Как и в предыдущей закладке есть три подраздела — primary, mobile_menu и secondary. Кроме многочисленных настроек цветов отдельно можно настроить шрифты и логотип в меню.

Specific Options для продвинутых пользователей. Можно вставить свой код для корректировки CSS и управлять настройками адаптивности меню.

Support&Suggestions поможет выйти на связь с автором плагина и получить поддержку.

Добавляем остальные пункты в меню

Теперь по аналогии создаём остальные пункты меню первого уровня. В результате мы получим примерно такую картинку:

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

Пока неплохо выглядит, я думаю можно продолжить дальше

Кстати, если вы не видите созданное только что меню, тогда вам следует обратить внимание на раздел «Области темы» в интерфейсе управления меню и выбрать там нужную вам опцию. У меня это выглядит так:

Возвращаемся в интерфейс управления меню и теперь уже по аналогии добавим все меню второго уровня, которые будут у нас в виде выпадающего меню для пункта «Услуги». Всё точно так же, ничего нового я тут не покажу.

Результат должен получиться следующий:

Вы, скорее всего, удивитесь, почему же пункты меню не оказались под пунктом «Услуги». Возможно команда разработчиков WordPress и сделала бы создание дочерних пунктов путём добавления дополнительной опции, как, например, с рубриками, но они сделали это удобнее, взгляните:

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

По аналогии сделаем и другие пункты:

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

Superfly Responsive Premium WordPress Menu Plugin

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

Superfly позволяет вам привязать статическое главное меню к левой или правой части экрана, или вы можете использовать скрытый слайд в меню, которое отображается, когда посетитель наводит / щелкает область меню. Вертикальные меню идеально подходят для мобильных посетителей, выглядит красиво и оснащены множеством анимаций и эффектов.

Меню полностью настраиваемо, имеет неограниченный выбор цветов, множество значков, возможность выбора шрифта и его размера. Если вы хотите добавить кнопки социальных сетей в меню, Superfly поддерживает Twitter, Facebook и Google+.

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

Как сделать выпадающее меню на Вордпресс?

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

Далее выберем любое произвольное меню, которое мы хотим сделать выпадающим, и нажмем на кнопку «Выбрать».

После этого перед нами откроется выбранное нами меню (см. картинку ниже).

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

Все после этого, все изменения сохраняться и наше меню преобразится.

Заключение

Mega Main Menu показался мне отличным wordpress меню плагином способным моментально преобразить вашу бесплатную или тем более премиум тему, особенно если она изначально имела скучный, стандартный вид. Ну и конечно, при желании, вы легко можете настроить своё меню таким образом, что пользователи будут просто поражены обилием иконок, картинок и прочих необычных для навигации элементов.

Еще один приятный момент заключается в том, что плагин оказался необычайно легким для своего функционала. По результатам проверки тестового сайта плагином P3, Mega Main Menu оказал ничтожное влияние на сайт среди двух десятков прочих установленных плагинов.

Посмотреть удобное демо и приобрести этот функциональный плагин всего за 14 «вечнозеленых», вы можете на его официальной странице.

Более подробно про регистрацию и вывод меню в шаблоне

Использование

<?php wp_nav_menu( $args ); ?>
wp_nav_menu( array(
  'theme_location'  => ''               // (string) Расположение меню в шаблоне. (указывается ключ которым было зарегистрировано меню в функции 
  'menu'            => '',              // (string) Название выводимого меню (указывается в админке при создании меню, приоритетнее чем указанное местоположение theme_location - если указано, то параметр theme_location игнорируется)
  'container'       => 'div',           // (string) Контейнер меню. Обворачиватель ul. Указывается тег контейнера (по умолчанию в тег div)
  'container_class' => '',              // (string) class контейнера (div тега)
  'container_id'    => '',              // (string) id контейнера (div тега)
  'menu_class'      => 'menu',          // (string) class самого меню (ul тега)
  'menu_id'         => '',              // (string) id самого меню (ul тега)
  'echo'            => true,            // (boolean) Выводить на экран или возвращать для обработки
  'fallback_cb'     => 'wp_page_menu',  // (string) Используемая (резервная) функция, если меню не существует (не удалось получить)
  'before'          => '',              // (string) Текст перед <a> каждой ссылки
  'after'           => '',              // (string) Текст после </a> каждой ссылки
  'link_before'     => '',              // (string) Текст перед анкором (текстом) ссылки
  'link_after'      => '',              // (string) Текст после анкора (текста) ссылки
  'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
  'depth'           => 0,               // (integer) Глубина вложенности (0 - неограничена, 2 - двухуровневое меню)
  'walker'          => ''              // (object) Класс собирающий меню. Default: new Walker_Nav_Menu
) );

Аргументы параметра $args

theme_location(строка) Идентификатор расположение меню в шаблоне. Идентификатор, указывается при регистрации меню функцией register_nav_menu().По умолчанию:

menu(строка) Меню которое нужно вывести. Соответствие: id, слаг или название меню.По умолчанию:

container(строка) Чем оборачивать ul тег. Допустимо: div или nav. Если не нужно оборачивать ничем, то пишем false: container => false.По умолчанию:

container_class(строка) Значение атрибута class у контейнера меню.По умолчанию:

container_id(строка) Значение атрибута id у контейнера меню.По умолчанию:

menu_class(строка) Значение атрибута class у тега ul.По умолчанию:

menu_id(строка) Значение атрибута id у тега ul.По умолчанию:

echo(логическое) Выводить на экран (true) или возвратить для обработки (false).По умолчанию:

fallback_cb(строка) Функция для обработки вывода, если никакое меню не найдено. Передает все аргументы $args указанной тут функции. Установите пустую строку ” или ‘__return_empty_string’, чтобы ничего не выводилось, если меню нет.По умолчанию:

before(строка) Текст перед тегом <a> в меню.По умолчанию:

after(строка) Текст после каждого тега в меню.По умолчанию:

link_before(строка) Текст перед анкором каждой ссылки в меню.По умолчанию:

link_after(строка) Текст после анкора каждой ссылки в меню.По умолчанию:

items_wrap(строка) Нужно ли оборачивать элементы в тег ul. Если нужно, указывается шаблон обертки.По умолчанию:

depth(число)Сколько уровень вложенных друг в друга ссылок показывать. 0 – все уровни.

walker(объект) Класса, который будет использоваться для построения меню. Нужно указывать объект, а не строку, например new My_Menu_Walker(). По умолчанию: Walker_Nav_Menu(). Как использовать смотрите ниже…По умолчанию:

item_spacing(строка) Оставлять или нет переносы строк в HTML коде меню. Может быть: preserve или discardПо умолчанию:

Пример

Выводить меню, только если оно существует

По умолчанию, если меню нет, то вместо него будут выведены страницы сайта. Но если нужно выводить меню, только в том случае когда оно создано в админ-панели, укажите параметр как :

wp_nav_menu( array(
  'theme_location' => 'primary-menu',
  'fallback_cb' => '__return_empty_string'
) );

Больше информации и примеров:

  • https://wp-kama.ru/function/wp_nav_menu
  • https://wp-kama.ru/id_140/polzovatelskoe-menyu-v-wp-30-wp_nav_menu.html

Подводим итоги

СðýôðÃÂÃÂýþõ üõýàýð WordPress ôðòýþ ýøúÃÂþ ýõ øÃÂÿþûÃÂ÷ÃÂõÃÂ. àÃÂþüàöõ, ÿþÃÂòøûðÃÂàòþ÷üþöýþÃÂÃÂàÃÂôõûðÃÂàõóþ ýõþñÃÂÃÂýÃÂü, ÃÂøÃÂðñõûÃÂýÃÂü, øýÃÂõÃÂõÃÂýÃÂü, ÿÃÂþÃÂÃÂþ ÃÂÃÂÃÂðýþòøò ýÃÂöýÃÂù ÿûðóøý. ÃÂðúþõ ñàôþÿþûýõýøõ òàýõ øÃÂÿþûÃÂ÷þòðûø, úðúþù ñàòðÃÂøðýàòøôöõÃÂð ýõ òÃÂñÃÂðûø, ÿþüýøÃÂõ þ ÃÂðüþü óûðòýþü. ÃÂý ôþûöõý ÃÂþÃÂõÃÂðÃÂÃÂÃÂààôÃÂÃÂóøüø ÃÂûõüõýÃÂðüø òðÃÂõóþ ÃÂõÃÂÃÂÃÂÃÂð. âþóôð ñÃÂôõàÃÂÃÂÿõàø ÃÂõ÷ÃÂûÃÂÃÂðÃÂ.

ÃÂòðÃÂðàâ ûøÃÂþ ûÃÂñþóþ ñûþóóõÃÂð ôð ø ÿÃÂþÃÂÃÂþ òûðôõûÃÂÃÂð ðúúðÃÂýÃÂð ýð ÃÂþÃÂÃÂüõ ø ÿþûÃÂ÷þòðÃÂõûàÃÂúþýÃÂðúÃÂõ. ÃÂÃÂø ÃÂÃÂþü ÿþÃÂÃÂðòøÃÂàðòðÃÂðàòàWordPressàýõ ÃÂðú ÿÃÂþÃÂÃÂþ…

Рейтинг
( Пока оценок нет )
Editor
Editor/ автор статьи

Давно интересуюсь темой. Мне нравится писать о том, в чём разбираюсь.

Понравилась статья? Поделиться с друзьями:
Люкс-хост
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: