Простой способ кастомизировать свое меню в теме WordPress
Зарегистрировать меню в functions.php
function register_my_menus() {
register_nav_menus( array(
'primary' => __( 'Primary Menu', 'student_theme' ),
'secondary' => __( 'Secondary Menu', 'student_theme' )
)
);
}
add_action( 'init', 'register_my_menus' );
У меня создано два меню, Primary Menu — главное и Secondary Menu — второстепенное
Далее выбрать подходящее меню из примера
За образец возьму Basic
Скачать архив скрипта https://superfish.joelbirch.co/
Из архива взять стили и скрипты указанные в примере
- superfish.css,
- hoverIntent.js,
- superfish.js
Подключить их в functions.php
wp_enqueue_style( 'superfish', get_template_directory_uri() . '/assets/css/superfish.css',false,'1.1');
wp_enqueue_script( 'script', get_template_directory_uri() . '/assets/js/script.js', array ( 'jquery' ), 1.1, true);
wp_enqueue_script( 'hoverIntent', get_template_directory_uri() . '/assets/js/hoverIntent.js', array ( 'jquery' ), 1.1, true);
wp_enqueue_script( 'superfish', get_template_directory_uri() . '/assets/js/superfish.js', array ( 'jquery' ), 1.1, true);
В script.js включить скрипт
jQuery(document).ready(function(){
jQuery('ul.sf-menu').superfish({
animation: {height:'show'}, // slide-down effect without fade-in
delay: 50 // 1.2 second delay on mouseout
});
});
Вывести меню в нужном месте
<?php wp_nav_menu( [
'container' => 'nav',
'container_class' => 'header-nav',
'menu_class' => 'sf-menu',
'theme_location' => 'secondary'
])?>
sf-menu — параметр определяющий стилизацию меню, вертикальная, горизонтальная и т.д.
