Ajouter un cours personnalisé dans un élément de menu WordPress à l'aide d'instructions conditionnelles

Dans la plupart des cas, lors du style des menus de navigation WordPress, vous pouvez simplement ajouter des classes CSS à partir du panneau d'administration WordPress. Récemment, alors que nous travaillions sur un projet, nous nous sommes retrouvés dans une situation difficile. Nous voulions ajouter une classe personnalisée à un élément de menu spécifique uniquement sur des pages à publication unique. Après avoir cherché pendant un moment, nous n’avons trouvé aucune solution. Notre dernier recours a été de demander sur Twitter. Otto (@ Otto42) a répondu que c'était possible en utilisant des filtres, mais qu'il n'y a pas de documentation pour le filtre..

Après avoir examiné le noyau pendant un moment, nous avons trouvé la solution. Ce que vous devez faire est de coller le code suivant dans votre fichier functions.php:

 // Filtrage d'une classe dans le menu de navigation Item add_filter ('nav_menu_css_class', 'special_nav_class', 10, 2); function special_nav_class ($ classes, $ item) if (is_single () && $ item-> title == 'Blog') $ classes [] = 'current-menu-item';  retourne $ classes;  

Le code ci-dessus vérifie simplement s'il s'agit d'une page de publication unique et le titre de l'élément de menu est Blog. Si les critères correspondent, alors il ajoute une classe «Item de menu actuel». Nous devions ajouter une classe personnalisée pour que cela fonctionne avec cette conception sur laquelle nous travaillons..

Si vous ne le savez pas déjà, nous voulions essentiellement garder l'élément de blog mis en surbrillance dans le menu lorsque l'utilisateur était dans un seul message. Cela leur a permis de voir que les articles individuels font partie du blog. Cela n’a normalement aucun sens, mais dans la conception sur laquelle nous travaillons, cela avait du sens..

Si vous cherchiez désespérément ce code, nous espérons que cet article vous aura aidé. Vous pouvez également vérifier d’autres variables $ item. Quelques exemples sont: $ item-> ID, $ item-> titre, $ item-> xfn

Édition rapide: après avoir posté cet article sur Twitter, l'un de nos utilisateurs, @dbrabyn, a souligné que nous aurions pu facilement accomplir cela avec les classes de corps CSS. Par exemple:

.#navigation unique .leftmenublog div display: inline-block! important;

En gros, nous avons ajouté un div supplémentaire pour afficher une icône en forme de flèche dans notre menu. Cette flèche ne serait montrée que si la classe était survolée ou sélectionnée. Sinon, il était configuré pour afficher: aucun; En utilisant la classe body, nous venons de faire afficher l’élément div uniquement pour la classe de menu spécifique..