Francis Chouquet Graphiste Lettering

Surligner la page ou la catégorie actuelle dans un menu de navigation

0

Si vous utilisez un menu de navigation horizontal dans votre thème, vous voudriez probablement « surligner » la page sur laquelle vous êtes. Beaucoup de thèmes le font déjà mais si vous avez réalisé vous-même votre menu, vous ne savez peut-être pas comment surligner ces pages. Dans WordPress, il existe des règles qui génèrent automatiquement des classes qui seront utilisées dans la feuille de style. Celles-ci sont: .current_page_item et .current_page_parent si vous avez des pages « enfants » ou autrement appelées sous pages.

En entrant ces balises dans votre feuille de style, les pages qui se seront affichées seront surlignées dans le menu.

Afficher la page ou la catégorie dans le menu ( source image: snoupix.com )

Afficher la page ou la catégorie dans le menu (source image: snoupix.com)

Mais comment fait-on si on utilise les catégories dans le menu à la place des pages ?

Le processus est globalement le même. WordPress crée automatiquement des balises qui sont en autres : .current-cat et .current-cat-parent. Ainsi, quand vous allez cliquez sur une catégorie dans votre menu de navigation, vous allez faire afficher les articles de cette catégorie et surlignez par là même cette catégorie dans le menu. Très intéressant pour que le visiteur s’y retrouve.

Cependant, dès que l’on clique sur un article à partir de cette page de catégorie, la catégorie à laquelle appartient l’article n’est plus surlignée. Il serait intéressant de pouvoir la surligner et donc de la mettre « en avant ». Ca pourrait être un plus pour le visiteur et s’il arrive directement sur la page de l’article, ça peut l’inciter à aller chercher plus loin dans la catégorie…

Le problème ici est que WordPress ne gère pas automatiquement de classe qui permettrait de dire: « pour cet article, afficher la catégorie associée, avec une classe du style .current-category. Je suis donc parti à la recherche d’une solution sur le web et je suis tombé sur un plugin. N’étant pas un grand fan des plugins à tout va, j’ai continué mes recherches et je suis tombé, comme souvent, sur un super topic sur le forum US de WordPress. Et là, j’ai trouvé la solution.

En fait, il suffit de créer quelques lignes de code pour dire à WordPress d’afficher la classe .current-cat au niveau de la page article. Le code est le suivant:

<?php $catsy = get_the_category(); $myCat = $catsy[0]->cat_ID; wp_list_categories('hierarchical=1&use_desc_for_title=0&orderby=name&title_li=&depth=3&current_category='.$myCat); ?>

Vous l’insérez dans votre entête, au niveau du menu de navigation, à la place du code qui permet d’afficher les catégories. Ensuite, à vous de choisir quels paramètres attribuer à l’affichage de ces catégories.

Et plus bas, un autre utilisateur propose une solution encore plus intéressante pour ceux qui affichent à la fois les pages et les catégories dans leur menu de navigation:

<?php if (!is_page() && !is_home()){ $catsy = get_the_category(); $myCat = $catsy[0]->cat_ID; $currentcategory = '&current_category='.$myCat; } wp_list_categories('hierarchical=1&use_desc_for_title=0&exclude=12&depth=1&orderby=id&title_li='.$currentcategory); ?>

Ici, le code prend en compte le fait que l’on ne soit ni sur une page ni sur la page d’accueil. Encore une fois, adaptez les paramètres à vos besoins.

A partir de là, sur les pages d’articles, si vous avez bien paramétré les classes dans votre feuille de style, la catégorie à laquelle appartient l’article devrait être surlignée. Attention, pour ceux qui utilisent les catégories multiples pour un article, la catégorie surlignée sera la première dans l’ordre alphabétique, sauf si vous dîtes à WordPress d’en faire autrement.

Petit truc qui peut s’avérer très utile si vous utilisez un menu de navigation et encore plus pour ceux qui ont un thème magazine sur lequel on peut facilement se perdre si le thème n’a pas de « breadcrumb »…

9 Commentaires

  • bonjour fran6
    j’ai suivi des conseils, ça marche nickel, merci.

    Par ailleurs, j’avais une question sur ta barre de recherche :
    comment fais tu pour que le texte recherché apparaisse encore une fois la recherche exécutée.
    merci d’avance et encore bravo pour tout ton site, une mine d’information

    xavier

  • bon, j’ai fini par trouvé l’astuce pour afficher un texte quand aucune recherche n’a été faite et reprendre le texte de la recherche ensuite :

    <form action= »/ » method= »get »>
    <input type= »text » value= onfocus= »this.value= ;return true; » onblur= »if(!this.value) this.value=’Recherche …’;return true; » name= »s » id= »s » />

  • Bonjour,
    Merci pour les explications. Je souhaite souligner qu’il manque un petit bout de code. Notamment le début.

    Voici ma solition qui fonctionne aussi bien que la votre.

    cat_ID;
    wp_list_cats(‘sort_order=desc&sort_column=name&optioncount=0&current_category=’.$myCat);
    ?>

  • Visiblement ce n’est pas un oubli, c’est plutôt un quiproco avec le textarea. Dès qu’il y a une variable elle n’est pas interprétée comme comme du texte dans cette zone…

  • Sébastien

    Je ne comprends pas Fran6, j’ai beau utiliser tes codes, je ne parviens qu’à afficher les catégories mais pas les pages dans le menu. C’est beaucoup demandé, mais aurais-tu la gentillesse de me montrer ce que donne le code complet pour afficher à la fois les pages et les catégories ?

    Merci

  • Ben

    Inutile de suivre ce post, le code est faux car tronqué. Je ne vois pas l’intérêt de le laisser pour faire perdre du temps à ceux qui essaient.

    Donc allez sur le topic cité : http://wordpress.org/support/topic/211637

  • Effectivement, il y a eu un souci de code, je l’ai modifié en conséquence…

  • Je tente à laisser un commentaire sur ce « vieil » article afin de savoir si vous aviez une solution pour surligner une page de mon menu tout le temps afin de la faire ressortir par rapport aux autres!

    Et même si tu n’as pas la réponse Merci pour tous ces tutos

Success, your comment is awaiting moderation.