Wp nav menu


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

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

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

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

Скачать исходники разрабатываемой темы (11.94 кБ, *.zip).

Для начала удалим содержимое блока <nav></nav> в файле index.php (строка 32), раньше там была жесткая HTML-верстка трех пунктов меню.

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

Работа с меню в WordPress

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

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

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

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

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


Расстановка зарегистрированных меню на позиции

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

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

Добавление пунктов меню в WordPress

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

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

Вложенность пунктов меню

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

Вложенность пунктов меню для выпадающего меню

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

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


Меню уже отображаются на страницах WordPress

Рис. 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

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

Как вывести содержание поля описания пункта меню 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

2.5/5 (6)

Every modern WordPress theme should include many common elements within the code. Hard-coding a manual navigation works if you’ve already created the content, but it is not very dynamic at all.

The best method would be creating your own WP navigation programmatically which an administrator can then tie into one of their own menus.



For this article I’d like to go over the fundamentals you should follow when creating your own navigation in a theme. Specifically going over the many custom options and how you can setup a brand new menu from scratch. You won’t need to create anything for this article so think of it more like a reference guide when coding.

Basics of a Nav Menu

Back before the many advancements of WordPress 3.0 developers typically used wp_page_menu() in theme development. This will output a full list of pages along with a homepage link, and you have some parameters which are outlined in the codex. You might still use this in your sidebar or footer area if it makes sense.

But the much more popular method of navigation is through WordPress’ built-in menu system. Administrators may create as many custom menus as they like, dragging & dropping links to create manual hierarchy and structure. You can directly manage links to posts, pages, categories, tags, practically anything on your site.

The first step is to write some code in your functions.php file which creates the navigation menu. This may be done with register_nav_menu() or register_nav_menus() if you have multiple items. These menus only require a single identifier called $location along with a small descriptive string.

$location is more like a slug ID used to identify the menu in your theme. You’ll reference this defined item inside any PHP theme file you need it to appear. Also note that nav menus will auto-initialize theme support so you do not need to use add_theme_support() for menus.


Wp nav menu


Positions in your Theme

With your menu(s) setup in functions.php we should move on to the other theme files. Let’s start in a typical location such as header.php where we can add some very basic code. This sample is copied from the wp_nav_menu() codex and includes all of the optional parameters.

I’m going to delve into these options more in the next section. But I’ll start by glossing over the first two. Please remember that all of these are optional, because the values you see above will become your default if not overwritten. theme_location should match the location slug you chose when registering the menu. This is the only value that you should change to ensure it matches up properly.

Sometimes people confuse the menu location with menu since they are both very similar. In fact, menu should almost always be omitted which then allows the webmaster to assign their own menu to that location. This menu parameter is used to include a pre-made admin menu. It should be identical to a pre-existing menu that has already been created. But since most people will not have an existing menu(or this could change between websites) it’s best practice to simply leave it out of your theme navigation.

 

Setting Parameters

The other settings are mostly for customization which is why you could ignore them. But let’s tackle the rest so we have a good understanding of the possibilities. container, container_class, and container_id are beneficial when styling the menu. The outer container element wraps around the UL so it could even be an HTML5 <nav> if you like semantics.

The menu_class and menu_id get applied onto the unordered list itself. Each menu gets a class of .menu, so you might wish to change this if you’re using more than one. The echo param tells this function to output the HTML menu, otherwise it will return the value back to a function or PHP variable. When wp_nav_menu() cannot run for any reason, it will automatically fallback to using wp_page_menu() as I mentioned earlier.

The next two before and after params will output any HTML just before each of the anchor links, or just after closing them. link_before and link_after will append HTML inside the anchor links, just before & after the text itself. Remember these options and be sure not to get them mixed up! When in doubt, check the codex for support.

Now if you do not want to use an unordered list you can change this inside items_wrap. It’s using a sprintf() type of syntax to replace values with dynamic parameters in the same function. %1$s refers to menu_id, %2$s refers to menu_class, and %3$s is related to the list items output. Since it takes a whole lot of extra work to change the <li> elements it is usually best to just leave this one alone.

Finally the depth parameter tells the menu how deep we should go for hierarchy. If our header navigation is only a single-tier dropdown menu then we only need 1 level of depth. Or we may have a 2-tier flyout menu which could use 2 levels of depth. -1 is a special value which displays all links in the menu, but condenses them together into the same display level.

Now the $walker item is a special parameter for customizing how WordPress outputs content in a tree hierarchy. It expects a new class object which includes customized methods for item output. This is a fairly advanced topic, but you can read more about it from the Walker class reference guide.

 

Generate Menus from WP Admin

This last bit should provide administrators & webmasters a better way to understand menus. Once logged into the admin panel hover «Appearance» and then click the menus link.

Wp nav menu

From here you should rearrange links by organizing from the left accordion into the right section. You can give the menu a name which can be referenced in PHP — but notice at the top you’ll see a drop-down select menu. Once you register a navigation and give it a theme location it appears in this dropdown for the administrator to select. This is how webmasters can organize their own menus without needing to code any PHP.

From the left side you can choose between pages, posts, links, categories, and tags. If you click the small tab near the top-right corner labeled «Screen Options» you can hide some of these screen choices. You’ll also find advanced menu options for giving each link a target(such as target=»_blank») or even unique CSS classes.

Wp nav menu

Each category link could use a different class for unique colors when selected. By default you’ll give each link some text and a brief description, which is often used only by the website administrator. Links can also have title attributes and unique XFN values.

