Comment créer un menu de navigation thématique dans WordPress (1)

Comment créer un menu de navigation thématique dans WordPress ? L’article suivant partagera avec vous plusieurs méthodes pour créer un menu de navigation de thème WordPress. J’espère qu’il vous sera utile !

Dans la production de thème WordPress, la création du menu de navigation est un point clé Le code HTML du menu de navigation a été écrit Comment l'appeler dynamiquement dans le thème WordPress ? Cet article vous présentera plusieurs méthodes d'écriture de code PHP pour implémenter dynamiquement la navigation. Cet article se concentrera uniquement sur le développement de code dynamique et ne vous apprendra pas comment écrire du HTML, CSS et Javascript pour implémenter un magnifique menu de navigation.

Production du menu personnalisé WP 3.0

Les versions après WordPress 3.0 commencent à prendre en charge les menus dynamiques personnalisés. Le menu dit dynamique permet aux utilisateurs de décider quels éléments ajouter au menu de navigation et d'accéder à la gestion WordPress Backend - Apparence -. Colonne Menu , vous pouvez créer votre propre menu en faisant glisser la colonne correspondante. C’est une bonne chose pour les développeurs de thèmes WordPress et les utilisateurs. Pour implémenter un menu personnalisé, la fonction que vous devez utiliser est wp_nav_menu(). Passer certains paramètres à cette fonction peut générer le menu personnalisé. Parlons brièvement de la façon d'utiliser cette fonction.

Tout d'abord, ajoutez le code d'enregistrement de menu suivant entre b399ff61f037ca21c110ee9375daf4f1 dans function.php dans le répertoire du thème, afin de pouvoir utiliser la fonction wp_nav_menu dans le fichier du thème :

// This theme uses wp_nav_menu() in one location.
register_nav_menus();

Ensuite, nous appelons wp_nav_menu() sur la barre de navigation du thème pour afficher le code HTML du menu de navigation :

<?php 
    // 列出顶部导航菜单，菜单名称为mymenu，只列出一级菜单
    wp_nav_menu( array( &#39;menu&#39; => &#39;mymenu&#39;, &#39;depth&#39; => 1) );
?>

Le code HTML généré par le code ci-dessus se présente sous la forme suivante :

<div class="menu-menu-container">
    <ul class="menu" id="menu-menu">
        <li class="..." id="menu-item-1"><a href="...">首页</a></li>
        <li class="..." id="menu-item-2"><a href="...">分类A</a></li>
        ...
    </ul>
</div>

Les éléments li répertoriés ici sont pour vous Colonne ajoutée dans Backstage - Apparence - Menu, si vous n'avez pas ajouté de menu en arrière-plan, la barre de navigation listera toutes les pages. De plus, wp_nav_menu ajoutera une classe à chaque li. Différentes classes marquent les attributs de cet élément de menu. Par exemple, si une page d'article est actuellement ouverte, Catégorie A est la catégorie à laquelle appartient cet article, alors Catégorie A. se trouve li ressemblera au code suivant :

<li class="menu-item menu-item-type-taxonomy current-post-ancestor current-menu-parent current-post-parent menu-item-5" id="menu-item-2"><a href="...">分类A</a></li>

S'il se trouve sur la page d'accueil, alors le li de l'élément de menu sur la page d'accueil peut ressembler à ceci :

<li class="menu-item menu-item-type-custom current-menu-item current_page_item menu-item-home menu-item-4" id="menu-item-1"><a href="..">首页</a></li>

Vous pouvez connaître leurs fonctions depuis le noms de ces classes. En donnant ces attributs CSS à la classe, vous pouvez atteindre l'objectif de mettre en évidence le menu de navigation actuel, comme définir le lien du menu actuel en rouge :

.current-post-ancestor a, .current-menu-parent a, .current-menu-item a, .current_page_item a {
    color: red;
}

Eh bien, appeler le menu personnalisé de WordPress 3.0 est ainsi simple. wp_nav_menu a également de nombreux paramètres, tels que le nœud ul personnalisé, les paramètres d'identification et de classe du nœud parent ul, etc.

Utiliser les catégories et les pages comme barres de navigation

Avant WordPress 3.0, la plupart des thèmes WordPress utilisaient des pages comme barres de navigation, et vous ne pouviez ajouter que des pages dans la navigation, ce qui ne semblait pas assez gratuit. Lorsque j'ai commencé à utiliser WordPress 2.7, j'étais inquiet de ce problème. Finalement, j'ai parcouru la documentation, vérifié certaines informations et réalisé l'ajout de catégories dans la navigation. Pour plus de détails, veuillez consulter l'article que j'ai écrit auparavant : Les catégories WordPress sont créées. barres de navigation et affichage des surbrillance élevée

Production d'une barre de navigation non conventionnelle

Les deux méthodes mentionnées ci-dessus sont toutes implémentées à l'aide des fonctions fournies avec WordPress. Les codes HTML qu'ils saisissent sont également limités, c'est-à-dire en utilisant ul li. Pour construire la liste de menus sous la forme : telle que :

<ul>
    <li class="..">...</li>
    <li class="..">...</li>
</ul>

Si le code front-end du thème n'est pas écrit par vous, et que le code à barres de navigation est très mal écrit, ce n'est pas le standard WordPress ci-dessus ul formulaire de barre de navigation, comme indiqué ci-dessous Code :

<dl>
    <dt><strong>标题</strong></dt>
    <dd><a target="_blank" title="#" href="#">菜单A</a></dd>
    <dd><a target="_blank" title="#" href="#">菜单B</a></dd>
</dl>

Réécrire le code frontal ? Je pense que personne n’est prêt à faire ça, alors que devrions-nous faire ? De plus, que se passe-t-il si la barre de navigation n'utilise pas de catégories et de pages et ne permet pas l'utilisation de menus personnalisés ? Dans les applications réelles, nous rencontrerons également des exigences diverses et étranges. Nous continuerons à explorer cette question dans le prochain numéro !

Apprentissage recommandé : "Tutoriel WordPress"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!