WordPress ajoute une classe au travail de menu en travaillant avec mon thème

J’utilise un thème WordPress appelé ‘Wordpress Foundation v2 by 320press’

J’utilise les menus personnalisés dans le tableau de bord WordPress, je veux ajouter une classe au ‘li’ pour changer les styles des sous-menus :

Par exemple : À propos de nous – aura un sous-menu de quatre sous-liens, donc je veux ajouter une classe à ce sous-memu appelé .fourNav qui définira ensuite chaque ‘li’ a avec 25 %.

Ensuite, les clients – auront 2 sous-liens, donc je veux ajouter une classe appelée .twoNav à chaque ‘li’ qui aura une largeur de 50%.

Je souhaite également ajouter une autre classe en plus de celles-ci pour chaque « li » qui aura une image d’arrière-plan pour chaque « li ».

Le menu WordPress vous permet d’ajouter des classes et une description qui seront affichées dans le menu, mais lorsque j’inspecte l’élément, les classes ne sont pas appliquées.

Cependant, lorsque j’ajoute la classe manuellement dans le DOM, elle récupère le CSS et fonctionne.

Comment puis-je ajouter le système de menu à sa pleine capacité dans ce thème ?

C’est ce que je fais, mais ce n’est pas en ajoutant la classe sur:

http://thesis-blogs.com/add-a-custom-class-to-each-item-in-the-wordpress-menu/

Donc, ce dont j’ai besoin, c’est d’un extrait de php pour permettre au système de menus de fonctionner avec mon thème. Comme lorsque j’ajoute la classe dans le tableau de bord, mon thème ne l’applique pas.

C’est le code qui s’affiche dans le html : –

<ul id="menu-main-nav" class="top-nav nav-bar hide-for-small">
 <li id="menu-item-5" class="has-flyout active">
 <a href="page link here">Home</a><a href="#" class="flyout-toggle"></a>
  <ul class="flyout" style="display: none;">
   <li id="menu-item-50"><a href="page link here">sub menu four</a></li>
   <li id="menu-item-51"><a href="page link here">sub menu three</a></li>
   <li id="menu-item-52"><a href="page link here">sub menu two</a></li>
   <li id="menu-item-53"><a href="page link here">sub menu one</a></li>
  </ul>
 </li>
</ul>

Solution n°1 trouvée

Allez dans Apparence -> Menus -> Options d’écran – puis ce qui suit

Solution n°2 trouvée

Pour autant que j’ai compris vos exigences, voici comment cela devrait fonctionner:
1. Lorsque vous survolez un élément de menu, il devrait obtenir un nouveau nom de classe.
2. Lorsque vous survolez un élément de sous-menu, l’élément de sous-menu et l’élément parent de l’élément de sous-menu correspondant doivent recevoir un nouveau nom de classe.

Si c’est ce que vous voulez, consultez ce jsfiddle. J’ai utilisé jquery pour cela. Vérifiez si cela vous aide.

HTML :

<ul class="menu-bar">
    <li class="menu-block">Menu 1</li>
    <li class="menu-block">Menu 2
        <ul class="sub-menu-block">
            <li class="sb-menu-list">Sub Menu</li>
            <li class="sb-menu-list">Sub Menu</li>
            <li class="sb-menu-list">Sub Menu</li>
        </ul>
    </li>
    <li class="menu-block">Menu 3</li>
    <li class="menu-block">Menu 4</li>
    <li class="menu-block">Menu 5</li>
</ul>

CSS :

.menu-bar{
    background-color:blue;
    width:100%;
    display:inline-block;
}

.menu-bar > li{
    display:inline-block;
    position:relative;

}
.sub-menu-block{
    display:none;
    position:absolute;
    top:20px;
    padding-left:0;
    width:75px;
    padding:10px 3px;
    background-color:#ccc;
}
.menu-bar > li:hover .sub-menu-block{
    display:block;
}
.sub-menu-block li{
    list-style: none;
    display:block;
    padding: 4px 0;
}
.sub-menu-block li:hover{
    background-color:red;
}

JQueryName

$(function(){
    $(".menu-block").on("mouseover",function(){
        $(this).addClass('hovered');
    });
    $(".menu-block").on("mouseout",function(){
        $(this).removeClass('hovered');
    });
    $(".sb-menu-list").on("mouseover",function(){
        $(this).addClass('child-hovered');
        $(this).parents(".menu-block").addClass('parent-hovered');
    });
    $(".sb-menu-list").on("mouseout",function(){
        $(this).removeClass('child-hovered');
        $(this).parents(".menu-block").removeClass('parent-hovered');
    });
});

Solution n°3 trouvée

vous devez éditer le code du modèle directement…

je pense que le menu est dans

worpressdir/wp-content/themes/yourthemename/header.php

afin de modifier cela correctement, vous aurez besoin de compétences moyennes en PHP et html. Bonne chance