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

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

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

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

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

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

<? PHP//...function wpmm_setup() { register_nav_menus( array( ' mega_menu ' => ' Mega Menu'));}add_action( ' after_setup_theme ', ' wpmm_setup ');

Сейчас добавим в меню пару пунктов.

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

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

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

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

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

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

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

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

Рендеринг

Для 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 готово к работе.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *