Главная/WordPress Fullstack/Блупринты/Кастомные темы/Разработка адаптивного Mega-Menu с кастомным Walker_Nav_Menu и иконками
К карточкам раздела «Кастомные темы»
Кастомные темы(ТЗ 22 из 54)
ТЗ: Разработка адаптивного Mega-Menu с кастомным Walker_Nav_Menu и иконками
Кастомные темы5 шагов • +25 XP

ТЗ: Разработка адаптивного Mega-Menu с кастомным Walker_Nav_Menu и иконками

Реализация сложной многоуровневой навигации: расширение Walker_Nav_Menu, кастомные поля пунктов меню в админке, сетка на CSS Grid, баннеры в выпадающих блоках и клавиатурная доступность A11y.

~10 ч работыУровень: MiddlePHP 8.3 OOPWalker_Nav_Menuwp_nav_menu_item_custom_fieldsCSS Grid & FlexboxKeyboard A11y (ARIA)Vanilla JS Mobile Drawer
+5 XP за шаг
Выполнено 0 из 5 шагов (0%)
Трудозатраты~10 рабочих часов
Фриланс вилка~$450 – $750 (€400 – €700)
Оценка веб-студии~$950 – $1,600 (€900 – €1500)

ТЗ заказчика (исходный бриф):

«В шапке интернет-магазина и корпоративного каталога стандартный список wp_nav_menu не подходит. Дизайнер нарисовал трехуровневое выпадающее мега-меню: в рубриках нужны иконки, бейджи «Хит/Новинка», а в правом углу выпадающей панели — рекламный баннер. Меню должно управляться контент-менеджером в админке без правки кода и работать на мобильных.»
Ключевые требования:
  • •Полноширинная выпадающая панель Mega-Menu для родительских пунктов 1-го уровня
  • •Возможность прикреплять к пунктам меню бейджи («New», «Sale»), SVG-иконку и текст подписи
  • •Возможность вставки промо-баннера с ссылкой в правую колонку выпадающего списка
  • •Клавиатурная навигация: открытие по Tab/Enter, переходы стрелками, закрытие по Escape
  • •Адаптивный мобильный вид с аккордеоном или шторкой без jQuery
Ограничения проекта:
  • •Управление строго через стандартную панель WordPress: «Внешний вид → Меню»
  • •Запрет на коммерческие плагины мега-меню (UberMenu, Max Mega Menu)
  • •Минимальное количество SQL-запросов (0 дополнительных запросов в цикле меню)
Критерии приёмки (KPI):
  • 0 дополнительных SQL-запросов (все метаданные загружаются пакетом)
  • 100% соответствие стандарту доступности W3C WAI-ARIA Menu pattern
  • Плавная анимация появления (CSS GPU-accelerated opacity/transform)
  • Корректная работа на touch-устройствах (первый тап открывает подменю, второй переходит)

Конфигурация блупринта под условия проекта

Выберите архитектуру и стек — шаги роадмапа, структура файлов и примеры кода переключатся автоматически:

Пошаговое практическое руководство по ТЗ

Подробный разбор архитектуры, код реализации и советы эксперта по каждому этапу:

1
Этап 1 из 5

Добавление кастомных полей к пунктам меню в админке

~40 минСредний

Практическое руководство:

На хуке wp_nav_menu_item_custom_fields зарегистрируйте кастомные поля для пункта меню: "Стиль мега-меню" (чекбокс), "Бейдж" (текстовая строка) и "Иконка" (название Dashicon или Lucide).

План и контрольные точки реализации:
1Подключить хук wp_nav_menu_item_custom_fields
2Добавить чекбокс включения Mega-Menu и поля для бейджа/иконки
3Реализовать сохранение в wp_update_nav_menu_item с защитой nonce
4Убедиться, что значения сохраняются при перезагрузке страницы меню
Важные технические нюансы и подводные камни:

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

Ожидаемый артефакт этапа:

Административный интерфейс для управления параметрами каждого пункта меню.

PHP
<?php
// functions.php - Кастомные поля в меню админки
declare(strict_types=1);

add_action('wp_nav_menu_item_custom_fields', function (int $item_id): void {
    $is_mega = get_post_meta($item_id, '_menu_item_is_mega', true);
    $badge   = get_post_meta($item_id, '_menu_item_badge', true);
    $icon    = get_post_meta($item_id, '_menu_item_icon', true);
    ?>
    <p class="field-is-mega description description-wide">
        <label for="edit-menu-item-is-mega-<?php echo esc_attr((string) $item_id); ?>">
            <input type="checkbox" id="edit-menu-item-is-mega-<?php echo esc_attr((string) $item_id); ?>" 
                   name="menu-item-is-mega[<?php echo esc_attr((string) $item_id); ?>]" value="1" <?php checked($is_mega, '1'); ?> />
            <strong>Включить отображение Mega-Menu для этого раздела</strong>
        </label>
    </p>
    <p class="field-badge description description-thin">
        <label for="edit-menu-item-badge-<?php echo esc_attr((string) $item_id); ?>">
            Текст бейджа (напр. "Хит" или "New"):<br />
            <input type="text" id="edit-menu-item-badge-<?php echo esc_attr((string) $item_id); ?>" 
                   name="menu-item-badge[<?php echo esc_attr((string) $item_id); ?>]" 
                   value="<?php echo esc_attr((string) $badge); ?>" class="widefat" />
        </label>
    </p>
    <p class="field-icon description description-thin">
        <label for="edit-menu-item-icon-<?php echo esc_attr((string) $item_id); ?>">
            Иконка (название класса):<br />
            <input type="text" id="edit-menu-item-icon-<?php echo esc_attr((string) $item_id); ?>" 
                   name="menu-item-icon[<?php echo esc_attr((string) $item_id); ?>]" 
                   value="<?php echo esc_attr((string) $icon); ?>" class="widefat" />
        </label>
    </p>
    <?php
}, 10, 1);

add_action('wp_update_nav_menu_item', function (int $menu_id, int $menu_item_db_id): void {
    check_admin_referer('update-nav_menu', 'update-nav-menu-nonce');

    $is_mega = isset($_POST['menu-item-is-mega'][$menu_item_db_id]) ? '1' : '';
    update_post_meta($menu_item_db_id, '_menu_item_is_mega', $is_mega);

    if (isset($_POST['menu-item-badge'][$menu_item_db_id])) {
        $badge = sanitize_text_field((string) $_POST['menu-item-badge'][$menu_item_db_id]);
        update_post_meta($menu_item_db_id, '_menu_item_badge', $badge);
    }

    if (isset($_POST['menu-item-icon'][$menu_item_db_id])) {
        $icon = sanitize_text_field((string) $_POST['menu-item-icon'][$menu_item_db_id]);
        update_post_meta($menu_item_db_id, '_menu_item_icon', $icon);
    }
}, 10, 2);
2
Этап 2 из 5

Создание класса Custom_Mega_Menu_Walker на базе Walker_Nav_Menu

~55 минСложный
3
Этап 3 из 5

Вёрстка CSS Grid сетки выпадающей панели и промо-баннера

~35 минСредний
4
Этап 4 из 5

Реализация доступности A11y и управления с клавиатуры

~30 минСредний
5
Этап 5 из 5

Мобильная версия: бургер и аккордеон подкатегорий

~35 минЛегкий

Типичные грабли на этом ТЗ

2 антипаттерна

Инструменты экосистемы Fullstack AI Lab для этого ТЗ

Интеграция