Comment construire WordPress Navigation en utilisant wp_nav_menu ()

1. Introduction
2. Principes de base d'un menu de navigation
3. Positions dans votre thème
4. Paramètres de réglage
5. Générer des menus à partir de WP Admin
6. Conclusion

Introduction

Chaque thème WordPress moderne devrait inclure de nombreux éléments communs dans le code. Le codage en dur d'une navigation manuelle fonctionne si vous avez déjà créé le contenu, mais il n'est pas très dynamique du tout.

La meilleure méthode serait de créer vôtre propre navigation WP par programme qu'un administrateur peut ensuite lier dans l'un de leurs propres menus.

Pour cet article, je voudrais passer en revue les principes fondamentaux que vous devez suivre lorsque vous créez votre propre navigation dans un thème. Spécifiquement en passant par les nombreuses options personnalisées et comment vous pouvez configurer un tout nouveau menu à partir de zéro. Vous n'aurez pas besoin de créer quoi que ce soit pour cet article, pensez-y plutôt comme à un guide de référence lors du codage.

Principes de base d'un menu de navigation

Avant les nombreux avancements de WordPress 3.0 les développeurs utilisaient généralement wp_page_menu() dans le développement du thème. Cela affichera une liste complète de pages avec un lien vers la page d'accueil, et vous avez quelques paramètres qui sont décrits dans le codex. Vous pouvez toujours l'utiliser dans votre zone latérale ou de pied de page si cela a du sens.

Mais la méthode de navigation beaucoup plus populaire est à travers le système de menu intégré de WordPress. Les administrateurs peuvent créer autant de menus personnalisés qu'ils le souhaitent, en faisant glisser et en déplaçant des liens pour créer une hiérarchie et une structure manuelle. Vous pouvez directement gérer des liens vers des articles, des pages, des catégories, des tags, etc.

La première étape consiste à écrire du code dans votre fichier functions.php qui crée le menu de navigation. Cela peut être fait avec register_nav_menu() ou register_nav_menus() si vous avez plusieurs objets. Ces menus ne nécessitent qu'un seul identifiant appelé $location avec une petite chaîne descriptive.

register_nav_menu( 'primary', 'Primary Menu' );

$location est plus comme un identifiant de slug utilisé pour identifier le menu dans votre thème. Vous référencerez cet élément défini dans n'importe quel fichier de thème PHP dont vous avez besoin. Notez également que les menus de navigation vont automatiquement initialiser le support des thèmes afin que vous n'ayez pas besoin d'utiliser add_theme_support() pour les menus.

Positions dans votre thème

Avec la configuration de votre (vos) menu (s) dans functions.php, nous devrions passer aux autres fichiers de thème. Commençons dans un endroit typique comme header.php où nous pouvons ajouter du code très basique. Cet exemple est copié à partir du wp_nav_menu() codex et inclut tous les paramètres optionnels.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

$defaults = array(
	'theme_location'  => '',
	'menu'            => '',
	'container'       => 'div',
	'container_class' => '',
	'container_id'    => '',
	'menu_class'      => 'menu',
	'menu_id'         => '',
	'echo'            => true,
	'fallback_cb'     => 'wp_page_menu',
	'before'          => '',
	'after'           => '',
	'link_before'     => '',
	'link_after'      => '',
	'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
	'depth'           => 0,
	'walker'          => ''
);
 
wp_nav_menu( $defaults );

Je vais approfondir ces options dans la section suivante. Mais je vais commencer par passer en revue les deux premiers. N'oubliez pas que tous ces éléments sont facultatifs, car les valeurs que vous voyez ci-dessus deviendront votre valeur par défaut si elles ne sont pas remplacées. theme_location devrait correspondre à la localisation que vous avez choisi lors de l'enregistrement du menu. C'est la seule valeur que vous devriez changer pour vous assurer qu'elle correspond bien.

Parfois, les gens confondent l'emplacement du menu avec menu car ils sont tous les deux très similaires. En fait, le menu devrait presque toujours être omis, ce qui permet au webmaster d'assigner son propre menu à cet endroit. Ce paramètre menu est utilisé pour inclure un menu d'administration prédéfini. Il devrait être identique à un menu préexistant qui a déjà été créé. Mais puisque la plupart des gens n'auront pas un menu existant (ou cela pourrait changer entre les sites Web), il est préférable de le laisser hors de la navigation de votre thème.

Paramètres de réglage

Les autres paramètres sont principalement pour la personnalisation, c'est pourquoi vous pouvez les ignorer. Mais attaquons le reste pour que nous comprenions bien les possibilités. container, container_class, et container_id sont bénéfiques lors du coiffage du menu. L'élément de conteneur externe entoure l'UL de sorte qu'il pourrait même être un <nav> HTML5 si vous aimez la sémantique.

