Окт

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

wodrpress меню В позапрошлой статье блога я писал про интересное нововведения последней версии 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 нет, разработчики значительно упростили процедуру работы и расширили возможности данного элемента навигации.

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

А еще можно опубликовать статью в своем блоге:

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

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

Loading ...

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

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

Еще интересно почитать:

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

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, вроде получается, но гляну ваш блог полностью, может, что еще интересного нарою.

Оставить комментарий

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

Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога:

Последние посты

Категории

Страницы

Архив

Полезное

Облако тегов

Лучшее в категории

Клуб читателей блога

Скажи свое мнение!

Loading ...

Друзья проекта

Интернет новости

Последние новости

Все новости интернета »