Lorsque WordPress 3 nous a présenté la nouvelle fonctionnalité Menus, cela a changé notre façon de voir les menus de navigation. Nous n'étions plus obligés d'utiliser les fonctions normales de liste de pages ou de créer nos propres fonctions de menu personnalisées pour intégrer les menus de catégories et de pages ainsi que les éléments liés de manière externe ou physique dans un menu de navigation. Mais à quel point pouvons-nous nous adapter à cette nouvelle fonctionnalité? Dans ce tutoriel, nous allons plonger profondément dans tout ce que le wp_nav_menu que la fonction peut faire, utilisez la classe Walker pour ajouter une sous-description et touchez certaines de ses fonctions associées.
Les paramètres
La fonction a plusieurs paramètres à utiliser. Voici les valeurs par défaut répertoriées dans le codex WordPress.org:
En utilisant ce paramètre, nous pouvons définir un emplacement de thème qui sera ensuite utilisé sur la page Menus pour définir un menu de manière à ce qu'il fonctionne dans cette partie de votre thème, sans avoir à définir manuellement le menu qui doit y apparaître. Cela est très utile pour les distributeurs de thèmes car vous pouvez utiliser des conditions pour afficher un menu uniquement si l'utilisateur a défini un menu pour cet emplacement. La seule autre exigence est que vous utilisiez la fonction register_nav_menu () pour enregistrer ces lieux. Cela se fait généralement à partir de vos fichiers de fonction lorsque vous configurez la prise en charge des menus..
Commençons par construire nos paramètres de fonction de menu personnalisés en supposant que nous ayons enregistré un emplacement de thème appelé "primaire".
Ce paramètre permet de définir manuellement le menu à utiliser. Dans notre exemple, nous définissons uniquement un emplacement de menu générique et non pas un emplacement exact à utiliser, mais si nous voulions indiquer à la fonction d'utiliser un menu appelé "Navigation principale", nos paramètres ressembleraient à ceci:
Par défaut, notre menu sera enveloppé dans un div, mais si vous êtes comme moi, vous n’avez généralement pas besoin de cela et vous voulez probablement réduire la quantité de divs et d’autres balises étant utilisées pour garder votre code aussi propre que possible. Vous pouvez également utiliser ce paramètre pour définir une autre balise telle qu'un html5. ou . Dans notre exemple, nous ne souhaitons pas qu'un conteneur modifie les valeurs de conteneur par défaut, car les styles de thème Twenty Eleven dépendent de sa présence..
Classe de conteneur et ID de conteneur
Comme vous pouvez le deviner, ces paramètres permettent de définir une classe et un ID pour le conteneur. Puisque nous l'omettons complètement, nous n'avons pas besoin de définir des valeurs.
Classe de menu et ID de menu
Celles-ci fonctionnent exactement comme les paramètres précédents, sauf que cette fois nous voulons définir un identifiant de "nav"parce que c'est l'identifiant que nous utiliserons dans notre feuille de style pour styler la barre de navigation.
Vous pouvez utiliser ce paramètre pour indiquer si vous souhaitez afficher (afficher) les résultats, ou les renvoyer pour une utilisation en PHP. Cet élément est booléen, donc pour le retourner, il suffit de définir ce paramètre sur 0.
CB de secours
C'est une fonction de rappel que vous pouvez utiliser si aucun menu n'est trouvé. Par défaut, il utilise l'ancien stand-by wp_page_menu () et passe tous les mêmes paramètres à cette fonction aussi bien.
Avant et après
Ces éléments permettent de définir ce qui peut être placé avant et après les balises d'ancrage (). Vous pouvez les utiliser pour faire précéder chaque élément d’une barre verticale ou pour envelopper les éléments de navigation dans une balise span.
Lien avant et lien après
Celles-ci fonctionnent de la même manière que les éléments précédents que nous avons abordés, sauf que tout ce que vous définissez sera à l'intérieur des balises d'ancrage. Notre exemple ne nécessite pas que nous les utilisions, nous les ignorons et laissons l'élément vide par défaut.
Articles d'emballage
Par défaut, les éléments sont encapsulés dans une liste non ordonnée avec l'id et la classe de menu. Ce paramètre vous permet de changer cela si vous le souhaitez.
Profondeur
Ce paramètre est très utile lorsque vous souhaitez utiliser le même menu deux fois mais ne souhaitez pas que des éléments enfants s'affichent à l'emplacement que vous configurez avec wp_nav_menu () une fonction. Par exemple, si vous souhaitez que la navigation principale inclue une liste déroulante de deuxième niveau, vous pouvez la laisser aux paramètres par défaut. Ensuite, si vous souhaitez utiliser les mêmes éléments parent dans une navigation de pied de page et omettre les éléments enfants, vous pouvez définir ce paramètre sur une profondeur de 1. La valeur par défaut "0" signifie que tous les niveaux seront affichés. Pour que notre exemple soit concis, nous supposons que la navigation principale ne comprend aucun élément enfant..
Marcheur
Le paramètre est utilisé pour définir un objet walker qui peut être utilisé pour manipuler le fonctionnement de la fonction entière et pour sortir ses informations. Nous allons donner un bon exemple dans la section suivante.
Ajout d'une description aux éléments du menu de navigation
Pour notre exemple, nous voulons ajouter une sous-description à chaque élément du menu principal. La fonctionnalité permettant d'ajouter la description elle-même est déjà en place dans le système de menus WordPress. Pour l'activer, allez dans Menus, puis appuyez sur l'onglet Options d'écran dans le coin supérieur droit. L'option sur laquelle vous devez vous assurer que vous cliquez est appelée "Description". Avec cette case cochée, un élément de menu devrait maintenant ressembler à ceci:
Une fois nos descriptions complétées, nous devrons créer la classe de marcheur et l’ajouter à la wp_nav_menu () paramètres. Nous appellerons la classe description_navigation donc notre code de paramètres complet devrait ressembler à ceci:
Il y a beaucoup de choses ici. Pour plus d'informations sur les classes Walker en général, permettez-moi de vous renvoyer à un autre tutoriel: Comprendre la classe Walker. La partie la plus importante que vous devez comprendre ici est que nous reconstruisons la sortie de chaque élément de lien et que nous ajoutons la description. Sur la ligne 19 de l'extrait ci-dessus, vous pouvez voir où se trouve la description de l'article si elle existe et lui donner la valeur de $ description enveloppés dans une balise span afin que nous puissions styliser les descriptions séparément. Ensuite, aux lignes 24 à 29, où nous reconstituons l’élément de lien, nous ajoutons la description juste avant la fermeture de la balise anchor afin qu’elle fasse partie du lien lui-même..
En utilisant le thème Twenty Eleven, vous devriez maintenant avoir quelque chose qui ressemble à ceci:
Style It Up
Ajoutons un peu de style pour le rendre plus lisible:
#nav a line-height: 20px; rembourrage: 10px 15px; #nav un span display: block; taille de police: 11px; couleur: #ccc; #nav a: hover span color: # 999;
Cela modifiera la hauteur et le remplissage de chaque lien, entraînera la chute de la description dans la balise span sur sa propre ligne et ajustera légèrement la taille de la police et les couleurs pour obtenir un résultat final ressemblant à ceci:
Fonctions de relation
Vous pouvez non seulement utiliser wp_nav_menu () pour sortir votre menu avec toutes les personnalisations, vous pouvez aller un peu plus loin avec certaines de ses fonctions associées.
has_nav_menu ()
Cette fonction est idéale pour afficher un menu particulier uniquement si ce menu a été attribué à l’emplacement de votre thème. Par exemple, vous pouvez créer une navigation supérieure sur votre thème pour les éléments de navigation moins importants qu'un utilisateur ne souhaite peut-être pas dans sa navigation principale. Cela peut être un lien domestique, "Annoncez avec nous" ou d'autres appels à l'action plus bas. Mais en tant que distributeur de thèmes, si vous ne savez pas s’il s’agit là d’une chose que l’utilisateur souhaite utiliser, utilisez simplement une condition telle que:
if (has_nav_menu ('top-menu')) wp_nav_menu ('theme_location =' top-menu ');
wp_get_nav_menu_items ()
Cette fonction renverra un tableau d'éléments d'un menu particulier. Cela peut être particulièrement utile si vous souhaitez créer une liste de menus personnalisée sans utiliser une classe Walker. Vous perdez beaucoup de fonctionnalités telles que la classe actuelle de l'élément de menu, mais c'est un excellent moyen de parcourir en boucle un tableau d'éléments de menu pour une solution simple..
Conclusion
Il y a beaucoup de choses que vous pouvez faire pour personnaliser vos menus de navigation lorsque vous en savez plus sur la flexibilité offerte par les paramètres intégrés et sur un contrôle accru avec Walker Class. Besoin d'ajouter une autre balise span avec la classe de "icône"pour des icônes personnalisées pour chaque élément? Pas de problème.
Le fait de pouvoir contrôler totalement l’emplacement et la sortie des menus étend vos capacités en tant que développeur de thèmes d’un nombre incalculable de possibilités. Quelles sont certaines des choses que vous pouvez utiliser cette classe Walker pour faire?
Share
Accentsconagua
