Как создать пользовательское мега-меню WordPress без применения плагинов
Создание мега-меню на WordPress без плагинов – это отличный способ улучшить навигацию на сайте, не перегружая его дополнительными инструментами. В статье рассматривается пошаговый процесс создания стильного и функционального меню с помощью только стандартных возможностей WordPress.
Узнайте, как использовать CSS и JavaScript для оформления и настройки меню, а также какие преимущества такой подход дает для производительности вашего сайта. Простые и доступные методы помогут вам создать профессиональное меню без лишних усилий.
Регистрация выделенного места в меню
Для начала нам нужно зарегистрировать новое меню. Это нужно сделать, чтобы на сайте было определенное место для размещения нашего мега-меню 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 готово к работе.
Комментарии
Хорошая статья, а из плагинов что выбрать?