Cómo resaltar la página actual en el menú de navegación de WordPress

Cómo cambiar la salida de navegación en WordPress

Ultima actualización en por Shahzad Saeed

Extractos de IsItWP

¿Está buscando una forma de controlar la salida de los menús de navegación de WordPress? Si bien es probable que exista un complemento para esto, hemos creado un fragmento de código rápido que puede usar para modificar la salida de navegación modificando PHP. Este código tiene un ejemplo para categorizar cheques e imprimir descripciones.

Instrucciones:

Todo lo que necesita hacer es agregar este código al archivo functions.php de su tema o en un complemento específico del sitio:


<?php
class description_walker extends Walker_Nav_Menu
{
      function start_el(&$output, $item, $depth, $args)
      {
           global $wp_query;
           $indent = ( $depth ) ? str_repeat( "t", $depth ) : '';

           $class_names = $value="";

           $classes = empty( $item->classes ) ? array() : (array) $item->classes;

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

           $output .= $indent . '<li id="menu-item-'. $item->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        ) .'"' : '';

           $prepend = '<strong>';
           $append = '</strong>';
           $description  = ! empty( $item->description ) ? '<span>'.esc_attr( $item->description ).'</span>' : '';

           if($depth != 0)
           {
                     $description = $append = $prepend = "";
           }

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

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

//For implementation/ouput in your theme place this snippet where you want your menu to populate.
wp_nav_menu( array(
 'container' =>false,
 'menu_class' => 'nav',
 'echo' => true,
 'before' => '',
 'after' => '',
 'link_before' => '',
 'link_after' => '',
 'depth' => 0,
 'walker' => new description_walker())
 );
?>

Notar: Si es la primera vez que agrega fragmentos en WordPress, consulte nuestra guía sobre cómo agregar fragmentos correctamente en WordPress, para que no rompa accidentalmente su sitio.

Si le gustó este fragmento de código, consulte nuestras otras publicaciones en el sitio, como: Los 12 mejores complementos de WordPress para bloggers y Cómo crear un formulario de envío de publicaciones de invitados en WordPress.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Ir arriba