Как создать пользовательское мега-меню 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» к двум пунктам, к которым будет прикреплен выпадающий список мега-меню. Не забудьте нажать кнопку «Сохранить меню», когда закончите.

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

Теперь нужно зарегистрировать новые области виджетов (боковые панели) для каждого пункта меню с помощью 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» , подготовленной дружной командой проекта Интернет-технологии.ру