Головна/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, повна клавіатурна доступність та мобільне меню-акордеон.

~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)

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

У нашому інтернет-магазині понад 30 категорій товарів. Стандартне випадаюче меню WordPress незручне. Потрібно розробити багаторівневе Mega-Menu з іконками категорій, банерами акцій, повною підтримкою клавіатури та мобільним акордеоном.
Ключевые требования:
  • •Кастомні поля для пунктів меню в адмінці: вибір SVG-іконки, текст бейджа ('NEW', 'TOP') та чекбокс Mega-Menu
  • •PHP-клас на базі Walker_Nav_Menu з генерацією семантичної розмітки та атрибутів ARIA
  • •Сітка CSS Grid для випадаючих панелей із розміщенням промо-банерів поруч із категоріями
  • •Повна доступність WCAG 2.1 AA: підтримка Tab, стрілок, закриття через Escape, атрибути aria-expanded
  • •Адаптивне мобільне меню зі шторкою та плавними акордеонами підкатегорій
Ограничения проекта:
  • •Жодних сторонніх плагінів меню (Max Mega Menu, UberMenu) — тільки чистий нативний код
  • •Повна сумісність зі стандартним розділом керування меню Зовнішній вигляд > Меню
  • •Відсутність зсуву макета (CLS = 0) під час відкриття та закриття списків
Критерии приёмки (KPI):
  • 100% проходження тесту доступності WCAG 2.1 AA
  • Розмір JavaScript-файлу меню < 8КБ gzipped
  • Видимий клавіатурний фокус та утримання фокусу всередині відкритих панелей

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

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

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

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

1
Этап 1 из 5

Крок 1: Додавання кастомних полів до пунктів меню в адмінці

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

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

Підключіться до хука wp_nav_menu_item_custom_fields. Додайте поля: чекбокс 'Mega Menu', текстові поля 'Клас іконки' та 'Текст бейджа', вибір зображення промо-банера. Зберігайте значення через wp_update_nav_menu_item.

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

Очищуйте всі значення полів перед збереженням за допомогою sanitize_text_field та boolval.

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

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

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

Крок 2: Створення класу Custom_Mega_Menu_Walker на базі Walker_Nav_Menu

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

Крок 3: Верстка CSS Grid сітки випадаючої панелі та промо-банера

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

Крок 4: Реалізація доступності A11y та керування з клавіатури

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

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

~35 минЛегкий

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

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

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

Интеграция