The more you practice using this menu system the clearer it will become. As a developer who has been using WordPress for years, I find this to be very handy. Newcomers who are just learning the basics of WordPress can still pick this up quickly without much of a struggle.

 

Further Reading

  • Improve your WordPress Navigation Menu Output [Tutorial]
  • Adding Custom Attributes To WordPress Menus
  • Extending the WordPress Walker Class
  • Create a Custom WordPress Menu Walker, Extending Walker_Nav_Menu Class

 

Closing

I hope this in-depth look at the WordPress navigation system can help new developers jump right into theming. Obviously there are some other important aspects to coding a theme. But navigation is so crucial and also somewhat confusing if you’ve never built something like this before. Try out these sample PHP codes and see what you can make using WordPress as the core foundation.

www.templatemonster.com

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

Скачать исходники для статьи можно ниже

Нижеуказанное руководство основано на моей предыдущей статье –

Создаем выпадающее горизонтальное меню WordPress (подробно).

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

Приступим же!

1. Заходим в панель управления сайтом на wordpress, в левом меню выбираем пункт “Внешний вид” и его подпункт “Меню”.

Здесь создаем нужное нам меню.

Например, создадим меню из рубрик, но не из всех, а только тех, которые нам нужны и назовем данное меню – “rubrici”, вот так это будет выглядеть:

Wp nav menu

 

2. Для вывода меню в wordpress будем пользоваться следующей функцией:

  <?php wp_nav_menu('menu=имя меню'); ?>  

Все просто, в вышеуказанном коде, вместо “имя меню” подставляете название созданного вами меню и вставляете код в любом месте вашего сайта.

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

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

 

3. Вставляем меню в нужном месте нашего сайта.

Давайте, например, вставим наше меню “rubrici” в шапку, в самом вверху.

Для примера возьмем стандартную тему wordpress – Twenty Twelve.

Для этого в панели управления wordpress заходим в пункт – “Веншний вид” и его подпункт “Редактор”, справа в списке шаблонов выбираем – header.php.

В его коде находим открывающий тег body, а сразу после него идет тег, открывающий блок “page” – вот после него и вставим вывод нашего меню “rubrici” с помощью функции – wp_nav_menu:

 

    ...    <body <?php body_class(); ?>>    <div id="page" class="hfeed site">    <?php wp_nav_menu('menu=rubrici'); ?>    <header id="masthead" class="site-header" role="banner">    ...    

Сохраняем изменения и переходим на свой сайт, смотрим, что у нас получилось:

Wp nav menu

 

Как видите меню у нас получается вертикальное, и это хорошо, если вам нужно вертикальное меню, однако, допустим, что нам нужно горизонтальное меню, тогда нам нужно прописать стили оформления для нашего меню – “rubrici”.

 

4. Прописываем стили меню.

Для начала, обернем функцию вывода нашего меню в новый блок, например “menu2”, для того чтобы прописать для него стили оформления.

То есть код в файле header.php (путь 3 данного руководства) будет выглядеть так:

 

    ...    <body <?php body_class(); ?>>    <div id="page">    <div id="menu2">    <?php wp_nav_menu('menu=rubrici'); ?>    </div>    <header id="masthead" role="banner">    ...    

 

Следующий шаг, который нам нужно сделать – это прописать стили оформления для нашего нового блока (“menu2”), в котором и содержится наше новое меню (“rubrici”).

А для этого в панели управления wordpress, в левом меню, выбираем пункт “Внешний вид”, далее его подпункт “Редактор”, а справа среди шаблонов выбираем файл – style.css.

Переходим в его коде в самый низ и вставляем следующий фрагмент:

  #menu2 {   padding: 0 0 0 20px;   margin: 0;  }  #menu2 li {   float: left;   list-style: none;   font: 12px Tahoma, Arial;  }  #menu2 li a {   display: block;   background: #20548E;   padding: 5px 12px;   text-decoration: none;   border-right: 1px solid white;   width: 70px;   color: #EAFFED;   white-space: nowrap;  }  #menu2 li a:hover {   background: #1A4473;  }  #menu2 li ul {   margin: 0;   padding: 0;   position: absolute;   visibility: hidden;   border-top: 1px solid white;  }    

 

После чего переходим на сайт и смотрим, что у нас получилось:

Wp nav menu

 

Как видите наше меню превратилось из вертикального в горизонтальное, осталось только подкорректировать стили оформления под свой сайт.

Например в данном примере нам нужно растянуть по ширине каждый пункт меню – за это отвечает атрибут:

 width: 70px;

Меняю его на:

 width: 170px;

После чего мое меню будет выглядеть следующим образом:

 

Wp nav menu

 

На этом все!

Не забудьте прочитать “похожие статьи”

mnogoblog.ru

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

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

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

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

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

$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() для того чтобы пользователь смог ее выбирать. Тоже какая-то не совсем понятная настройка, судя по всему, при работе с виджетами.

wordpressinside.ru

Создание меню в 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

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

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

 <?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

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

Добавление произвольного меню в WordPress - фото 1

Для создания нового меню, вписываем его название в поле «Введите заголовок меню» и жмем «Создать меню».

Добавление произвольного меню в WordPress - фото 2

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

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

Создание произвольного меню - Области темы

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

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

Добавление новых пунктов в произвольное меню WordPress

После этого их можно как угодно перемещать относительно друг друга и изменять вложенность.

Пример пунктов проивзольного меню

Также можно редактировать текст ссылки, добавлять атрибут Title или удалять пункт меню.

Редактирование пункта произвольного меню

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

Добавление ссылки в произвольное меню

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

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

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

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

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

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

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

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

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

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

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

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

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

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

dmitriydenisov.com


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

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