PHP/Wordpress: agregue flechas a los menús principales

Question

¿es posible agregar algún tipo de clase como 'flecha' o un lapso dentro de los menús que tienen submenús (en Wordpress)? parece que puede hacer esto usando javascript, pero quiero saber si hay una solución PHP ...

en WP 3.0, vi que los menús activos tienen las clases "principal" o "ancestro" en ellos , pero esto es solo para el menú activo, y también lo necesito para los inactivos

Answer 1

¡Esta funcionalidad realmente debería estar en el núcleo de WordPress!
De todos modos, eché un vistazo a la fuente de la plantilla del menú que envió en un comentario sobre la otra respuesta, y encontré una forma (bastante cobarde) de agregar una clase a los elementos del menú con niños. Básicamente subclasifica al andador predeterminado para extender su comportamiento predeterminado. Probablemente sea mejor si lo coloca en el tema functions.php. Aquí está el código:

<?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); 
    } 
} 
?> 

llamarlo, tendrá que añadir el argumento walker cuando llame wp_nav_menu() en su tema, así:

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

la esperanza de que funcione para usted! Solo lo he probado superficialmente, pero parece funcionar. Avíseme si hay algún caso límite en el que la adición de la clase falle.

Answer 2

No conozco ningún soporte nativo de WordPress, pero podría hacerlo fácilmente usando jQuery.

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

Answer 3

La forma más sencilla y humilde para agregar los padres de clase al menú principal si tiene sub menú

Y el estilo es

<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 eres como yo y desea añadir una flecha HTML en un lapso de su padre elemento de menú, añadir una línea como esta en el interior del cliente de clase andador de Donald Harvey:

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

También puede agregar ese código HTML directamente a la etiqueta del menú en la página de menú administrador de WP, pero esa no es una buena manera de hacerlo.

blogged un poco acerca de esto aquí http://cameronnokes.com/blog/adding-an-icon-to

Answer 5

No sé cuál es la pregunta, pero podemos añadir flecha de menú css así:

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

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

Answer 6

basta con pegar esto en el CSS código y funcionará como se esperaba.

.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. No olvide configurar su página UTF-8}