mostrar - wordpress menu display location
Cómo agregar una clase "activa" a wp_nav_menu() elemento de menú actual(forma simple) (5)
Estoy creando un tema de Wordpress personalizado usando un tema de inicio _Underscores. También estoy usando Bootstrap como un marco de front-end.
Me gustaría modificar wp_nav_menu para que asigne el elemento del menú actual class = "active" en lugar de class = "current-menu-item" (que es el predeterminado). O tal vez al menos asigna ambas clases. Lo necesito para usar la clase .active de bootstrap.css.
Aquí está el ejemplo de lo que tengo (todas estas clases son wp generadas, por favor, desplácese para ver lo que quiero decir):
<ul id="menu-main-menu" class="nav navbar-nav">
<li id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-13 current_page_item menu-item-14"><a href="">item1</a></li>
<li id="menu-item-12" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-12"><a href="">item2</a></li>
</ul>
Y esto es lo que necesito:
<ul id="menu-main-menu" class="nav navbar-nav">
<li id="menu-item-14" class="active menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-13 current_page_item menu-item-14"><a href="">item1</a></li>
<li id="menu-item-12" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-12"><a href="">item2</a></li>
</ul>
Preferiría hacer esto de forma correcta, no quiero cambiar nada en .wp-includes / nav-menu-template.php, seguro, tampoco quiero usar js.
Bueno, encontré la respuesta justo antes de publicar esta pregunta (estaba lista, es por eso que aún está formada de alguna manera, como si todavía estuviera buscando la respuesta), pero tuve dificultades para encontrarla, así que decidí publicarla como un QA. Espero que alguien encuentre esto útil.
Además de las respuestas anteriores, si los elementos del menú son Categorías y desea resaltarlas al navegar por las publicaciones, verifique también el current-post-ancestor :
add_filter(''nav_menu_css_class'' , ''special_nav_class'' , 10 , 2);
function special_nav_class ($classes, $item) {
if (in_array(''current-post-ancestor'', $classes) || in_array(''current-page-ancestor'', $classes) || in_array(''current-menu-item'', $classes) ){
$classes[] = ''active '';
}
return $classes;
}
En header.php inserta este código para mostrar el menú:
<?php
wp_nav_menu(
array(
''theme_location'' => ''menu-one'',
''walker'' => new Custom_Walker_Nav_Menu_Top
)
);
?>
En functions.php usa esto:
class Custom_Walker_Nav_Menu_top extends Walker_Nav_Menu
{
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
$is_current_item = '''';
if(array_search(''current-menu-item'', $item->classes) != 0)
{
$is_current_item = '' class="active"'';
}
echo ''<li''.$is_current_item.''><a href="''.$item->url.''">''.$item->title;
}
function end_el( &$output, $item, $depth = 0, $args = array() ) {
echo ''</a></li>'';
}
}
Para resaltar también el elemento del menú cuando una de las páginas secundarias está activa, también busque la otra clase ( current-page-ancestor ) como se muestra a continuación:
add_filter(''nav_menu_css_class'' , ''special_nav_class'' , 10 , 2);
function special_nav_class ($classes, $item) {
if (in_array(''current-page-ancestor'', $classes) || in_array(''current-menu-item'', $classes) ){
$classes[] = ''active '';
}
return $classes;
}
Si quieres el ''activo'' en el html:
encabezado con html y php:
<?php
$menu_items = wp_get_nav_menu_items( ''main_nav'' ); // id or name of menu
foreach ( (array) $menu_items as $key => $menu_item ) {
if ( ! $menu_item->menu_item_parent ) {
echo "<li class=" . vince_check_active_menu($menu_item) . "><a href=''$menu_item->url''>";
echo $menu_item->title;
echo "</a></li>";
}
}
?>
functions.php:
function vince_check_active_menu( $menu_item ) {
$actual_link = ( isset( $_SERVER[''HTTPS''] ) ? "https" : "http" ) . "://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
if ( $actual_link == $menu_item->url ) {
return ''active'';
}
return '''';
}
Simplemente pegue este código en el archivo functions.php:
add_filter(''nav_menu_css_class'' , ''special_nav_class'' , 10 , 2);
function special_nav_class ($classes, $item) {
if (in_array(''current-menu-item'', $classes) ){
$classes[] = ''active '';
}
return $classes;
}