Cómo agregar clase y elemento a -etiqueta en el submenú de “wp_nav_menu” en WordPress?

8 minutos de lectura

avatar de usuario
Cray

Quiero agregar una clase a la a etiqueta de un sub-menu y un b etiqueta dentro del enlace.

WordPress me da este código:

<li id="menu-item-72" class="menu-item menu-item-type-post_type menu-item-object-page dropdown menu-item-72"><a
    href="#">Link</a>
  <ul class="dropdown-menu"></ul>

Y quiero esto:

<li id="menu-item-72" class="menu-item menu-item-type-post_type menu-item-object-page dropdown menu-item-72"> <a
    href="#" class="dropdown-toggle" data-toggle="dropdown">Link <b class="caret"></b></a>
  <ul class="dropdown-menu"></ul>

¿Alguien sabe una solución para eso?

avatar de usuario
martinczerwi

Mire esta respuesta, explica cómo agregar HTML personalizado a los menús de wordpress: https://stackoverflow.com/a/12251157/1627227

EDITAR:

He reunido un ejemplo para adaptarse a su pregunta. Puedes colocarlo en funciones.php. Tenga en cuenta los comentarios, explican dónde agregar su código personalizado.

class Custom_Walker_Nav_Menu extends Walker_Nav_Menu {

  function start_lvl(&$output, $depth) {
      $indent = str_repeat("\t", $depth);
      //$output .= "\n$indent<ul class=\"sub-menu\">\n";

      // Change sub-menu to dropdown menu
      $output .= "\n$indent<ul class=\"dropdown-menu\">\n";
  }

  function start_el ( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
    // Most of this code is copied from original Walker_Nav_Menu
    global $wp_query, $wpdb;
    $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

    $class_names = $value="";

    $classes = empty( $item->classes ) ? array() : (array) $item->classes;
    $classes[] = 'menu-item-' . $item->ID;

    $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
    $class_names=" class="" . esc_attr( $class_names ) . '"';

    $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
    $id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : '';

    $has_children = $wpdb->get_var("SELECT COUNT(meta_id)
                            FROM wp_postmeta
                            WHERE meta_key='_menu_item_menu_item_parent'
                            AND meta_value="".$item->ID.""");

    $output .= $indent . '<li' . $id . $value . $class_names .'>';

    $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
    $attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
    $attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
    $attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';

    // Check if menu item is in main menu
    if ( $depth == 0 && $has_children > 0  ) {
        // These lines adds your custom class and attribute
        $attributes .= ' class="dropdown-toggle"';
        $attributes .= ' data-toggle="dropdown"';
    }

    $item_output = $args->before;
    $item_output .= '<a'. $attributes .'>';
    $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;

    // Add the caret if menu level is 0
    if ( $depth == 0 && $has_children > 0  ) {
        $item_output .= ' <b class="caret"></b>';
    }

    $item_output .= '</a>';
    $item_output .= $args->after;

    $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
  }

}

Después de tener esto en su lugar, debe ir al punto donde su menú (wp_nav_menu()) se llama. En la respuesta a la que me he vinculado, está la llamada de función completa a wp_nav_menu. Sin embargo, tendrás que agregar esta línea: 'walker' => new Custom_Walker_Nav_Menu a la matriz de argumentos, para usar su objeto walker personalizado en ese menú específico.

Espero que lo hayas conseguido 😉

  • Lo siento, no lo entiendo. ¿Dónde debo insertar “class=”dropdown-toggle” data-toggle=”dropdown”” para un elemento principal? ¿Y dónde está la etiqueta b dentro del enlace?

    – Cray

    31 de octubre de 2012 a las 17:06


  • He agregado un ejemplo que aplica los cambios que desea al código. Si todavía hay algo que no está claro, ¿podría decirme si codificó manualmente su tema o si está usando un tema descargado? También el código requiere, estás usando el Menús de WordPress y wp_nav_menu para llamar a sus menús.

    – martinczerwi

    2 de noviembre de 2012 a las 9:48

  • ¡Ay, muchas gracias! Pero necesito la clase “menú desplegable” solo en los elementos del menú principal. El atributo “data-toggle=”dropdown”” solo debe aparecer en los enlaces de los elementos del menú principal. Y dentro de este enlace, necesito este código: <b class="caret"></b> En el <ul> del submenú necesito la clase “menú desplegable” La pregunta es: ¿cómo puedo verificar si hay un submenú o si el elemento del menú es un elemento principal?

    – Cray

    2 de noviembre de 2012 a las 16:35

  • Lo siento mucho, me perdí el símbolo de intercalación y también tuve un error en la sintaxis HTML. He editado el código de arriba. Puedes determinar si estás en el menú principal por el $depth-Variable. $depth es el nivel del menú, para el menú principal es 0, cuanto más profundo sea el nivel, mayor será el número.

    – martinczerwi

    2 de noviembre de 2012 a las 16:55


  • Gracias, pero ahora tengo los atributos y clases en cada elemento con profundidad = 0. Los necesito solo si hay un submenú. hay una variable para eso?

    – Cray

    2 de noviembre de 2012 a las 17:08

Desde WordPress 3.6.0 puedes usar el filtro nav_menu_link_attributes:

add_filter( 'nav_menu_link_attributes', 'add_class_to_items_link', 10, 3 );

function add_class_to_items_link( $atts, $item, $args ) {
  // check if the item has children
  $hasChildren = (in_array('menu-item-has-children', $item->classes));
  if ($hasChildren) {
    // add the desired attributes:
    $atts['class'] = 'dropdown-toggle';
    $atts['data-toggle'] = 'dropdown';
    $atts['data-target'] = '#';
  }
  return $atts;
}

Desafortunadamente, las etiquetas no tienen un filtro que podamos usar, por lo que necesitaremos un andador:

class MY_Menu_Walker extends Walker_Nav_Menu {

  public function start_lvl( &$output, $depth = 0, $args = array() ) {
    $indent = str_repeat("\t", $depth);
    $output .= "\n$indent<ul class=\"sub-menu dropdown-menu\">\n";
  }   

}

luego agregue la opción de caminante al llamar al menú:

wp_nav_menu( array('walker' => new MY_Menu_Walker)); 

  • Podría tener éxito usando solo el primer fragmento de código. Gracias @VictorBV

    – Dusán

    10 de enero de 2019 a las 4:42


avatar de usuario
Urooj Khan

Use este código en Function.php

function add_menuclass($ulclass) {
   return preg_replace('/<a /', '<a class="list-group-item"', $ulclass);
}
add_filter('wp_nav_menu','add_menuclass');

avatar de usuario
Khairul

Puede usar esto para verificar si hay un submenú:

$has_children = $wpdb->get_var("SELECT COUNT(meta_id)
                                FROM wp_postmeta
                                WHERE meta_key='_menu_item_menu_item_parent'
                                AND meta_value="".$item->ID.""");

luego haz comprobaciones simples

if ( $has_children > 0 ) {
  // These lines adds your custom class and attribute
  $attributes .= ' class="dropdown-toggle"';
  $attributes .= ' data-toggle="dropdown"';
}

Recuerde configurar $wpdb como globales:

global $wp_query, $wpdb;

Tada~

Puede colocarlo en functions.php.

class My_Walker_Nav_Menu extends Walker_Nav_Menu {
    function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ){
      $GLOBALS['dd_children'] = ( isset($children_elements[$element->ID]) )? 1:0;
      $GLOBALS['dd_depth'] = (int) $depth;
      parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
    }
   function start_lvl(&$output, $depth) {
     $indent = str_repeat("\t", $depth);
     $output .= "\n$indent<ul class=\"dropdown-menu\">\n";
   }
  function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) 
  {
    global $wp_query, $wpdb;
    $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
    $li_attributes="";
    $class_names = $value="";
    $classes = empty( $item->classes ) ? array() : (array) $item->classes;

    //Add class and attribute to LI element that contains a submenu UL.
    if ($args->has_children){
      $classes[]    = 'dropdown';
      $li_attributes .= 'data-dropdown="dropdown"';
    }
    $classes[] = 'menu-item-' . $item->ID;
    //If we are on the current page, add the active class to that menu item.
    $classes[] = ($item->current) ? 'active' : '';
    //Make sure you still add all of the WordPress classes.
    $class_names = join( ' ', apply_filters( 'nav_menu_css_class',     array_filter( $classes ), $item, $args ) );
    $class_names=" class="" . esc_attr( $class_names ) . '"';
    $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
    $id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : '';
    $has_children = $wpdb->get_var(
    $wpdb->prepare("
       SELECT COUNT(*) FROM $wpdb->postmeta
       WHERE meta_key = %s
       AND meta_value = %d
       ", '_menu_item_menu_item_parent', $item->ID)
     );
   $output .= $indent . '<li' . $id . $value . $class_names .'>';
   $output .= $indent . '<li' . $id . $value . $class_names . $li_attributes . '>';
   //Add attributes to link element.
   $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
   $attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target     ) .'"' : '';
   $attributes .= ! empty( $item->xfn ) ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
   $attributes .= ! empty( $item->url ) ? ' href="'   . esc_attr( $item->url        ) .'"' : '';
   // Check if menu item is in main menu

if ( $depth == 0 && $has_children > 0  ) {
    // These lines adds your custom class and attribute
    $attributes .= ' class="dropdown-toggle"';
    $attributes .= ' data-toggle="dropdown"';
}
   $item_output = $args->before;
   $item_output .= '<a'. $attributes .'>';
   $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
   // Add the caret if menu level is 0
   if ( $depth == 0 && $has_children > 0  ) {
      $item_output .= ' <b class="caret"></b>';
   }
   $item_output .= '</a>';
   $item_output .= $args->after;
   $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
  }
}

Luego, en su plantilla donde desea mostrar este menú, coloque este código.

   <?php

                if ( has_nav_menu( 'primary' ) ) {

                     $defaults = array(
                        'theme_location'  => 'primary',
                        //'menu'            => '',
                         'container'       => 'ul',
                         'container_class' => '',
                         'container_id'    => '',
                         'menu_class'      => '',
                         'menu_id'         => '',
                         'walker'          =>  new My_Walker_Nav_Menu()
                    );

                    wp_nav_menu( $defaults );

                }
            ?> 

Usando esto resolví mi problema.

¿Ha sido útil esta solución?