Как создать меню в WordPress с помощью хука Wpset

Почему важно создавать кастомные меню в WordPress

Меню – одна из ключевых частей любого сайта на WordPress. Они помогают пользователям ориентироваться и находить нужные разделы быстро и удобно. Стандартные меню WordPress удобны, но часто ограничены по функционалу и дизайну. Чтобы получить больше контроля, разработчики создают свои собственные меню с помощью хуков и функций. В этой статье мы рассмотрим, как с помощью хука и функций с префиксом wpset_ создать и зарегистрировать кастомное меню, а также вывести его на сайте.

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

Регистрация меню в WordPress через хук Wpset

Для начала зарегистрируем меню через хук. В WordPress для регистрации меню используется функция register_nav_menus(). Мы создадим функцию с префиксом wpset_ и подключим её к хуку init.

function wpset_register_custom_menus() {
    register_nav_menus(array(
        'wpset_main_menu' => __('Wpset Главное меню', 'wpset'),
        'wpset_footer_menu' => __('Wpset Меню в футере', 'wpset'),
    ));
}
add_action('init', 'wpset_register_custom_menus');

Эта функция создаст два новых меню: главное и футерное, которые вы сможете привязать в админке WordPress в разделе Внешний вид - Меню.

Почему использовать префикс Wpset?

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

Вывод меню в шаблоне с помощью функции Wpset

Чтобы вывести меню на сайте, используем функцию wp_nav_menu(). Обернем вызов в нашу функцию с префиксом wpset_ для удобства и повторного использования.

function wpset_display_menu($menu_location) {
    if (has_nav_menu($menu_location)) {
        wp_nav_menu(array(
            'theme_location' => $menu_location,
            'container' => 'nav',
            'container_class' => 'wpset-menu wpset-menu-' . $menu_location,
            'menu_class' => 'wpset-menu-list',
        ));
    } else {
        echo '<p>Меню не назначено. Создайте и назначьте меню в админке.</p>';
    }
}

Используйте эту функцию в нужных местах шаблона, например, в header.php:

<?php wpset_display_menu('wpset_main_menu'); ?>

Добавление кастомного класса к пунктам меню

Для стилизации и дополнительного функционала иногда нужно добавлять свои CSS-классы к пунктам меню. Для этого используем фильтр nav_menu_css_class и создадим свой фильтр с префиксом Wpset.

function wpset_add_custom_class_to_menu_item($classes, $item, $args) {
    if ($args->theme_location === 'wpset_main_menu') {
        $classes[] = 'wpset-main-menu-item';
    }
    return $classes;
}
add_filter('nav_menu_css_class', 'wpset_add_custom_class_to_menu_item', 10, 3);

Теперь каждый пункт главного меню будет иметь дополнительный класс wpset-main-menu-item, который удобно использовать в стилях или JavaScript.

Применение в CSS

Например, выделим пункт меню красным цветом при наведении:

.wpset-main-menu-item a:hover {
    color: #ff0000;
}

Практические советы по работе с меню в WordPress

1. Используйте локализацию – всегда оборачивайте текст в функции __() или _e() для поддержки многоязычности.

2. Проверяйте наличие меню перед выводом – это предотвращает ошибки, если меню не назначено.

3. Добавляйте свои CSS-классы и атрибуты через фильтры – это расширяет возможности кастомизации без изменения ядра темы.

4. Оптимизируйте мобильное меню – используйте JavaScript и CSS для создания адаптивных меню с выпадающими списками.

Расширение функционала: добавляем иконки к пунктам меню

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

function wpset_add_menu_icon_field($item_id, $item, $depth, $args) {
    $icon = get_post_meta($item_id, '_menu_item_icon', true);
    ?>
    <p class="field-icon description description-wide">
        <label for="edit-menu-item-icon-<?php echo $item_id; ?>">Иконка (CSS класс):</label>
        <input type="text" id="edit-menu-item-icon-<?php echo $item_id; ?>" class="widefat code edit-menu-item-icon" name="menu-item-icon[<?php echo $item_id; ?>]" value="<?php echo esc_attr($icon); ?>">
    </p>
    <?php
}
add_action('wp_nav_menu_item_custom_fields', 'wpset_add_menu_icon_field', 10, 4);

Далее сохраните значение и выведите иконку рядом с пунктом меню, модифицируя функцию вывода wpset_display_menu через фильтр walker_nav_menu_start_el. Это сложная тема, но она очень полезна для кастомизации.

Заключение

Создание и управление меню в WordPress с помощью хуков и собственных функций с префиксом wpset_ позволяет сделать ваш сайт гибким и удобным для пользователей. В этом материале мы рассмотрели регистрацию меню, вывод в шаблоне, добавление кастомных классов и дали базу для расширения функционала. Используйте эти примеры в своих проектах и улучшайте навигацию на сайте.