Меню в теме WP. Пошаговая инструкция простым языком.

  1. Создать тестовый сайт на локальном сервере. Я делаю на OpenServer. Для этого создам папку testmenu в директории OpenServer/domains/ и скопирую туда файлы из папки wordpress. Создать новую базу и пользователя в PhpMyAdmin. И активирую сайт testmenu
  2. Создать тестовую тему в папке wp-content/themes/. Назову ее также: testmenu.
Тестовая тема отображается в списке тем в админке сайта как поврежденная. Чтобы это исправить, необходимо создать минимальный набор файлов и прописать необходимый код.

3. Открою папку с темой в Visual Studio Code.

4. Создать минимальный набор файлов для активации тестовой темы: index.php и style.css

5. Пропишу в файле style.css следующий код:

/*
Theme Name: myTheme22
Version: 1.0
Description: Моя тема с нуля
Author: Debugger
Author URI: https://debuggerplus.com
*/

Главное, чтобы присутствовал параметр Theme Name. Тогда ваша тема появится в списке тем в админке сайта и ее можно будет активировать.

6. Для наглядности добавим превью темы. Для этого добавим в тему заранее подготовленное изображение с названием screenshot.png

7. Активируем тему. Если обновим сайт, то увидим пустое белое поле, так как у нас нет никакого содержимого в теме.

В админке сайта нет возможности создания меню.

8. Исправим это. Для этого надо создать файл functions.php. И прописать в него следующий код:

<?php
add_action('after_setup_theme', function(){
    add_theme_support('menus');
})
?>

В админке сайта добавится возможность добавления меню.

9. Добавим произвольное меню. Создадим несколько тестовых страниц и добавим их меню и нажмем «Сохранить меню»

Если обновить страницу сайта, то меню нигде не отобразится.

10. Запишем в файле index.php следующий код:

<?php
    wp_nav_menu();
?>

Тогда при обновлении страницы, мы увидим наше меню.

Функция wp_nav_menu() без параметров выводит последнее созданное непустое меню. Если такого меню не находит, то сама создает меню из постоянных страниц.

Параметры функции wp_nav_menu()

Ниже показаны параметры по умалчанию.



menu

Параметр menu указывает, какое меню выводить. В параметре меню указывается id, slag или название необходимого меню.

<?php
    wp_nav_menu ([
        'menu' => 'main-menu'
    ]);
?>

theme_location — содержит локацию области меню.

Чтобы использовать этот параметр, сначала надо в файле functions.php зарегистрировать область меню функцией register_nav_menu(‘локация меню’,’Название меню’);

Пример кода:

<?php
add_action('after_setup_theme', function(){
    add_theme_support('menus');
    register_nav_menu('header-menu','Верхняя область');
})
?>

В админке сайта появится область отображения меню.

Добавим еще одну область отображения.

<?php
add_action('after_setup_theme', function(){
    add_theme_support('menus');
    register_nav_menu('header-menu','Верхняя область');
    register_nav_menu('footer-menu', 'Нижняя область');
})
?>
Таким образом можно добавить бесконечное количество областей меню.

Функция register_nav_menu(); регистрирует только одну область за раз.

Если нужно зарегистрировать сразу несколько областей, то можно воспользоваться функцией register_nav_menus();

    register_nav_menus([
        'header-menu' => 'Верхняя область',
        'footer-menu' => 'Нижняя область',
        'sidebar-menu' => 'Боковое меню'
    ]);

При изсользвании функции register_nav_menus(); не надо прописывать функцию активации поддержки произвольных меню add_theme_support(‘menus’); функция делает это сама.

has_nav_menu()

Функция has_nav_menu() проверяет наличие меню в указанной области.

    if(has_nav_menu('header-menu')){
        // Что-то перед меню
        wp_nav_menu([
           'theme_location' => 'header-menu',
       ]);
        // Что-то после меню
    } else {
    }

Если меню существует, то оно выводится в соответствующей области, если нет, то выполняется инструкция else.

fallback_cb

То же самое можно сделать с помощью фунции fallback_cb.


$menu=wp_nav_menu([
    'theme_location' => 'footer-menu',
    'fallback_cb'    => null,
    'echo'           => false
]);

if($menu) {
    // Что-то, если надо
    echo $menu;
    // Что-то, если надо
} else {
    // Выводим что-то вместо заглушки
}

echo

Параметр ‘echo’ => false используется для того, чтобы получить html-код меню. Вставить в нужное место нужные классы и вывести на экран.

if(has_nav_menu('header-menu')){     
        $menu = wp_nav_menu([
            'theme_location' => 'header-menu',
            'echo'           => false        
       ]);
        $menu = str_replace('menu-item', 'my__class',$menu);
        echo $menu; // Или делаем return, если ситуация требует
    }

fallback_cb

function show_when_menu_is_empty() {
    echo 'Создайте меню, иначе без него внешний вид сайта портится.';
    }

wp_nav_menu([
            'theme_location' => 'header-menu1111',
            'fallback_cb'    => 'show_when_menu_is_empty'        
            ]);

Если меню не существует, то выполнится функция, которая выводит на экран сообщение.

walker

В параметр walker нужно передавать объект класса, который будет использоваться для построения меню.

wp_nav_menu([
    'theme_location' => 'header-menu',
    'walker'         => new My_Menu_Walker()      
           ]);

container

Параметр container определяет, чем будет обернут тег ul. По умолчанию div. Можно указать nav. Если не нужно ничем оборачивать, то укзываем false.

container_id

Параметр container_id определяет html-атрибут id у контейнера. По умолчанию: пустая строка.

container_class

Параметр container_class определяет html-атрибут class у контейнера.

menu_id

Этот параметры определяет значение html-атрибута id у тега ul. По умолчанию, пустая строка.

menu_class

Определяет значение class тега ul. По умолчанию: menu.

before

Выводит произвольный текст или html-код перед тегом a.

after

После тега а.

link_before

Тоже самое перед анкором. Часто используется для вставки иконок.

link_after

Тоже самое после анкора ссылки.

items_wrap

Указывает, нужно ли оборачивать элемент в тег ul. Если нужно, указывается шаблон обертки. По умолчанию ‘<ul id=»%1$s» class=»%2$s»>%3$s</ul>’.

depth

Количество уровней вложенности. По умолчанию 0, все уровни выводятся. 1 — все пункты первого уровня.

item_spacing

Определяет, оставлять или нет переносы строк в html-коде меню. Это можно увидеть в исходном коде html-страницы. По умолчанию preserve — оставлять. Discard — не оставлять.

wp_nav_menu([
            'theme_location' => 'header-menu',
            'container'      => 'nav',
            'container_id'   => 'id__container',
            'container_class' => 'class__container',
            'menu_id'         => 'id_menu',
            'menu_class'      => 'class__menu',
            'before'          => 'До ссылки',
            'link_before'     => 'До анкора',
            'link_after'      => 'После анкора',
            'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
            'depth'           => 1,
            'item_spacing'    => 'discard'
         ]);