Как создать пользовательское мега-меню WordPress без применения плагинов

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

В разрабатываемом меню есть место, которое будет содержать пункты. Каждый элемент меню из этого места сможет «размещать» виджеты «внутри себя». Этими виджетами может быть все что угодно: дополнительные меню, текстовые области до изображения, статьи и т.д.

Регистрация выделенного места в меню

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

Открываем файл functions.php рабочей темы и добавляем в него следующие строки кода:

<? PHP

// ...

function  wpmm_setup () {
    register_nav_menus ( array (
        ' mega_menu '  =>  ' Mega Menu'
    ));
}
add_action ( ' after_setup_theme ' , ' wpmm_setup ' );

Теперь добавим в меню несколько пунктов.

Регистрация выделенного места в меню

Обратите внимание, что виджеты будут прикреплены не ко всем пунктам меню. Поэтому нужно как-то различать пункты, которые будут содержать в виджеты.

Мы будем использовать параметр «Классы CSS». Если вы не видите его, нажмите на кнопку «Параметры экрана», расположенную в правом верхнем углу окна и выберите «Классы CSS».

Теперь добавим класс «has-mega-menu» к двум пунктам, к которым будет прикреплен выпадающий список мега-меню. Не забудьте нажать кнопку «Сохранить меню», когда закончите.

Регистрация выделенного места в меню - 2

Динамическая регистрация боковой панели (области виджетов)

Теперь нужно зарегистрировать новые области виджетов (боковые панели) для каждого пункта меню с помощью CSS-класса «has-mega-menu». Для этого мы создадим новую функцию, которая подключается к действию «widgets_init».

В этой функции мы будем перебирать все пункты меню в «mega_menu». А также в каждой итерации проверять, содержит ли пункт меню CSS-класс «has-mega-menu» или нет. Если да, то создаем новую область виджета для этого пункта меню, с помощью функции register_sidebar.

<? PHP

// ...

function  wpmm_init () {
$ location  =  ' mega_menu ' ;
$ css_class  =  ' has-mega-menu ' ;
$ location  = get_nav_menu_locations ();
if ( isset ( $ location [ $ location ])) {
$ menu  = get_term ( $ location [ $ location ], ' nav_menu ' );
if ( $ items  = wp_get_nav_menu_items ( $ menu -> name )) {
foreach ( $ items  как  $ item ) {
if ( in_array ( $ css_class , $ item -> classes )) {
register_sidebar ( array (
 ' id '    =>  ' mega-menu-widget-area- '  .  $ item -> ID ,
                        ' name '  =>  $ item -> title  .  ' Mega Menu' ,
                    ));
                }
            }
        }
    }
}
add_action ( ' widgets_init ' , ' wpmm_init ' );

Если мы перейдем в панели администрирования в раздел меню «Внешний вид» - «Виджеты», то увидим две новые области для размещения виджетов. У каждого пункта меню есть один CSS-класс «has-mega-menu» (Solutions и Company).

Динамическая регистрация боковой панели (области виджетов)

Рендеринг

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

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header>
<ul class="mega-menu">
<?php
$locations = get_nav_menu_locations();
if ( isset( $locations[ 'mega_menu' ] ) ) {
$menu = get_term( $locations[ 'mega_menu' ], 'nav_menu' );
if ( $items = wp_get_nav_menu_items( $menu->name ) ) {
foreach ( $items as $item ) {
echo "<li>";
echo "<a href="{$item->url}">{$item->title}</a>";
if ( is_active_sidebar( 'mega-menu-widget-area-' . $item->ID ) ) {
echo "<div id="mega-menu-{$item->ID}" class="mega-menu">";
dynamic_sidebar( 'mega-menu-widget-area-' . $item->ID );
echo "</div>";
}
echo "</li>";
}
 }
 }
  ?>
   </ul>
</header>

Теперь у вас есть собственное мега-меню WordPress, созданное с помощью всего 25 строк кода и без плагинов.

Работа выполнена! Ваше собственное мега-меню WordPress готово к работе.

Пожалуйста, опубликуйте ваши отзывы по текущей теме материала. За комментарии, дизлайки, лайки, отклики, подписки низкий вам поклон!

Пожалуйста, оставляйте свои отзывы по текущей теме статьи. Мы крайне благодарны вам за ваши комментарии, подписки, отклики, дизлайки, лайки!

Вадим Дворниковавтор-переводчик статьи «How to Create a Fully Custom WordPress Mega Menu – No Plugins Attached»