Темизация меню в 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 (в следующей статье мы подробно разберём этот класс "по косточкам").

 

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