Создание произвольного меню в теме WordPress – часть 6

В этой статье рассмотрим важную для любого сайта на WordPress задачу – формирование произвольного меню. На примере нашей темы Lightweight создание произвольного меню выполнено в 2 приёма:

1) В файл functions.php помещаем такой код:

1
2
3
4
5

<?php
register_nav_menus(array(
	'top'    => 'Верхнее меню'
));
?>

2) В файл header.php помещаем такой код:

1
2
3
4
5
6
7

<?php 
			wp_nav_menu( array(
			'menu_class'=>'menu',
			'theme_location'=>'top',
			'container'=>''
			) );
		?>

После чего в админ-панели создаём новое меню с любым названием (например, MenuTop) и привязываем его к области темы. В данном случае область темы – «Верхнее меню», что указано в пункте 1 (пример на скриншоте ниже).
В результате WordPress сгенерирует ненумерованный список следующего вида:

1

<ul><li></li></ul>

Теперь рассмотрим подробнее пункты 1 и 2.

Функция register_nav_menus (прописываем её в файле functions.php) регистрирует несколько меню одновременно. В нашей теме зарегистрировано только одно меню под названием top.
Для вывода в шапке сайта этого меню top применяем функцию wp_nav_menu (прописываем её в файле header.php). Присваиваем параметру “theme_location” значение top . В нашем примере выглядит так: ‘theme_location’=>’top’.

Т.е., название top должно быть указано в обеих функциях (register_nav_menus и wp_nav_menu) и является их связкой.

Также следует отметить, что выводить произвольное меню с помощью функции wp_nav_menu Вы можете в любой области сайта – не обязательно в шапке (файл header.php). Это может быть подвал или боковая панель, тогда вставляйте функцию wp_nav_menu в файл footer.php или sidebar.php соответственно.

Кроме того, в функции wp_nav_menu мы определили:

• ‘menu_class’=>’menu’ – название класса меню, которое будет присвоено тегу
• ‘container’=>’ ‘ – чем оборачивать ul тег. Допустимо: div или nav. В нашем случае в кавычках ничего не указано, значит, ничем не оборачиваем

Также могут задаваться такие параметры:

1
2
3
4
5
6
7
8
9

  'container_class' => - class у контейнера меню
  'container_id'    => - id у контейнера меню
  'menu_class'      => - class у тега ul 
  'menu_id'         => - id у тега ul
  'before'          => - текст перед тегом <a> в меню
  'after'           => - текст после каждого тега </a> в меню
  'link_before'     => - текст перед анкором каждой ссылки в меню
  'link_after'      => - текст после анкора каждой ссылки в меню
  'depth'           => - уровень вложенности меню (по умолчанию 0 – без ограничений)

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