PHP/Wordpress - ajouter des flèches aux menus parents

Question

est-il possible d'ajouter une sorte de classe comme 'arrow' ou une plage dans les menus qui ont des sous-menus (dans Wordpress)? il semble que vous pouvez le faire utilise javascript, mais je veux savoir s'il existe une solution PHP ...

dans WP 3.0, j'ai vu que les menus actifs ont les classes "parent" ou "ancêtre" sur eux , mais ceci est seulement pour le menu actif, et j'en ai besoin aussi pour les inactifs

Answer 1

Cette fonctionnalité devrait vraiment être dans le noyau de WordPress!
Quoi qu'il en soit, j'ai regardé la source du modèle de menu que vous avez envoyé dans un commentaire sur l'autre réponse, et j'ai trouvé un moyen (plutôt hacky) d'ajouter une classe sur les éléments de menu avec enfants. Il sous-classe fondamentalement le marcheur par défaut pour étendre son comportement par défaut. C'est probablement mieux si vous le mettez dans le functions.php de votre thème. Voici le code:

<?php 
class Arrow_Walker_Nav_Menu extends Walker_Nav_Menu { 
    function display_element($element, &$children_elements, $max_depth, $depth=0, $args, &$output) { 
     $id_field = $this->db_fields['id']; 
     if (!empty($children_elements[$element->$id_field])) { 
      $element->classes[] = 'arrow'; //enter any classname you like here! 
     } 
     Walker_Nav_Menu::display_element($element, $children_elements, $max_depth, $depth, $args, $output); 
    } 
} 
?> 

Pour appeler, vous aurez besoin d'ajouter l'argument walker lorsque vous appelez wp_nav_menu() dans votre thème, comme ceci:

<?php 
wp_nav_menu(array('walker' => new Arrow_Walker_Nav_Menu, [other arguments...])) 
?> 

Espoir qui fonctionne pour vous! Je l'ai seulement testé superficiellement, mais cela semble fonctionner. Faites-moi savoir s'il y a des cas de bordure où l'ajout de la classe échoue.

Answer 2

Je ne connais aucun support WordPress natif pour cela, mais vous pouvez facilement le faire en utilisant un peu de jQuery.

<script type="text/javascript"> 
$("#menu-id ul li:has(ul)").addClass("parent"); 
</script> 

Answer 3

La façon simple et humble pour ajouter le parent de classe au menu principal si elle a sous-menu

Et le style est

<style type="text/css"> 
     .main-navigation .parent > a, .main-navigation .parent > a:hover { 
      background-image: url("images/arrow.png"); 
      background-position: right center; 
      background-repeat: no-repeat; 
    } 

    </style> 

Answer 4

Si vous êtes comme moi et que vous voulez ajouter une flèche HTML d'une durée à l'élément de menu parent, ajoutez une ligne comme celle-ci dans la classe walker client de Donald Harvey:

$element->title .= '<span class="caret down-caret">&#x25BC;</span>'; 

Vous pouvez également ajouter ce HTML directement à l'étiquette du menu dans la page du menu admin du WP, mais ce n'est pas une bonne façon de le faire.

Je blogué un peu à ce sujet ici http://cameronnokes.com/blog/adding-an-icon-to

Answer 5

Je ne sais pas ce qui est question, mais nous pouvons ajouter la flèche dans le menu par css comme ceci:

.menu li > a:after { 
    color: #fff; 
    content: ' ▾'; 
} 

.menu li > a:only-child:after { 
    content: ''; 
} 

Answer 6

Il suffit de coller ce à votre css code et cela fonctionnera comme prévu.

.nav-menu li > a:after { 
    color: #888; 
    content: ' ▾'; 
} 

.nav-menu li > a:hover:after { 
    color: #444; 
    content: ' ▾'; 
} 

.nav-menu li > a:only-child:after { 
    content: ''; 
} 

^{Ps. N'oubliez pas de configurer votre page. UTF-8}