Вывод меню wordpress

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

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

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

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

Включение поддержки произвольных меню в WordPress

Первым делом нам нужно зарегистрировать использование произвольных меню и самих меню. Для этого открываем на редактирование файл function.php вашей темы оформления и добавляем следующий код.

Где «top» — идентификатор меню, а «Верхнее меню» — название месторасположения.

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

После добавления данного кода поддержка произвольных меню будет включена автоматически. Убедиться в этом вы можете, перейдя в Административную панель – Внешний вид – Меню. Но самой регистрации меню недостаточно. Меню нужно еще вывести в шаблоне. Для этого мы воспользуемся специальной функцией wp_nav_menu.

Вывод произвольного меню. Функция wp_nav_menu

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

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

Передача параметров через массив

Передача параметров через строку

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

На этом я заканчиваю данную статью. Основные моменты мы рассмотрели и в 99% случаев данной информации вам будет достаточно для самостоятельного создания произвольных меню в WordPress. Если же у вас возникнут какие-то вопросы, вы всегда сможете задать их в комментариях.

На этом все. Удачи вам и успехов в создании сайтов на WordPress.

marti.org.ua

Как создать второе меню в 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

Сохраняйте изменения, и проверяйте. В хедере у вас должно остаться базовое меню, а в футере – меню, созданное вами.

Мы успешно создали и вывели второе меню в WordPress.

Задавайте свои вопросы и обращайтесь за WordPress помощью.

До новых встреч!

wordpress-life.ru

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

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

 <?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.
По умолчанию: div

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

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

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

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

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

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

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

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

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

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

items_wrap(строка)
Нужно ли оборачивать элементы в тег ul. Если нужно, указывается шаблон обертки.
По умолчанию: '<ul id="%1$s" class="%2$s">%3$s</ul>'

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

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

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

Пример

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

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

как '__return_empty_string':

 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

denis-creative.com

Вывод меню средствами WordPress

В освободившийся контейнер <nav></nav> будем выводить меню, настроенное в админке WordPress. Для достижения поставленной задачи необходимо выполнить следующие три пункта инструкций.

1. Зарегистрировать меню в файле functions.php нашей темы.

Для этого в functions.php мы опишем новую функцию, назовем ее, например, register_my_menus. Данная функция будет запускать стандартный метод register_nav_menus(), описанный в ядре WordPress 3 и выше, регистрирующий позиции меню.

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

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

Листинг 1. Регистрация двух меню. Файл function.php активной темы WordPress

  function register_my_menus()  {  register_nav_menus  (  array( 'header-menu' => 'header-menu1', 'footer-menu' => 'footer-menu1')  );  }

В строке 5 листинга 1 мы как раз передаем массив аргументов стандартной функции WordPress register_nav_menus(). В качеств первого аргумента мы регистрируем меню под шапкой блога: ‘header-menu’ => ‘header-menu1’. Зарегистрированная позиция в шаблоне будет носить название header-menu, а в админке WordPress будет представлена как header-menu1. Не пугайтесь, ниже я подробно поясню, что имеется ввиду.

Аналогичным образом второй аргумент ‘footer-menu’ => ‘footer-menu1’ регистрирует позицию для меню над подвалом.

Новая функция register_my_menus(), которую мы создали в листинге 1, должна как-то запускаться. Для этого используем хук init.

Мы уже обсуждали работу с хуками в видокурсе «Разработка плагина для WordPress». Вкратце, хук — это событие генерируемое движком в тот или иной момент. Например, при отображении страницы блога, до отправки заголовков, возникает тот самый хук init, который мы будем использовать. В WordPress сущесвует множество других хуков (хуки возникают при формировании HEAD-части страницы, при отображении меню админки и т.д.) и на каждый из них можно прицепить выполнение той или ной функции. Для запуска функции при возникновении хука используется метод add_action().

В файле functions.php нашей темы мы уже применяли метод add_action для отключения лишнего содержимого раздела HEAD в WordPress. Можно прямо под существующей инструкцией add_action(‘init’, ‘remheadlink’); указать еще одну (см. листинг 2).

Листинг 2. Запуск функции register_my_menus хуком init. Файл functions.php

  if (function_exists('register_nav_menus'))  {  	add_action( 'init', 'register_my_menus' );  }

Как видно из листинга 2, мы применяем условный оператор «if» для проверки, можно ли в данной версии WordPress использовать функцию регистрации меню — register_nav_menus(). Ведь движок WordPress может быть старым и не поддерживать работу с меню. Метод function_exists() вернет TRUE, если register_nav_menus() знаком данной версии WordPress.

