Comment WordPress appelle-t-il le menu personnalisé de la barre de navigation secondaire/multiniveau ?

KutaMarketing en ligneles gens choisissentOutils de gestionVienscréer un site Web, mais la barre de navigation de certains thèmes ne prend pas en charge les menus secondaires/à plusieurs niveaux. Si vous n'êtes pas satisfait, vous pouvez essayer d'ajouter et de modifier manuellement le style de menu du thème.

La modification commence à partir de header.php Une fonction importante dans ce fichier template est l'affichage du menu.

Si vous utilisez le code pour appeler la catégorie sous forme de menu, il est également possible, mais ce n'est pas pratique de trier les éléments de menu.

Les répertoires avec des sous-catégories ne sont pas faciles à gérer, je souhaite donc également ajouter des fonctions de menu personnalisées à mon thème, tout comme les autres thèmes.

Il n'est pas difficile d'ajouter une fonction de personnalisation de menu au thème nouvellement créé, il y a principalement 2 étapes.

La première étape, l'enregistrement du menu WordPress

Pour utiliser le menu, vous devez d'abord vous inscrire, ouvrir le fichier de fonctions sous le thème et ajouter le code suivant ▼

<?php
//自定义菜单
if (function_exists('register_nav_menus')) {
register_nav_menus( array( 'top_navi' => __('顶部菜单') ) );
register_nav_menus( array( 'menu_navi' => __('站点导航') ) );
register_nav_menus( array( 'foot_navi' => __('底部菜单') ) );
}
?>

• S'il n'y a pas de fichier functions.php sous le thème, créez-en un nouveau et copiez le code ci-dessus pour l'enregistrer.

Connectez-vousMoteur WordPress, puis accédez à Apparence→Menu.

Si vous pouvez voir l'écran ci-dessous, cela signifie que vous êtes enregistré en tant que ▼

Ce qui précède enregistre 2 menus :

1. Un menu supérieur Top Menubar.
2. un menu principal Main barre de menu.

La deuxième étape, l'appel de menu WordPress

Une fois le menu enregistré, il peut être appelé dans le fichier de modèle de thème. Insérez le code suivant dans le fichier header.php et vous pourrez l'appeler à l'endroit où vous souhaitez afficher le menu.

Dans le fichier header.php, appelez le "top menu"▼

//顶部菜单调用
<?php wp_nav_menu(array('theme_location' => 'top_navi')); ?>

Dans le fichier header.php, appelez le "menu principal"▼

//主菜单调用
<div id="menu"><?php if(function_exists('wp_nav_menu')) {
wp_nav_menu(array('theme_location'=>'menu_navi','menu_id'=>'nav','container'=>'ul'));
} ?> </div>

'menu_navi')); ?>

Appelez le "menu du bas" dans le fichier footer.php▼

//底部菜单调用
<?php wp_nav_menu(array('theme_location' => 'foot_navi')); ?>

Étape XNUMX : Menu des paramètres

Une fois le menu enregistré et la position d'affichage du menu définie dans le fichier de thème, vous pouvez créer un nouvel élément de menu dans l'arrière-plan de WordPress.

Ensuite, affectez l'élément de menu nouvellement créé au menu enregistré et suggérez la relation correspondante ▼

Créer une barre de navigation de menu à plusieurs niveaux pour WordPress

Parlons maintenant de la façon de créer un menu WordPress à plusieurs niveaux :

Supprimez d'abord le code de menu d'origine dans le fichier de fonctions de votre propre thème WordPress.

ou ajoutez directement ce code ▼

<?php if ( function_exists('register_nav_menus') ) {register_nav_menus(array('primary' => '主导航菜单'));}?>

• Remarque : doit être dansAjouté à l'extérieur.

Ensuite, trouvez le code PHP du thème pour appeler le menu, s'il est brut, c'est généralement comme ça ▼

<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>

retirez-le et remplacez-le par ▼

<div id="menu"><?php if(function_exists('wp_nav_menu')) {
wp_nav_menu(array('theme_location'=>'primary','menu_id'=>'nav','container'=>'ul'));
} ?> </div>

• Remarque : Assurez-vous que ce code ne contient pas d'autres divs, sinon il sera délimité par le div externe.

L'étape suivante consiste à ajouter le code de fonction JS déroulant et à ajouter le code suivant au fichier JS du thème ▼

jQuery(document).ready(function($) {
$('#nav li').hover(function() {
$('ul', this).slideDown(200)},
function() {$('ul', this).slideUp(300)});});

Styles CSS des menus WordPress

Enfin, l'embellissement du style CSS.

Quel type d'effet devrait être, laissez libre cours à votre imagination, CSS peut le faire ▼

#menu {position:relative;width:99%;margin:0 5px 0 5px;height:36px;background: #f6f6f6 url("images/jtyu.jpg");}
#menu li{border-right:0px #ace solid;}
#nav{margin-left:30px;width:900px;height:36px;}
#nav li{font-size:14px;width:100px;line-height:30px;float:left;background: #f6f6f6 url("images/iol.jpg");border-bottom:0px #fff solid}
#nav li a{line-height:36px;color:#fff;text-align:center;display:block;background:url("images/beg.png") no-repeat;margin:0;}
#nav li a:hover{background:url("images/oilu.png") no-repeat center;color:#f03;}
.sub-menu {height:36px;float:left;position:absolute;text-align:center;display:none;}
.sub-menu a {border-top:0px #fff solid;height:36px;color:#fff; text-decoration:none; line-height:36px; text-align:center; padding:0 20px; display:block; _width:48px;}

• Ajoutez le code CSS ci-dessus au fichier style.css du thème et enregistrez-le.

Après avoir enregistré, actualisez la page d'accueil de votre site Web, vous pouvez voir l'effet, est-ce très simple ?