Создание меню WordPress | WordPress шаблон меню

Создание меню навигации в теме для WordPress

Для создания меню необходимо воспользоваться функцией wp_nav_menu(), параметром которой является массив мета данных для настройки меню. Далее нужно это меню зарегистрировать в файле functions.php после чего в панеле WordPress, во вкладке Внешний вид появится новая вкладка с названием Меню, именно в ней мы сможем окончательно завершить создание и настройку меню для темы.

Шаг 1: Создание и определение параметров меню

Для начала нужно открыть файл header.php и в соответствующем блоке, в котором будет находится будущее меню, добавить функцию отображения меню wp_nav_menu() с набором аргументов определённых в массиве $args.

<header>
<!--...-->

<div class="menu">
<?php
  $args = array(
  'theme_location' => 'primary_menu',      //определяем область темы где будет размещаться главное меню
  'container' => 'nav',                    //определяем родительский элемент (тег <nav>)
  'container_class' => 'nav-primary-menu', //назначаем имя класса для родительского элемента (тег <nav>)
  'menu_class' => 'ul-primary-menu'        //назначаем имя класса для меню (тег <ul>)
  );

  wp_nav_menu($args);                      //обеспечивает отображение меню
?>
</div>

<!--...-->
</header>

<?php

$args = array(

'theme_location' => 'primary_menu', //определяем область темы где будет размещаться главное меню

'container' => 'nav', //определяем родительский элемент (тег <nav>)

'container_class' => 'nav-primary-menu', //назначаем имя класса для родительского элемента (тег <nav>)

'menu_class' => 'ul-primary-menu' //назначаем имя класса для меню (тег <ul>)

);

wp_nav_menu($args); //обеспечивает отображение меню

</div>

</header>

Помимо приведенных выше параметров, существуют также и другие параметры, которые при необходимости, можно добавить в массив.

Все доступные параметры меню приведены в таблице в конце статьи.

Шаг 2: Регистрация созданного меню

После того как мы вставили код с меню в нужное место, его необходимо зарегистрировать (активировать) с помощью функции register_nav_menus() в файле functions.php, параметром которой является массив всех имеющихся типов меню. После чего в панеле управления, во вкладке Внешний вид появится новая подвкладка Меню, где мы сможем управлять всеми зарегистрированными типами меню.

<?php
  function theme_support_setup(){            //функция настройки функциональности темы
    //...

    //Меню навигации на сайте                //регистрация всех используемых типов меню
    register_nav_menus(array(
    'primary_menu' => __('Меню в шапке'),
    'sidebar_menu' => __('Меню в сайдбаре'),
    'footer_menu' => __('Меню в подвале')
    ));

    //...
  }
  add_action('after_setup_theme','theme_support_setup');
?>

<?php

function theme_support_setup(){ //функция настройки функциональности темы

//...

//Меню навигации на сайте //регистрация всех используемых типов меню

register_nav_menus(array(

'primary_menu' => __('Меню в шапке'),

'sidebar_menu' => __('Меню в сайдбаре'),

'footer_menu' => __('Меню в подвале')

));

//...

}

add_action('after_setup_theme','theme_support_setup');

Шаг 3: Настраиваем меню в панеле управления

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

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

Пример добавления ссылок на страницы в меню

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

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

В конечном итоге мы получим следующий результат.

Вы можете визуально выделить активную ссылку меню, для этого укажите css-стили для селектора .current-menu-item.

Список доступных параметров для функции wp_nav_menu( )

Параметр

Описание

название меню. Может содержать: id, slug или имя.

<?php
  wp_nav_menu(array('menu' => 'primary-menu'));
?>

<?php

wp_nav_menu(array('menu' => 'primary-menu'));

menu_class

имя CSS класса, который будет назначен элементу оборачивающему меню (ul).
По умолчанию - 'menu'.

<?php
  wp_nav_menu(array('menu_class' => 'menu-top'));
?>

<?php

wp_nav_menu(array('menu_class' => 'menu-top'));

menu_id

имя идентификатора, который будет назначен элементу оборачивающему меню (ul).

<?php
  wp_nav_menu(array('menu_id' => 'menu-top'));
?>