Если WordPress умеет работать с функцией register_nav_menus, выполнится метод add_action( ‘init’, ‘register_my_menus’ ), который, при возникновении хука init запустит функцию register_my_menus (описанную в листинге 1).

2. Необходимо указать место для отображения зарегистрированных типов меню в файлах верстки нашей темы.

В нашем случае зарегистрировано два меню: header-menu и footer-menu. Откроем на редактирование файл index.php нашей темы и укажем позиции для вывода наших меню.

Как мы и договаривались, header-menu будет выводиться под шапкой в блоке <nav></nav>. Для этого используем код листинга 3.

Листинг 3. Указываем место для вывода меню header-menu. Файл index.php активной темы

  <nav>  	<?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>  </nav>

Ну и где-нибудь над подвалом аналогичным образом укажем место отображения footer-menu (см. листинг 4).

Листинг 4. Указываем место для вывода меню footer-menu. Файл index.php активной темы

  <nav>  	<?php wp_nav_menu( array( 'theme_location' => 'footer-menu' ) ); ?>  </nav>

3. Настройка меню в админке WordPress.

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

Рис. 1. Раздел по работе с меню WordPress админки блога.

Наша тема поддерживает два меню (header-menu и footer-menu). Поэтому в соответствующем интерфейсе раздела «Меню» создадим два меню. Одно назовем header-menu-2, второе — footer-menu-2.

Рис. 2. Создание меню WordPress.

Созданные меню можно закреплять за позициями, которые носят название header-menu1 и footer-menu1. Именно такие названия для позиций мы регистрировали в листинге 1.

Рис. 3. Закрепление за позициями соответствующих меню WordPress.

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

Рис. 4. Функционал по добавлению пунктов в меню.

Я добавил в каждое меню по три пункта. При этом, пункты можно смещать (вверх и вниз, влево и вправо). При смещении влево и вправо происходит создание вложенных меню (см. рис. 5 и 6).

Рис. 5. В меню header-menu-2 я создал три пункта. При этом смещением вправо я реализовал следующую последовательность вложений: Мой блог → Еще одна ссылка → Третья ссылка.

Рис. 6. Меню footer-menu-2 с вложенностью следующего вида: Ссылка 1 → Ссылка 2, Ссылка 3.

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

Рис. 7. Отображение двух меню на страницах блога.

Рассмотрим HTML-структуру меню header-menu-2.

Листинг 5. HTML-структура меню header-menu-2, сгенерированная WordPress автоматически

  <nav>   <div class="menu-header-menu-2-container">   <ul id="menu-header-menu-2" class="menu">   <li id="menu-item-10" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10"><a href="http://www.sdelaysite.com">Мой блог</a>   <ul class="sub-menu">   <li id="menu-item-11" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-11"><a href="http://www.sdelaysite.com">Еще одна ссылка</a>   	<ul class="sub-menu">   		<li id="menu-item-12" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-12"><a href="http://www.sdelaysite.com">Третья ссылка</a></li>   	</ul>   </li>   </ul>   </li>   </ul>   </div>  </nav>

Как видно из листинга 5, WordPress неплохо справляется с задачей формирования HTML-кода меню.

Все меню охватываются тегами <ul></ul>, причем заданное название меню участвует в формировании атрибута id (id=»menu-header-menu-2«), поэтому название меню в админке блога должно быть набрано латиницей (см. рис. 2).

Вложенные пункты меню охватываются дополнительными тегами <ul></ul>. На этом факте можно отлично сыграть, при верстке выпадающего меню в WordPress.

www.sdelaysite.com

Способ 1. Включение поддержки меню в теме WordPress

Для активации функционала меню вы можете использовать функцию add_theme_support(). Всё просто и легко, вставляем этот код в functions.php текущей темы и да, после этого мы можем зайти в админку и начать создавать меню.

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

Способ 2. Регистрация областей темы

В двух словах, область темы — это такая условная область, которая предназначена для вывода меню. Условная, потому что сама по себе она нигде не выводится. Как всё это происходит по порядку:

Сначала мы регистрируем область темы. После этого у нас сразу появляется функционал меню тут: Внешний вид > Меню. Допустим мы создадим две области темы: «Шапка сайта» и «Левый сайдбар».
Затем, при создании меню мы указываем область темы, в которой хотим отображать данное меню. Также можно указать несколько областей сразу.
И завершающий шаг. В разных частях темы выводим меню, соответствующие разным областям.

