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?
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
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');
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.