<?php

wp_nav_menu(array('menu_id' => 'menu-top'));

container

название контейнера, в который будет обернуто меню.
По умолчанию - 'div'.

<?php
  wp_nav_menu(array('container' => 'nav')); 
?>

<?php

wp_nav_menu(array('container' => 'nav'));

container_class

имя CSS класса для контейнера меню.
По умолчанию - 'menu-{menu slug}-container'.

<?php
  wp_nav_menu(array('container_class' => 'nav-menu-top')); 
?>

<?php

wp_nav_menu(array('container_class' => 'nav-menu-top'));

container_id

имя идентификатора для контейнера меню.

<?php
  wp_nav_menu(array('container_id' => 'nav-menu-top'));
?>

<?php

wp_nav_menu(array('container_id' => 'nav-menu-top'));

fallback_cb

если меню не существует будет вызвана обратная функция (callback). Если ее вызов не нужен, установите значение - 'false'.
По умолчанию - 'wp_page_menu'.

<?php 
  wp_nav_menu(array('fallback_cb' => '__return_empty_string')); 
  //функция __return_empty_string() возвращает пустую строку, 
  //поэтому в данном случае, если меню нет, то ничего выводится не будет.
?>

<?php

wp_nav_menu(array('fallback_cb' => '__return_empty_string'));

//функция __return_empty_string() возвращает пустую строку,

//поэтому в данном случае, если меню нет, то ничего выводится не будет.

before

текст, отображающийся перед ссылкой (перед тегом <a>).

<?php
  wp_nav_menu(array('before' => '|'));
?>

<?php

wp_nav_menu(array('before' => '|'));

after

текст, отображающийся после ссылки (после тега <a>).

<?php
  wp_nav_menu(array('before' => '|'));
?>

<?php

wp_nav_menu(array('before' => '|'));

link_before

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

<?php
  wp_nav_menu(array('link_before' => '['));
?>

<?php

wp_nav_menu(array('link_before' => '['));

link_after

текст, отображающийся после значения ссылки (внутри тега <a>).

<?php
  wp_nav_menu(array('link_after' => ']'));
?>

<?php

wp_nav_menu(array('link_after' => ']'));

echo

отвечает за вывод меню. Значение 'true' - вывести меню, значение 'false' - не выводить меню.
По умолчанию - 'true'.

<?php
  wp_nav_menu(array('echo' => 'false'));
?>

<?php

wp_nav_menu(array('echo' => 'false'));

depth

вывод определенного количества вложенных уровней меню. Значение 0 - вывод всех уровней.
По умолчанию - 0.

<?php
  wp_nav_menu(array('depth' => 1)); //будет выводится только первый уровень вложенного меню
?>

<?php

wp_nav_menu(array('depth' => 1)); //будет выводится только первый уровень вложенного меню

walker

указывает объект, в котором описано построение меню.
По умолчанию - Walker_Nav_Menu.

<?php
  wp_nav_menu(array('walker' => new my_custom_walker));
  //наш собственный объект описывающий построение меню
?>

<?php

wp_nav_menu(array('walker' => new my_custom_walker));

//наш собственный объект описывающий построение меню

theme_location

выбор места, где нужно вывести меню. Значение должно быть зарегистрировано в функции register_nav_menu()

<?php
  wp_nav_menu(array('theme_location' => 'primary_menu'));
?>

<?php

wp_nav_menu(array('theme_location' => 'primary_menu'));

items_wrap

описывает способ обертки пунктов списка.
По умолчанию - '<ul id="%1$s" class="%2$s">%3$s</ul>'.

<?php
  wp_nav_menu(array('items_wrap' => '%3$s')); //будет удалена обёртка <ul>
?>

<?php

wp_nav_menu(array('items_wrap' => '%3$s')); //будет удалена обёртка <ul>

Подключение css и js файлов в WordPress

Шаблоны страниц и записей в WordPress

Создание меню для сайта на WordPress

Создание меню навигации в теме для WordPress

Шаг 1: Создание и определение параметров меню

Шаг 2: Регистрация созданного меню

Шаг 3: Настраиваем меню в панеле управления

Список доступных параметров для функции wp_nav_menu( )