Principal/WordPress Fullstack/Blueprints/Temas personalizados/Desarrollo de Mega-Menu adaptativo con Walker_Nav_Menu personalizado e iconos
Volver a tarjetas «Temas personalizados»
Temas personalizados(ТЗ 22 из 54)
Especificación: Desarrollo de Mega-Menu adaptativo con Walker_Nav_Menu personalizado e iconos
Temas personalizados5 шагов • +25 XP

Especificación: Desarrollo de Mega-Menu adaptativo con Walker_Nav_Menu personalizado e iconos

Navegación avanzada en múltiples columnas: extensión de Walker_Nav_Menu, campos personalizados en el panel de administración (insignias, iconos, banners), cuadrícula CSS Grid, accesibilidad con teclado y cajón móvil.

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

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

Nuestra tienda cuenta con más de 30 categorías. El menú desplegable por defecto de WordPress es inmanejable. Necesitamos un mega-menú moderno en varias columnas con iconos, banners de promociones, accesibilidad total por teclado y un acordeón móvil fluido.
Ключевые требования:
  • •Campos personalizados en el menú de administración: selector de icono SVG, texto de insignia ('NUEVO', 'TOP') y casilla de mega-menú
  • •Clase PHP que extienda Walker_Nav_Menu con marcado semántico y atributos ARIA
  • •Diseño en cuadrícula CSS Grid para paneles desplegables con espacio para banners destacados
  • •Accesibilidad completa WCAG 2.1 AA: navegación con Tab y flechas, cierre con Escape y estados aria-expanded
  • •Cajón de navegación móvil con botón de hamburguesa y acordeones para subcategorías
Ограничения проекта:
  • •Sin plugins de mega-menú de terceros (Max Mega Menu, UberMenu) — código nativo ligero
  • •Compatibilidad total con la interfaz nativa Apariencia > Menús de WordPress
  • •Cero desplazamiento acumulado del diseño (CLS = 0) al abrir o cerrar paneles
Критерии приёмки (KPI):
  • Aprobación del 100% en auditoría de accesibilidad WCAG 2.1 AA
  • Paquete JavaScript del menú < 8KB gzipped
  • Foco de teclado visible y contenido dentro del panel desplegable activo

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

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

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

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

1
Этап 1 из 5

Paso 1: Campos personalizados para elementos de menú en administración

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

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

Utilice el gancho wp_nav_menu_item_custom_fields para añadir: casilla 'Es Mega Menú', campo de texto para icono SVG, texto de insignia y banner promocional. Guarde mediante wp_update_nav_menu_item.

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

Sanee todos los valores con sanitize_text_field y boolval antes de almacenarlos en post meta.

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

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

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

Paso 2: Clase Custom_Mega_Menu_Walker basada en Walker_Nav_Menu

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

Paso 3: Maquetación CSS Grid del panel desplegable y banners

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

Paso 4: Accesibilidad A11y y lógica de navegación con teclado

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

Paso 5: Versión móvil: menú hamburguesa y acordeones

~35 минЛегкий

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

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

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

Интеграция