web-dev-qa-db-fra.com

Comment puis-je obtenir la page de catégorie unique wp_nav_menu pour mettre en évidence le parent?

Avec le nouveau système wp_nav_menu, il est possible d’ajouter une catégorie en tant qu’élément de menu. Dans mon exemple, j’ai une catégorie "actualités", qui est un élément de sous-menu de "À propos de".

About (page)
--news (category)
--history (page)
--contact us (page)

Le menu mettant en surbrillance CSS reprend à partir de current-menu-parent et de current-menu-ancor, de sorte que lorsque je suis dans une section de sous-menu, l'élément de menu de niveau supérieur (par exemple, "À propos de") est mis en surbrillance lorsque je visite "Actualités".

Cela fonctionne très bien, sauf lorsque je visite un post dans la catégorie 'news', qui correspond à is_single () et in_category ('news').

Autant que je peux le voir dans Firebug, les mots 'current-menu-parent' et 'current-menu-ancestor' sont appliqués à l'élément de menu 'news', mais pas à l'élément de menu de niveau supérieur 'About'.

Y at-il quelque chose qui me manque dans la configuration de mon menu? J'ai essayé d'utiliser un lecteur personnalisé, mais il semble que les ancêtres du menu initial ne soient pas configurés correctement.

Il semble que ma seule solution (sans recourir à un vilain piratage de JQuery) est de créer une page "de nouvelles" qui interroge les nouvelles, plutôt que de pointer sur la catégorie "nouvelles".

Des idées?

Merci Dan

Mise à jour avec l'exemple de code 09/09/2010

Dans l’état actuel des choses, il affiche une seule page dans la catégorie Nouvelles http://www.example.com/2010/09/top-news-did-you-know/ :

<li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-28"><a href="http://www.example.com/about/">About Us</a>
<ul class="sub-menu">
<li id="menu-item-71" class="menu-item menu-item-type-taxonomy"><a href="http://www.example.com/category/events/">Events</a></li>
<li id="menu-item-70" class="menu-item menu-item-type-taxonomy current-post-ancestor current-menu-parent current-post-parent current-menu-parent"><a href="http://www.example.com/category/news/">News &#038; views</a></li>
<li id="menu-item-88" class="menu-item menu-item-type-post_type"><a href="http://www.example.com/contact-us/">Contact Us</a></li>
</ul></li>

Donc, vous voyez que "About Us" n'a aucune classe CSS pour indiquer qu'il s'agit d'un parent de la page actuellement visualisée.

Comment je pense que cela devrait fonctionner (et pour être honnête, s'il ne le fait pas, alors c'est un bug dû à un manque d'implémentation):

<li id="menu-item-28" class="menu-item menu-item-type-post_type current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-28"><a href="http://www.example.com/about/">About Us</a>
<ul class="sub-menu">
<li id="menu-item-71" class="menu-item menu-item-type-taxonomy"><a href="http://www.example.com/category/events/">Events</a></li>
<li id="menu-item-70" class="menu-item menu-item-type-taxonomy current-post-ancestor current-menu-parent current-post-parent current-menu-parent"><a href="http://www.example.com/category/news/">News &#038; views</a></li>
<li id="menu-item-88" class="menu-item menu-item-type-post_type"><a href="http://www.example.com/contact-us/">Contact Us</a></li>
</ul></li>

Cela a les classes CSS current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor attachées à l'élément de menu Niveau supérieur. Cela fonctionne de cette façon pour toutes les autres pages, ou même lorsque vous affichez la catégorie elle-même, mais pas une seule page dans une catégorie.

menuscategories
2
Dan Smart

Actuellement, cela n'est pas possible si un élément de menu de page est un parent d'un élément de menu de catégorie.

Dans votre exemple, si About était une catégorie et News était une catégorie enfant , l'élément de menu About (catégorie) serait alors affecté:

  • post-ancêtre actuel
  • current-menu-parent
  • post-parent actuel
2
Chris_O

J'avais aussi le même problème. Je ne pouvais pas trouver un hack php, alors j'ai utilisé un javascript:

function findAncestor(){
    var currentParentLi = document.getElementsByClassName("current-menu-parent");
    if(currentParentLi){
        var currentAncestorLi = currentParentLi[0].parentNode.parentNode;
        if(currentAncestorLi && currentAncestorLi.tagName=="LI"){
            currentAncestorLi.className += " current-menu-ancestor";
        }
    }
}

Placez le code ci-dessus dans un fichier .js, puis faites-le référence en tête de votre page et appelez la fonction findAncestor () sur window.onload, c'est-à-dire:

<script type="text/javascript">
<!--
window.onload = function() {
    findAncestor()
}
//-->
</script>
1
Meredith Dodge

Vous trouverez peut-être que ce forum de discussion est très informatif, car je suis plus proche de la solution.

http://diythemes.com/forums/showthread.php?39258-Category-highlighting-for-single-post-%28-wp-menu-%29 .

Pierre

0
user1060

Je suis d'accord avec Chris_O

J'ai donc une page de garde statique, 2 catégories principales + 1 sous-catégories sous celles-ci et une autre page. Piloté par Wordpress 3.0.1 et Thesis 1.8, en utilisant le menu Wordpress au lieu du menu Thesis.

Pour mettre en évidence la catégorie principale que j'ai utilisée: .current-post-ancestor a {background: #FFFFFF;}

(cela met en évidence la catégorie principale lorsque vous êtes sur un seul post)

Pour mettre en évidence la sous-catégorie, j’ai utilisé: .sous-menu .current-post-ancestor a {background: # F0EEC2;}

(cela met en évidence la sous-catégorie - sous la catégorie principale - lorsque vous êtes sur un seul post de la sous-catégorie)

Je voudrais que les deux "catégorie principale" et "sous-catégorie" soient mis en évidence.

Mais je ne trouve pas le truc.

Pierre

0
user1060