Как сделать такое меню на WordPress?

WordPress

1 ответ

Здравствуйте!

Подскажите пожалуйста - как правильно создаеть такое меню для Wordpress?

1. Оно dropdown
2. У него есть подзаголовки
3. Есть виджеты

Дополнительно:

Сверстать самому, или использовать плагин для мега меню

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

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь

Лучший ответ

Роман IT Ответ

Такое меню в WordPress обычно называется mega menu. Делать его можно двумя путями: готовым плагином для мегаменю или своим шаблоном меню в теме. Если в меню есть dropdown, подзаголовки, колонки, виджеты, баннеры и сложная правая часть, обычного раздела Внешний вид → Меню часто недостаточно.

Самый быстрый путь — плагин:

Max Mega Menu;
QuadMenu;
JetMenu, если проект на Crocoblock/Elementor;
мегаменю из вашей темы, если тема уже это поддерживает.

Плагин нормален, если задача типовая: колонки, иконки, виджеты, Elementor-блоки внутри выпадающего меню. Но если дизайн сильно кастомный, лучше сверстать блок в теме и выводить его через wp_nav_menu() плюс отдельные области.

Пример регистрации двух меню:

add_action( 'after_setup_theme', function () {
    register_nav_menus( [
        'header_main' =&gt; 'Главное меню',
        'mega_side'   =&gt; 'Боковое меню в мегаменю',
    ] );
} );

add_action( 'after_setup_theme', function () { register_nav_menus( [ 'header_main' => 'Главное меню', 'mega_side' => 'Боковое меню в мегаменю', ] ); } );

В шаблоне можно вывести верхнее меню отдельно, а выпадающий мегаблок — отдельной разметкой:

&lt;nav class="header-nav"&gt;
    &lt;?php wp_nav_menu( [ 'theme_location' =&gt; 'header_main' ] ); ?&gt;
 
    &lt;div class="mega-menu"&gt;
        &lt;div class="mega-menu__side"&gt;
            &lt;?php wp_nav_menu( [ 'theme_location' =&gt; 'mega_side' ] ); ?&gt;
        &lt;/div&gt;
        &lt;div class="mega-menu__content"&gt;
            &lt;?php dynamic_sidebar( 'mega-menu-widget-area' ); ?&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/nav&gt;

<nav class="header-nav"> <?php wp_nav_menu( [ 'theme_location' => 'header_main' ] ); ?> <div class="mega-menu"> <div class="mega-menu__side"> <?php wp_nav_menu( [ 'theme_location' => 'mega_side' ] ); ?> </div> <div class="mega-menu__content"> <?php dynamic_sidebar( 'mega-menu-widget-area' ); ?> </div> </div> </nav>

Если внутри выпадающего блока должны быть виджеты, зарегистрируйте sidebar:

add_action( 'widgets_init', function () {
    register_sidebar( [
        'name' =&gt; 'Mega menu area',
        'id'   =&gt; 'mega-menu-widget-area',
    ] );
} );

add_action( 'widgets_init', function () { register_sidebar( [ 'name' => 'Mega menu area', 'id' => 'mega-menu-widget-area', ] ); } );

Для сложного меню лучше не пытаться запихнуть всё в один пункт меню. Верхняя навигация, боковые категории и правая промо-область могут быть разными источниками данных. Так проще поддерживать и не ломать админку.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий Отменить ответ

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 0 ответов Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 0 ответов печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 0 ответов VPN Почему подключение через VPN работает только на wi-fi, а через кабель нет, где ошибка? 0 ответов

Как сделать такое меню на WordPress?

Дополнительно:

комментарий Отменить ответ

Вам также может быть интересно

Ежедневно, круглосуточно