Одним из важных элементов сайта является меню сайта или система навигации, как его еще называют. Чем меню проще сделано и организовано, тем проще пользователю ориентироваться на страницах сайта.

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

Т.к. изучением WordPress я занимаюсь относительно недавно, у меня то же появились вопросы о том, как сделать такое-то или такое-то меню. Поэтому я решил посвятить цикл статей о работе с меню в системе управления контентом WordPress. Используемая версия WordPress 3.3.1; информация актуальна начиная с версии 3.0.0.

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

Шаг 1. Включаем поддержку меню в теме

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

Таким образом, если темой не поддерживается меню, то зарегистрировать его можно так:

// для одного элемента меню
register_nav_menu($location, $description);

где:
$location (строка)(обязательное) позиция элемента меню в активной теме WordPress, а также значение slug.
$description (строка) (обязательное) описание элемента меню, которое отображается в админке.

пример:

register_nav_menu('primary', 'Primary Menu');

Либо, используя функцию для регистрации нескольких элементов меню:

// для нескольких элементов
register_nav_menus($locations);

где:
$locations (массив) (обязательное) ассоциативный массив позиция => описание

пример:

register_nav_menus(
  array(
    'top_menu' => 'Top Menu',
    'left_menu' => 'Left Menu'
  )
);

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


Шаг 2. Создаем простое меню

Все манипуляции я буду производить со стандартной темой Twenty Eleven.
Для создания нового элемента меню, вписываем его название в поле «Заголовок меню» и нажимаем «Создать меню».



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



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



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


список которых можно изменить, отметив галочками «Настройки экрана»:


Шаг 3. Вывод созданного меню на страницах сайта

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

$args = array(
  'menu' => '', // Название меню (string).
  'container' => 'div', // Контейнер меню (string). В него помещается список ul.
  'container_class' => 'menu-{menu slug}-container', // Класс контейнера (string).
  'container_id' => '', // Id контейнера (string).
  'menu_class' => 'menu', // Класс тега ul (string).
  'menu_id' => '', // Id тега ul (string).
  'echo' => true, // Выводить на экран или возвращать для обработки (boolean).
  'fallback_cb' => 'wp_page_menu', // Резервная функция на случай, если произвольное меню не существует (string).
  'before' => '', // Текст перед <a> каждой ссылки (string).
  'after' => '', // Текст после </a> каждой ссылки (string).
  'link_before' => '', // Текст перед анкором ссылки (string).
  'link_after' => '', // Текст после анкора ссылки (string).
  'depth' => 0, // Глубина вложенности (integer). 0 - неограниченно, 2 - двухуровневое произвольное меню.
  'walker' => , // Класс, собирающий меню. Default: new Walker_Nav_Menu. (object).
  'theme_location' => '', // Расположение меню в шаблоне. Указываем идентификатор меню. (string).
  'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>', // шаблон вывода
);

Функция принимает как массив значений, так и строку параметров:

<?php
  // параметры через массив
  $args = array(
    'menu_id' => 'topmenu',
    'theme_location' => 'top',
    'container' => ''
  );

  wp_nav_menu($args);
  
  // параметры в строке
  wp_nav_menu('menu_id=topmenu&theme_location=top&container=');
?>

На выходе у нас будет сформировано меню следующей структуры:

<div class="...">
  <ul id="..." class="...">
    <li id="..." class="..."><a href="#">Главная</a></li>
    <li id="..." class="..."><a href="#">О нас</a></li>
    <li id="..." class="..."><a href="#">Новости</a></li>
    <li id="..." class="..."><a href="#">Вопросы и ответы</a></li>
    <li id="..." class="..."><a href="#">Контакты</a></li>
  </ul>
</div>

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

  • al

    нужная вещь. но мне, как совсем далёкому от пхп и хтмл всё, равно не понятно куда вставлять
    register_nav_menus(
    array(
    ‘top_menu’ => ‘Top Menu’,
    ‘left_menu’ => ‘Left Menu’
    )
    );

    • Guest

      В файл functions.php, который находится в каталоге используемой темы