Не знаю, насколько понятно я всё это объяснил в теории, но на практике определенно будет легко. Итак, для того, чтобы зарегистрировать область темы, нам понадобится функция register_nav_menus(). Давайте тогда создадим две области, о которых я писал выше: «Шапка сайта» и «Левый сайдбар».

Да, код — в functions.php.

Создание меню

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

Переходим во Внешний вид > Меню, указываем в поле название нового меню и нажимаем кнопку Создать меню.

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

Теперь, используя колонку со списком страниц и рубрик, давайте заполним меню.

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

Всё получилось? Тогда нажимаем кнопку Сохранить меню.

Вы можете удалить или отредактировать (переместить, переименовать) элемент, нажав на стрелку справа (на скриншоте отмечена красным).

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

CSS-классы для отдельных элементов меню, открытие некоторых ссылок в новой вкладке

Как?

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

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

Например, мне в данный момент требуется добавить несколько CSS-классов элементу меню и сделать, чтобы ссылка открывалась в новой вкладке браузера.

Как добавлять в меню записи, таксономии и произвольные типы постов

На предыдущых скриншотах видно, что по умолчанию в меню можно добавлять только страницы, ссылки и рубрики. А если нам надо добавить запись? Конечно, вы можете добавить её через «ссылки», но тогда, если изменится URL записи, у нас появится ошибка 404.

Решение этой задачи есть и оно очень простое.

Записи и метки

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

Таксономии и типы постов

И у тех и у других принцип один и тот же — при регистрации таксономии (register_taxonomy()) или типа поста (register_post_type()) значение параметра функции show_in_nav_menus должно быть true.

Если после этого элементы таксономии или типы записей так и не появились в меню, в правом верхнем углу страницы откройте вкладку «Настройки экрана» и включите их там.

Вывод меню на сайте

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

Пример 1. Используем для вывода ID / ярлык / название меню

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

В итоге имеем:

Пример 2. Использование зарегистрированных областей темы для вывода меню

На первый взгляд, этот пример может показаться сложнее, потому что сначала нам требуется зарегистрировать область темы (в этом посту мы уже зарегали две области — head_menu (Шапка сайта) и side_menu (Левый сайдбар), затем, при создании меню, нам надо присвоить его одной из этих областей (мы уже создали с вами меню и присвоили его области head_menu) и только после этого мы можем выводить область с содержащимся в ней меню на сайте.

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

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

Функция wp_nav_menu() имеет большое количество параметров, все они описаны в документации этой функции.

Вставляем меню в сайдбар (в виде виджета)

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

Переделываем меню при помощи волкера

Рассмотрение класса Walker безусловно заслуживает отдельного поста. Сейчас я покажу лишь простой пример, который позволит вам использовать этот класс при выводе меню, тем самым подстраивая его под свой сайт, меняя HTML-разметку, добавляя различные атрибуты элементам и PHP-условия.

Для начала нужно создать класс, у меня это True_Walker_Nav_Menu, код которого я вставил в functions.php текущей темы.

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

Если вам нужны ещё параметры объектов $item, смотрите документацию функции wp_get_nav_menu_items(), которая кстати является ещё одним нестандартным способом вывода меню в WordPress.

Окей, класс вставили, второй шаг — добавить параметр walker в функцию wp_nav_menu(). То есть, если у вас уже используется меню на сайте, не нужно менять его код на тот, который указан тут ниже, надо всего лишь добавить туда ещё один параметр.

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

misha.blog

JQuery Vertical Mega Menu Widget

Хоть в названии плагина и числится слово «мега», с ним вы не сможете создать чего-то невозможного. Но простое вертикальное меню с собственными категориями любого плана при помощи модуля добавить на сайт вполне реально. Большой плюс JQuery Vertical Mega Menu Widget в том, что инструмент распространяется бесплатно. А значит без дополнительных затрат хоть сегодня вы сможете создать качественную менюшку для своего сайта.

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

Admin Menus Fixed

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

горизонтальное;
вертикальное широкое;
вертикальный виджет.

Все три варианта с выходом последней версии плагина могут адаптироваться под мобильные устройства. Модуль совместим с WordPress 3.5+ и работает по простому принципу — настройка не займет много времени. Интегрируется в любую тему, так что ковыряться в CSS и коде шаблона не придется.

JQuery Mega Menu Widget

Еще один плагин из разряда Mega. Модуль JQuery Mega Menu Widget работает с использованием JQuery-библиотек — встраивает JavaScript в HTML. Вы сможете создать виджет, при наведении на который произойдет вывод выпадающих категорий.

JQuery Mega Menu Widget содержит множество настроек:

Hover/Click — настройка сценария реагирования меню (что будет после нажатия на определенную категорию);
Определение состава — произвольное количество категорий;
Оболочка — настройка внешнего облика с открытым кодом CSS, который можно настраивать;
Animation Effect — анимация появления категорий (можно выбрать скользящий эффект, либо добавить «исчезание»);
Animation Speed — изменение интенсивности анимационного эффекта;

Также этот Mega плагин позволяет деактивировать анимацию полностью и создать широкоформатное меню, автоматически подстраиваемое под пропорции шаблона. Возможно, это не совсем mega модуль, но скачать его можно бесплатно, и уже через 10-15 минут у вас на сайте появится виджет.

Easy menus

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

горизонтальное меню с картинками и субменю;
вертикальное в двух вариациях с разными иконками;
горизонтальное с иконками;
с круглыми картинками в категориях;
меню в виде png-кнопок;

Чтобы добавить выбранное адаптивное меню, вам предстоит внести шорткод структуру шаблона.

jQuery Dropdown Menu

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

Dropdown Menu Widget

Виджет работает только с CSS. В большей мере подходит для тех, кто разбирается в CSS, и хочет преобразить вывод уже существующего меню. С модулем Dropdown Menu Widget сможете создать ниспадающее произвольное меню с красивым дизайном. В модуле доступна настройка каждого отдельного элемента. Также имеются несколько стандартных тем CSS. Виджет позволяет сделать вертикальное или горизонтальное отображение многоуровневых категорий.

Ozh’ Admin Drop Down Menu

Этот инструмент не сможет добавить пользовательскую менюшку на сайт, но сделает меню для вебмастера. Модуль Ozh’ Admin Drop Down Menu предназначен для тех, кто устал постоянно заходить в панель администрирования WordPress в поисках нужной настройки. Плагин добавит невидимую для посетителей менюшку на страницах, которое можно будет удобно настроить для быстрого доступа к редактированию постов, добавлению медиа, созданию страниц и т. д.

WP Menu Vertical

Это флэш-меню. Разработчики не зря называют его динамическим — вертикальное меню работает с особыми анимационными эффектами. В итоге, сможете сделать адаптивное, стильное и удобное flash-menu. Цвет фона, текста, шрифт и размеры каждого элемента настраиваются в специальном разделе администрирования. Удобство менюшки для пользователя в первую очередь связано с возможностью остановить выбор категории во время скролла на страницах — то есть пользователю не придется постоянно открывать меню, если понадобилось прокрутить сайт.

The official plugin for OpenMenu

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

Custom Taxonomies Menu Widget

Предельно простой плагин. Позволяет быстро создать плавающий виджет и вывести его сбоку экрана. Идеально подходит для блогосферы. Если вы пишите какой-то тематический блог, в котором множество терминов, и хотите обучать начинающих в этой сфере, тогда Custom Taxonomies Menu Widget вас выручит. Сможете сделать классифицированное иерархическое боковое меню с четкой категоризацией и отображением новых разделов. Порядок таксономии настраивается при помощи разных фильтров. Виджет этот бесплатный, и подходит только для обучающих порталов.

JQuery Accordion Menu Widget

Если хотите, чтобы у вас была accordion менюшка на ресурсе, то JQuery Accordion Menu Widget — лучший инструмент, чтобы осуществить эту задумку. Функции плагина JQuery Accordion Menu Widget:

добавление множества уровней менюшки;
произвольное число пунктов в accordion;
настройка перехода в категорию «по клику» либо «при наведении»;
встраивается в шаблон при помощи шорткодов;
возможность вывести один или несколько уровней менюшки accordion одновременно;
плагин JQuery Accordion Menu Widget может использовать куки-файлы пользователей, чтобы сохранять свое открытое/закрытое положение при переходе на страницы;
автоматическое закрытие меню accordion через секунду после удаления курсора с навигационной панели;
есть настройка отображения количества подпунктов в родительском меню;
можно настраивать и активировать классы CSS;
скорость анимации настраивается.

С последним пунктом будьте осторожны — низкая скорость анимации может уменьшить юзабилити инструмента.

Responsive Select Menu

Респектабельное и стильное меню. Удовлетворит потребности любого сайта, и быстро станет его украшением. А самое главное — Responsive Select Menu можно скачать бесплатно. Вывод менюшки можно будет организовать в любом положении: вертикальное, горизонтальное или в качестве виджета. Это полноценное адаптивное menu, в котором можно создать множество уровней разных форматов. Вы сможете добавить в менюшку кликабельные списки с описаниями подкатегорий, и даже встроить Google Maps с формами для регистрации! Стиль CSS полностью настраивается. Это не скучное стандартное меню, а инновационное и необыкновенное дополнение для вашего проекта!

JQuery Slick Menu Widget

Виджет, который размещается в любой части сайта. Вы получите стильное и аккуратное меню, вывод которого удобно настраивается при помощи различных типов анимации. Модуль JQuery Slick Menu Widget удобен тем, что с ним можно сделать адаптивное меню, которое будет следовать за пользователем, и содержание его может быть произвольное (от перечня главных рубрик портала до списка ссылок на группы социальных сетей). Инструмент предполагает настройку разных стилей CSS — в арсенале имеются 12 готовых вариантов дизайна и возможность самостоятельно их изменить. Вывод менюшки также настраивается, как и ее положение (вертикальное, динамичное, статичное и т. д.).

Fading Menu Plugin

Большинство указанных в обзоре плагинов являются бесплатными. Но Fading Menu Plugin — платный инструмент, и он заслуживает того, чтобы за его использование заплатили. С ним вы сможете добавить на сайт произвольное меню, которое будет закреплено сверху страницы. На первый взгляд кажется, что это мелочная функция. Но на деле оказывается, что закрепление менюшки в верхней позиции может значительно уменьшить число «отказов» (одного из параметров пользовательского поведения), а это позитивно повлияет на ваши позиции в поисковике.

Настройка Fading Menu Plugin не отличается особой сложностью — вывод и содержание менюшки сможете настроить в стандартной панели WordPress. В процессе настройки у вас будет выбор: добавить виджет в верхней панели или снизу. Рекомендуется добавлять сверху — в этой части сайта пользователи обычно проявляют большую активность. Не забудьте также настроить стилевые параметры. Важно не сделать плагин ярким и перенасыщенным, а удачно его совместить с текущим шаблоном Вордпресс вашего сайта. Если есть время и возможности, можно добавить собственные иконки для менюшки. И обязательно внесите в разделы модуля категории, в которой периодически будут появляться новые записи — Fading Menu Plugin позволяет отображать новые уведомления в шапке меню.

UberMenu

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

Вывод

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

Как вывести содержание поля описания пункта меню WordPress

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

Как только вы создали меню с помощью страницы Внешний вид > Меню, можно использовать функцию WordPress wp_nav_menu() в файле шаблона для вывода созданного меню.

Проблема заключается в том, что вывод функции будет иметь пример такой вид:

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

Тег <strong> оборачивает заголовок, а описание помещено в тег <span>. Такая конструкция может быть легко стилизована с помощью CSS для создания специального типа меню.

Подготовка

Сначала нам надо правильно настроить меню. WordPress уже имеет опцию описания для каждого пункта меню, но по умолчанию она отключена.

Во время работы на странице Внешний вид > Меню посмотрите в верхний правый угол экрана — там размещена закладка “Настройки экрана”. Если нажать на нее, то развернется вкладка с несколькими дополнительными опциями для вывода каждого пункта меню. Среди них есть чекбокс для включения описания.

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

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

Теперь у нас все готово к тому, чтобы вывеcти нужные данные на экран.

Редактируем вывод с помощью пользовательского обходчика

WordPress использует специальный класс “Walker”(обходчик) который используется для каждой записи данных и выводит ее соответствующим образом. Дело в том, что мы можем легко создать наше собственное расширение данного класса PHP. Таким образом нам не нужно будет заботиться о вытаскивании данных из базы и подготовке массивов. Мы только дополним часть кода WordPress, которая выводит список. Итак, открываем файл functions.php используемой у вас на сайте темы и добавляем в него следующий код:

Что делает данный класс? Фактически это код стандартного обходчика, в который внесены несколько дополнительных строк: выполняется проверка наличия описания, если оно есть, то описание оборачивается в тег span и добавляется к заголовку навигации.

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

Вызов функции

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

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

Готово!

ruseller.com