Окт

Вывод меню с помощью функции wp_nav_menu

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

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

<?php
if (function_exists('add_theme_support')) {
    add_theme_support('menus');
}
?>

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

<?php wp_nav_menu('menu=first'); ?>

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

<?php wp_nav_menu($args); ?>

Здесь используются следующие параметры:

$menu — выбранный идентификатор для меню — ID, slug или название меню.

$container — меню UL по умолчанию «оборачивается» в контейнер DIV с помощью данной настройки.

$container_class — указывает класс контейнера, по умолчанию его значение menu-{menu slug}-container, то есть в нашем случае, например, будет класс menu-first-container.

$container_id — можно добавить контейнеру ID, по умолчанию не указано.

$menu_class — класс для элемента меню UL, его значение — menu.

$menu_id — ID для элемента ul, по умолчанию равно значению menu-{slug}

$echo — если вы не хотите отображать меню, а возвращать значение функции используйте для этой настройки значение 0.

$fallback_cb — если меню не существует, вызывается функция wp_page_menu.

$before — задает текст, который выводится перед ссылкой А.

$after — текст после ссылки А, по умолчанию он, как и предыдущий, пустые.

$link_before — выводит фразу перед текстом ссылки, не задано.

$link_after — выводится после текста ссылки, тоже пустое.

$depth — задает количество уровней иерархии для вывода меню, значение по умолчанию 0 выводит все меню целиком.

$walker — какой-то непонятный пользовательский «walker object», наверное больше понадобится продвинутым разработчикам.

$theme_location — локация темы, где будет использовано меню, должна быть активирована через register_nav_menu() для того чтобы пользователь смог ее выбирать. Тоже какая-то не совсем понятная настройка, судя по всему, при работе с виджетами.

Примеры использования функции wp_nav_menu

Самый простой код, приведенный в кодексе:

<div class="access">
  <?php wp_nav_menu(); ?>
</div>

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

Меняем класс для элемента меню UL

<?php wp_nav_menu('menu=first&menu_class=my-main-menu'); ?>

Убираем контейнер DIV из меню

<?php wp_nav_menu('menu=first&container='); ?>

либо как сказано в кодексе

<?php wp_nav_menu( array( 'container' => '' ) ); ?>

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

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

Оцените статью:

(голосов - 10, средний балл: 5,00 из 7)

Загрузка...

Категории: Возможности;

Теги: wordpress кодекс, меню и навигация, полезное для блога, сниппеты, функции wordpress.

комментариев 48 к статье “Вывод меню с помощью функции wp_nav_menu”

1 2 Далее →

eavasi 09.10.2010
Необходимо обязательно отметить, что новое меню должно включаться в старые темы очень осторожно. Буквально вчера на протяжении 3 часов разбирался с тем, что вот это самое меню не хотело появляться в блоге. Я включал его в старую тему (до WP 3) с помощью кода.
В результате оказалось что указанный код заключенный в просто не работает.
Спасибо за статью. Полезно.
Nigil 21.10.2010
Скажите пожалуйста, а можно сделать средствами этой функции или php, чтобы в тегах Li не выводились классы и id? Не хочется лишнюю требуху в html генерировать.
3netI 23.10.2010
Огромное спасибо за статью — в ачстности, за ВЕСЬ блог — в целом!
Piter 29.10.2010
Блин, хороший сайтец, добавил в закладки. А по поводу меню, очень даже молодци, наконец замутили….
qua12345 24.11.2010
Спасибо большое за статью! Очень полезная информация!
Pagood 06.12.2010
А как исключить некоторые страницы из главного меню стандартной темы twentyten ?
Tod 06.12.2010
Pagood, я так понимаю меню там создается с помощью новой функции в wp, о которой рассказывал в статье создание и управление меню в wordpress 3.0 — нужно посмотреть выводится ли меню этим способом. Если нет,зайти в виджета, и в крайнем случае уже править шаблон через функцию wp_nav_menu.
Алексей 09.12.2010
walker — это совсем не непонятный обджек, при помощи волкера можно управлять выводом меню, вот тут http://belbiy.com/bg/wp_nav_menu-and-custom-walker-class/ есть небольшой пример (не сочтите за рекламу другого сайта)
vasilievskiy 12.03.2011
Если в админке wordpress нету раздела меню, то его можно активировать добавлением специального кода в файл functions.php