Les menu_class et menu_id sont appliqués sur la liste non ordonnée elle-même. Chaque menu obtient une classe .menu, donc vous pourriez vouloir changer cela si vous en utilisez plus d'un. Le paramètre echo dit cette fonction pour sortir le menu HTML, sinon il retournera la valeur à une fonction ou une variable PHP. Lorsque wp_nav_menu() ne peut pas fonctionner pour une raison quelconque, il se repliera automatiquement à l'aide de wp_page_menu() comme je l'ai mentionné plus tôt.

Les deux prochains paramètres before et after sortiront tout HTML juste avant chaque lien d'ancrage, ou juste après les avoir fermés. link_before et link_after ajouteront HTML à l'intérieur des liens d'ancrage, juste avant et après le texte lui-même. Rappelez-vous ces options et assurez-vous de ne pas les mélanger ! En cas de doute, vérifiez le codex pour le soutien.

Maintenant, si vous ne voulez pas utiliser une liste non ordonnée, vous pouvez changer cela à l'intérieur items_wrap. Il utilise une syntaxe de type sprintf() pour remplacer les valeurs par des paramètres dynamiques dans la même fonction. %1$s fait référence à menu_id, %2$s fait référence à menu_class, et %3$s est lié à la sortie des éléments de la liste. Comme il faut beaucoup de travail supplémentaire pour changer les éléments <li> i est généralement préférable de laisser celui-ci seul.

Enfin le paramètre depth indique au menu la profondeur de la hiérarchie. Si notre navigation en-tête n'est qu'un menu déroulant à un seul niveau, nous n'avons besoin que d'un niveau de profondeur. Ou nous pouvons avoir un menu flyout à 2 niveaux qui pourrait utiliser 2 niveaux de profondeur. -1 est une valeur spéciale qui affiche tous les liens dans le menu, mais les condense ensemble dans le même niveau d'affichage.

Ensuite, l'article $walker est un paramètre spécial pour la personnalisation de la façon dont le contenu WordPress sorties dans une arborescence. Il attend un nouvel objet de classe qui inclut des méthodes personnalisées pour la sortie de l'élément. C'est un sujet assez avancé, mais vous pouvez en lire plus à ce sujet dans le Guide de référence de la classe Walker.

Générer des menus à partir de WP Admin

Ce dernier bit devrait fournir aux administrateurs et aux webmasters un meilleur moyen de comprendre les menus. Une fois connecté dans le panneau d'administration, cliquez sur "Apparence", puis sur le lien des menus.

De là, vous devez réorganiser les liens en organisant de l'accordéon gauche dans la section droite. Vous pouvez donner au menu un nom qui peut être référencé en PHP - mais remarquez en haut que vous verrez un menu de sélection déroulant. Une fois que vous enregistrez une navigation et lui attribuez un emplacement de thème, il apparaît dans cette liste déroulante que l'administrateur doit sélectionner. C'est ainsi que les webmasters peuvent organiser leurs propres menus sans avoir à coder de PHP.

Du côté gauche, vous pouvez choisir entre les pages, les posts, les liens, les catégories et les tags. Si vous cliquez sur le petit onglet près du coin supérieur droit étiqueté "Options d'écran", vous pouvez masquer certains de ces choix d'écran. Vous trouverez également des options de menu avancées pour donner une cible à chaque lien (comme target="_blank") ou même des classes CSS uniques.

Chaque lien de catégorie peut utiliser une classe différente pour les couleurs uniques lorsqu'il est sélectionné. Par défaut, vous donnerez à chaque lien du texte et une brève description, qui est souvent utilisée uniquement par l'administrateur du site. Les liens peuvent également avoir des attributs de titre et des valeurs XFN uniques.

Plus vous pratiquez en utilisant ce système de menu, plus il deviendra clair. En tant que développeur qui utilise WordPress depuis des années, je trouve cela très pratique. Les nouveaux arrivants qui sont en train d'apprendre les bases de WordPress peuvent toujours le relever rapidement sans trop de difficulté.

Conclusion

J'espère que ce regard en profondeur sur le système de navigation WordPress peut aider les nouveaux développeurs à se lancer directement dans les thèmes. Il existe évidemment d'autres aspects importants pour coder un thème. Mais la navigation est si cruciale et aussi quelque peu confuse si vous n'avez jamais construit quelque chose comme ça avant. Essayez ces exemples de codes PHP et voyez ce que vous pouvez faire en utilisant WordPress comme base de base.

Articles à lire

Concepts WordPress pour débutants. Petit guide et quelques comparaisons

Meilleurs plugins WordPress pour widgets Instagram 2020

5 meilleurs plugins WordPress iFrame 2020