Как создать пользовательское мега-меню 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 готово к работе.