А куда именно этот код вставлять?
Tod 14.03.2011
vasilievskiy, добавить код нужно в файл functions.php, там без разницы куда именно.
ProGrafika 20.07.2011
Спасибо очень полезная статья. Есть вопрос как вывести только первые 10 записей. Хочу одно и то меню использовать в разных частях сайта.
Tod 20.07.2011
ProGrafika, такого ограничения в функции меню я что-то не наблюдаю, чтобы вывести 10 записей нужно именно столько добавить в меню.
Евгений 07.09.2011
Спасибо, но вот мне надо организовать выпадающее меню. То есть такое как это, но чтобы при клике на «клубы» в меню внизу открывались «спартак», «зенит», а при клике, например, «зенит» открывалось еще подменю «игроки». Подскажите как это реализовать.
Tod 09.09.2011
Евгений, я бы поискал какие-то плагины для выпадающих (красивых) меню. По умолчанию меню идет без всех этих эффектов, можно добавить какие-то скрипты в блог, но это нужно знать как добавлять, проще отыскать плагины для меню. Думаю, такие есть.
Sg 19.09.2011
Спасибо! Очень полезно!
byheaven 19.01.2012
Никак не могу понять как убрать этот абзац и поставить пробел между ссылкам (((
Вот так выглядит верхнее меню

http://s018.radikal.ru/i500/1201/9f/52eb5f34b9fb.jpg
Tod 22.01.2012
byheaven, сложно ответить точно, так как это зависит от реализации в шаблоне, обычно делают пункты списком с тегом li, а потом в css стилях используют свойство display: inline дабы отобразить пункты в одну строку.
byheaven 22.01.2012
дело в том что выбрала тему где в верхнем меню стояла только одна ссылка ГЛАВНАЯ а все остальные страницы можно было вывести только в сайдбаре. почему то тема не предусмотрела то что человек захочет страницы эти убрать вверх. вот теперь и мучаюсь.
Вот мой код в header.php
думаю станет понятно в чем проблема
в стиле как вы сказали поставила этот li но мне кажется дело тут не в этом совсем
byheaven 22.01.2012
Прошу прощения забыла код выложить
http://s002.radikal.ru/i198/1201/59/ec686841d32f.jpg
Tod 23.01.2012
byheaven, не совсем понимаю, если честно. В вашей теме как на картинке из первого комментария, так и в коде второго изображения с исходным кодом конструкция выводит сначала ссылку «Главная», а после нее меню с помощью функции wp_nav_menu — собственно на картинке видно, что меню снизу под главной. Все настройки внешнего вида делаются через CSS стили. У вас тут должно быть что-то прописано в файле для #menu_items или .container_class. Тут больше со стилями разбираться нужно, почитать о них, применить и т.п., по структуре кода в теме используется стандартное решение — главная + меню.
byheaven 23.01.2012
Спасибо большое!!!! Вы дали мне подсказку! У меня получилось сделать пробел между страницами. Нужно было просто в стили добавить padding-right:10px; в ту область что отвечает за список
Но проблема с ГЛАВНОЙ осталось. Не знаю как вывести все это в одну строку. Как вариант конечно я убрала вообще эту главную и все выглядит как надо ))))
Но думаю ссылку на главную все таки надо оставить…. вот что написано у меня в стилях по этому поводу…. может что понятней станет..

div#page #menu{
width:100%;
height:41px;
background:url(images/menu_bg.png) no-repeat top center;
}

div#menu #menu_items{
text-align:left;
padding-left:20px;
padding-top:0px;
word-spacing: normal;
white-space: normal;
margin-right: 10px;
}

div#menu #menu_items li{
display:inline;
list-style-type:none;
color:#FFFFFF;
font-weight:bold;
}

div#menu #menu_items li a{
color:#ffffff;
text-decoration:none;
font-size:12px;
font-weight:bold;
padding-right:10px;
}

div#menu #menu_items li a:hover{
color:#FFFFFF;
text-decoration:underline;
font-size:12px;
font-weight:bold;
padding-right:10px;
}
Tod 24.01.2012
byheaven, попробуйте добавить в div#menu #menu_items li a строку display:inline;
Денис 18.03.2012
Здравствуйте.
Подскажите пожалуйста — как сделать вывод меню с ссылками на категории? как на этом сайте?
я когда wp_list_categories использую — он мне их списком вертикальным шарашит(
Tod 19.03.2012
Денис, внешний вид меню оформляется с помощью стилей CSS, он может выводиться и списком через wp_list_categories это не так важно. В данной статье описан другой подход к отображению категорий и вообще меню — более удобный, рекомендую детальнее с текстом ознакомиться, новое меню начиная с wordpress 3.0 гораздо удобнее.
Денис 21.03.2012
Всё, спасибо, разобрался!)
cheshire 22.04.2012
Спасибо за статью, практически сразу наткнулся на нее в поиске и как оказалось — именно эта функция мне и нужна была. Это мой первый опыт по «натягиванию» html+css на wp, вроде получается, но гляну ваш блог полностью, может, что еще интересного нарою.
Андрей 30.05.2012
Подскажите, я с вордпресс работаю только со вчерашнего дня, более менее все понимаю, но не могу сделать так, чтобы при нажатии на пункт меню под ним показывалось другое меню (с подкатегориями), при нажатии на другой пункт меню уже другое меню показывалось. Спасибо
Tod 30.05.2012
Андрей, это скорее вопрос не в вордпресс а javascrips и css — то есть либо поиска шаблон, поддерживающий этот принцип и позаимствовать его.
ADv 30.06.2012
Страницы выводятся в меню, но сортируются по алфавиту. Как можно изменить этот порядок?
Tod 30.06.2012
ADv, в этом меню через админку указываете очередность, а если оно выводится через другую функцию, тогда там должен быть параметр, который отвечает за сортировку — по алфавиту, id и тому подобное.