wordpress - wp_nav_menu example

wp_nav_menu ¿cambiar el nombre de la clase del submenú?

Question

¿Hay alguna manera de cambiar el niño <ul class="sub-menu"> generado por Wordpress a un nombre de clase personalizado?

Sé que el padre ul puede eliminar o cambiar el nombre con ''menu_class'' => ''newname''

No pude encontrar ... intenté ''submenu_class'' => ''customname'' : D me parece lógico, pero obviamente ese no es el correcto ...

¿algunas ideas?

Answer 1

Aquí hay una actualización de lo que hizo Richard que agrega un indicador de "profundidad". La salida es nivel-0, nivel-1, nivel-2, etc.

class UL_Class_Walker extends Walker_Nav_Menu {
function start_lvl(&$output, $depth) {
$indent = str_repeat("/t", $depth);
$output .= "/n$indent<ul class=/"level-".$depth."/">/n";
}
}

Answer 2

Como siempre, después de haber buscado durante mucho tiempo antes de escribir algo en el sitio, solo un minuto después de publicar aquí encontré mi solución.

Pensé que lo compartiría aquí para que alguien más pueda encontrarlo.

//Add "parent" class to pages with subpages, change submenu class name, add depth class
class Prio_Walker 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=/"children level-".$depth."/">/n";
}
}
add_filter(''nav_menu_css_class'',''add_parent_css'',10,2);
function add_parent_css($classes, $item){
global $dd_depth, $dd_children;
$classes[] = ''depth''.$dd_depth;
if($dd_children)
$classes[] = ''parent'';
return $classes;
}
//Add class to parent pages to show they have subpages (only for automatic wp_nav_menu)
function add_parent_class( $css_class, $page, $depth, $args )
{
if ( ! empty( $args[''has_children''] ) )
$css_class[] = ''parent'';
return $css_class;
}
add_filter( ''page_css_class'', ''add_parent_class'', 10, 4 );

Aquí es donde encontré la solución: Solución en el foro de soporte de Wordpress

Answer 3

Esta es una vieja pregunta y no estoy seguro de si la solución que voy a mencionar estaba disponible cuando me lo preguntaron, pero creo que vale la pena mencionarla. Puede lograr lo que desea al agregar un filtro a nav_menu_submenu_css_class . Vea el ejemplo a continuación: puede reemplazar my-new-submenu-class por la (s) clase (s) que desea:

function my_nav_menu_submenu_css_class( $classes ) {
$classes[] = ''my-new-submenu-class'';
return $classes;
}
add_filter( ''nav_menu_submenu_css_class'', ''my_nav_menu_submenu_css_class'' );

Answer 4

Esto puede ser útil para ti

Cómo agregar una clase principal para el elemento del menú

function wpdocs_add_menu_parent_class( $items ) {
$parents = array();
// Collect menu items with parents.
foreach ( $items as $item ) {
if ( $item->menu_item_parent && $item->menu_item_parent > 0 ) {
$parents[] = $item->menu_item_parent;
}
}
// Add class.
foreach ( $items as $item ) {
if ( in_array( $item->ID, $parents ) ) {
$item->classes[] = ''menu-parent-item'';
}
}
return $items;
}
add_filter( ''wp_nav_menu_objects'', ''wpdocs_add_menu_parent_class'' );
/**
* Add a parent CSS class for nav menu items.
* @param array $items The menu items, sorted by each menu item''s menu order.
* @return array (maybe) modified parent CSS class.
*/

Agregar clases condicionales a elementos de menú

function wpdocs_special_nav_class( $classes, $item ) {
if ( is_single() && ''Blog'' == $item->title ) {
// Notice you can change the conditional from is_single() and $item->title
$classes[] = "special-class";
}
return $classes;
}
add_filter( ''nav_menu_css_class'' , ''wpdocs_special_nav_class'' , 10, 2 );

Para referencia: haz clic en mí

Answer 5

No hay opción para esto, pero puede extender el objeto ''walker'' que Wordpress usa para crear el menú HTML. Solo se debe anular un método:

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

Luego, simplemente pasa una instancia de tu andador como argumento a wp_nav_menu así:

''walker'' => new My_Walker_Nav_Menu()

Answer 6

Para cambiar el nombre predeterminado de la clase "submenú", hay una manera simple. Puedes simplemente cambiarlo en un archivo wordpress.

ubicación: www / project_name / wp-includes / nav-menu-template.php.

abra este archivo y en el número de línea 49, cambie el nombre de la clase del submenú con su clase personalizada.

O también puede agregar su clase personalizada junto al submenú.

Hecho.

Me funcionó. Utilicé wordpress-4.4.1.

Answer 7

Puede usar el ejemplo del filtro de preg_replace de WordPress (en su archivo de funciones de tema.php):

function new_submenu_class($menu) {
$menu = preg_replace(''/ class="sub-menu"/'',''/ class="yourclass" /'',$menu);
return $menu;
}
add_filter(''wp_nav_menu'',''new_submenu_class'');

Answer 8

Puedes usar un gancho

add_filter( ''nav_menu_submenu_css_class'', ''some_function'', 10, 3 );
function some_function( $classes, $args, $depth ){
// filter...
return $classes;
}

dónde

$classes(array) - The CSS classes that are applied to the menu <ul> element.
$args(stdClass) - An object of wp_nav_menu() arguments.
$depth(int) - Depth of menu item. Used for padding.

Answer 9

Sugeriría reemplazar su nombre de clase de css cutomclass a submenú. use buscar y reemplazar: ej. find: .customclass replace with .sub-menu, funciona para mí.

Answer 10

Tuve que cambiar:

function start_lvl(&$output, $depth)

a:

function start_lvl( &$output, $depth = 0, $args = array() )

Porque estaba recibiendo un error de incompatibilidad:

Strict Standards: Declaration of My_Walker_Nav_Menu::start_lvl() should be compatible with Walker_Nav_Menu::start_lvl(&$output, $depth = 0, $args = Array)

Answer 11

en lo anterior, necesito un pequeño cambio que estoy tratando de colocar, pero no soy capaz de hacerlo, su salida se verá así

<ul>
<li id="menu-item-13" class="depth0 parent"><a href="#">About Us</a>
<ul class="children level-0">
<li id="menu-item-17" class="depth1"><a href="#">Sample Page</a></li>
<li id="menu-item-16" class="depth1"><a href="#">About Us</a></li>
</ul>
</li>
</ul>

lo que estoy buscando

<ul>
<li id="menu-item-13" class="depth0"><a class="parent" href="#">About Us</a>
<ul class="children level-0">
<li id="menu-item-17" class="depth1"><a href="#">Sample Page</a></li>
<li id="menu-item-16" class="depth1"><a href="#">About Us</a></li>
</ul>
</li>
</ul>

en el anterior he colocado la clase padre dentro del enlace de anclaje principal que <li id="menu-item-13" class="depth0"><a class="parent" href="#">About Us</a>

Answer 12

reemplazar clase:

echo str_replace(''sub-menu'', ''menu menu_sub'', wp_nav_menu( array(
''echo'' => false,
''theme_location'' => ''sidebar-menu'',
''items_wrap'' => ''<ul class="menu menu_sidebar">%3$s</ul>''
) )
);