Eliminar clases e IDs de los elementos li en wp_nav_menu

Question

Eliminar clases e IDs de los elementos li en wp_nav_menu

23 mar 2011, 06:44:28

Vistas: 36.5K

Votos: 6

Soy nuevo en WordPress y estoy tratando de aprender cómo crear un tema. Actualmente estoy usando wp_nav_menu para generar mi menú Mi menú consiste en páginas y categorías

Sin embargo, la generación predeterminada del menú se ve así

<div id="navi">
<div class="menu-primary-container">  
  <ul id="menu-primary" class="menu">
    <li id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14"></li>
    <li id="menu-item-16" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-16"></li>
    <li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20"></li>
    <li id="menu-item-15" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-15"></li>
    <li id="menu-item-17" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-17"></li>
  </ul>
</div>
</div>

Quiero eliminar todas las clases e IDs de los elementos li y ul. He estado buscando en Google durante un tiempo. He probado diferentes métodos sin éxito. Cualquier ayuda sería muy apreciada. Actualmente estoy usando WordPress 3.1

¡Gracias de antemano!

eddyward

63

menús personalización

Comentarios

Usa el plugin Falcon, tiene una función para limpiar los ID y clases de los elementos del menú, pero mantiene solo los esenciales (como current-menu-item).

Anh Tran

1 ago 2023 10:08:59

Todas las respuestas a la pregunta

Puedes cambiar el ID y la clase de cada elemento utilizando los filtros nav_menu_item_id y nav_menu_css_class de la siguiente manera:

add_filter('nav_menu_item_id', 'clear_nav_menu_item_id', 10, 3);
function clear_nav_menu_item_id($id, $item, $args) {
    return "";
}

add_filter('nav_menu_css_class', 'clear_nav_menu_item_class', 10, 3);
function clear_nav_menu_item_class($classes, $item, $args) {
    return array();
}

Esto hará que los elementos aparezcan como <li id="" class="">. El mismo mecanismo puede usarse para establecer IDs con valores útiles, como el slug de la página.

Marcus Downing

529

27 abr 2011 12:35:08

Comentarios

Siempre es mejor usar las funciones de retorno principales de WP. Así que en este caso usa: add_filter( 'nav_menu_item_id', '__return_null', 10, 3 ); o add_filter( 'nav_menu_css_class', '__return_empty_array', 10, 3 );

WPExplorer

8 mar 2018 00:17:18

function wp_nav_menu_remove_attributes( $menu ){
    return $menu = preg_replace('/ id=\"(.*)\" class=\"(.*)\"/iU', '', $menu );
}
add_filter( 'wp_nav_menu', 'wp_nav_menu_remove_attributes' );

zeo

3.64K

23 mar 2011 07:14:50

Comentarios

¿esto me impedirá agregar una clase "active" para mi navegación activa?

eddyward

23 mar 2011 07:25:35

Sí, porque esto es lo que pediste.

zeo

23 mar 2011 07:44:46

Esta solución fue publicada en wp3layout. Debes agregar esto al archivo function.php de tu tema.


function remove_css_id_filter($var) {
    return is_array($var) ? array_intersect($var, array('current-menu-item')) : '';
} 
add_filter( 'page_css_class', 'remove_css_id_filter', 100, 1);
add_filter( 'nav_menu_item_id', 'remove_css_id_filter', 100, 1);
add_filter( 'nav_menu_css_class', 'remove_css_id_filter', 100, 1);

Espero que esto ayude.

Richy

11

9 feb 2017 22:13:55

Creo que deberías mantener menu-item-has-children & current-menu-item para los estilos

pega el siguiente código en tu functions.php

//elimina clases CSS inútiles para cada elemento li
function remove_css_from_menu($var)
{
    return is_array($var) ? array_intersect($var, array('current-menu-item', 'menu-item-has-children',)) : '';
}
add_filter('nav_menu_css_class', 'remove_css_from_menu', 100, 1);
//elimina el ID para cada elemento li
add_filter('nav_menu_item_id', '__return_false');

Abouasy

289

1 ago 2023 08:47:35

Comentarios

inspirado en el comentario anterior de @Jan Fabry

Abouasy

1 ago 2023 08:49:00

Jan Fabry 30.5K · Accepted Answer · 2011-03-23T15:53:56Z

Si miras en la función wp_nav_menu(), verás que los elementos son escritos por walk_nav_menu_tree(), que llama a Walker_Nav_Menu para hacer el trabajo (a menos que hayas especificado tu propia clase walker). Esta clase contiene un método start_el() que se llama para cada elemento del menú. En esta función, verás que las clases se filtran a través de nav_menu_css_class y el ID se filtra a través de nav_menu_item_id. Por lo tanto, si adjuntas tu propio código a estos hooks, puedes cambiarlos a lo que quieras.

Los submenús siempre están envueltos con <ul class="sub-menu">, el envoltorio principal se puede cambiar mediante los argumentos menu_id y menu_class.

Jan Fabry

30.5K

23 mar 2011 15:53:56