Окт
5
48

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

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

рейтинг Оцените статью:
Ужасная статьяНичего интересногоТак себеНормальноХорошоКлассный постВ закладки!
(голосов - 10, средний балл: 5,00 из 7)
Загрузка...

категория Категории: Возможности;
теги Теги: , , , , .

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

  • Андрей   30.05.2012

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

  • Tod   30.05.2012

    Андрей, это скорее вопрос не в вордпресс а javascrips и css — то есть либо поиска шаблон, поддерживающий этот принцип и позаимствовать его.

  • ADv   30.06.2012

    Страницы выводятся в меню, но сортируются по алфавиту. Как можно изменить этот порядок?

  • Tod   30.06.2012

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

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


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

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

Поиск:
Последние посты
Лучшее в категории

Облако тегов
Скажи свое мнение!

В чем основные плюсы Wordpress?

Посмотреть результаты

Загрузка ... Загрузка ...
Друзья проекта
Последние новости