Темизация меню в Wordpress #1: Базовые функции для работы с меню
Разбираемся с базовыми функциями для вывода и темизации меню на Wordpress сайте.
register_nav_menus
Перед тем как выводить меню в Wordpress, его нужно сначала зарегистрировать в системе. Для этого можно воспользоваться функцией register_nav_menus.
Функция должна использоваться при инициализации вашей темы, поэтому помещать код вызова нужно в теле обработчика after_theme_setup:
<?php
/* functions.php */
add_action( 'after_theme_setup', 'my_theme_setup' );
function my_theme_setup () {
register_nav_menus( array(
// это только пример, по возможности используйте __('my_theme', 'Menu name')
// чтобы ваша тема могла поддерживать интернационализацию
// тема о стандартной интернационализации будет раскрыта в следующих статьях
'main-menu' => 'Название меню'
)
);
}
Таким образом, мы зарегистрировали в системе область меню с идентификатором main-menu, и в панели управления меню, в качестве названия этой области, будет выводиться "Название меню".
На заметку
Важно также, чтобы вы создали в панели администрирования меню для этой области, иначе Wordpress не будет вызывать большинство хуков!
wp_nav_menu
Эта функция входит в список т.н. шаблонных функций, т.е. тех, что вы используете для вывода компонентов в шаблонах Wordpress. Функция принимает в качестве аргумента хэш-массив с параметрами, давайте посмотрим на сигнатуру этого массива:
<?php
$args = array(
'theme_location' => 'main-menu',
'menu' => '',
'container' => 'div',
'container_class' => 'menu-{menu-slug}-container',
'container_id' => '',
'menu_class' => 'menu',
'menu_id' => '',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'items_wrap' => '<ul id = "%1$s" class = "%2$s">%3$s</ul>',
'depth' => 0,
'walker' => '',
);
wp_nav_menu( $args );
Как видите, параметров довольно много, однако, на практике, вам вряд-ли придётся использовать их все. Теперь рассмотрим каждый параметр более подробно:
- theme_location - это тот самый идентификатор, который вы зарегистрировали с помощью register_nav_menus.
- menu - это идентификатор конкретного меню, является необязательным параметром - как правило меню берётся из theme_location, но этот параметр позволяет загрузить любое другое зарегистрированное в системе меню.
- container - тег для контейнера вёрстки меню. По умолчанию, WP оборачивает меню в тег div. Для того, чтобы избавиться от контейнера, нужно в качестве значения передать false.
Также, нужно учитывать, что перед генерацией контейнера, Wordpress ещё проверяет, входит-ли переданный тег в список разрешённых тегов (т.е. технически, чтобы запретить вывод контейнера, подходит не только false). По умолчанию, разрешены теги div и nav. Как правило этого вполне достаточно, но вы можете добавить дополнительные теги в этот список - для этого нужно создать собственный обработчик фильтра wp_nav_menu_container_allowedtags
Пример wp_nav_menu_container_allowedtags (скорее всего, вам никогда не понадобится его использовать):
<?php
add_filter('wp_nav_menu_container_allowedtags', 'my_theme_nav_menu_container_allowedtags');
function my_theme_nav_menu_container_allowedtags ($defaultTags) {
return array_merge(array('custom_tag_1', 'custom_tag_2'), $defaultTags);
}
- container_class - свойства соответствующих html атрибутов контейнера
- container_id - свойства соответствующих html атрибутов контейнера
- menu_class - свойства атрибутов списка элементов.
- menu_id - свойства атрибутов списка элементов.
- echo - если параметр true, то сгенерированное меню будет выведено сразу, иначе функция вернёт строку с вёрсткой меню.
- fallback_cb - функция, которая будет вызвана в качестве фолбэка. Если в кратце, то это та функция, которая будет вызвана, если вы не указали theme_location или menu, или указали theme_location, но не зарегистрировали меню для соответствующей области. По умолчанию, wordpress вызовет wp_page_menu, которая в свою очередь просто отображает список ссылок на страницы.
- before, after, link_before, link_after - вот наглядный пример того как эти параметры будут выведены:
[BEFORE]<a>[LINK_BEFORE] LINK TEXT [LINK_AFTER]</a>[AFTER]- items_wrap - шаблон вывода меню. Работает это следующим образом:
По умолчанию, у нас имеется шаблон
<ul id = "%1$s" class = "%2$s">%3$s</ul>, где вместо %1$s будет вставлено значение из параметра menu_id, а вместо %2$s будет выведено значение menu_class. Вместо %3$s подставится HTML код с элементами меню.
- depth - количество уровней вложенности. Этот параметр обрабатывается классом Walker, который мы рассмотрим далее.
Значения, применимые к depth:
-1 - все элементы будут выведены на одном уровне вложенности,
0 - будет выведена вся иерархия элементов
>= 1 - будет выведена иерархия до указанного уровня вложенности
Наглядный пример:
Структура меню построенная в админке WP:
Элемент 1
Элемент 2
Элемент 3
Элемент 4
При depth == -1
[ "Элемент 1", "Элемент 2", "Элемент 3", "Элемент 4"]
При depth == 0
[ "Элемент 1" => [
"Элемент 2" => [
"Элемент 3"
]
]
"Элемент 4"
]
При depth == 1
[ "Элемент 1", "Элемент 4" ]
И т.д.
- walker - экземпляр специального класса, выполняющего обработку иерархических списков в WP (в следующей статье мы подробно разберём этот класс "по косточкам").
На этом, полагаю, можно закончить знакомство с базовыми функциями и перейти к рассмотрению возможностей по кастомизации отдельных пунктов меню.