Cómo añadir descripciones de menú en tus temas de WordPress

El sistema de menús de WordPress tiene una función incorporada que permite añadir descripciones a los elementos del menú. Sin embargo, esta función está oculta por defecto. Incluso cuando está activada, no es posible mostrarlas sin añadir algo de código. La mayoría de los temas no están diseñados teniendo en cuenta las descripciones de los elementos del menú. En este artículo te mostraremos cómo activar las descripciones de los menús en WordPress y cómo añadir descripciones de los menús en tus temas de WordPress

Nota: Este tutorial requiere que tengas un buen conocimiento de HTML, CSS y del desarrollo de temas de WordPress.

¿Cuándo y por qué querrías añadir descripciones en los menús?

Algunos usuarios piensan que añadir la descripción del menú ayudará con el SEO. Sin embargo, creemos que la razón principal por la que querrías utilizarlas es para ofrecer una mejor experiencia al usuario en tu sitio

Las descripciones pueden utilizarse para indicar a los visitantes lo que encontrarán si hacen clic en un elemento del menú. Una descripción intrigante atraerá a más usuarios a hacer clic en los menús

Paso 1: Activar las descripciones de los menús

Ir a Apariencia " Menús. Haz clic en Opciones de pantalla en la esquina superior derecha de la página. Comprueba el Descripciones caja.

Esto habilitará el campo de las descripciones en tus elementos de menú. Así:

Ahora puedes añadir descripciones de menú a los elementos de tu menú de WordPress. Sin embargo, estas descripciones aún no aparecerán en tus temas. Para mostrar las descripciones del menú tendremos que añadir algo de código.

Paso 2: Añade la clase walker:

La clase Walker extiende la clase existente en WordPress. Básicamente añade una línea de código para mostrar las descripciones de los elementos del menú. Añade este código en la sección de tu tema functions.php de tu tema.

class Menu_With_Description 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="'%20.%20esc_attr(%20$item->url%20)%20.'"' : '';

		$item_output = $args->before;
		$item_output .= '<a'. $attributes .'>';
		$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
		$item_output .= '<br /><span class="sub">' . $item->description . '</span>';
		$item_output .= '</a>';
		$item_output .= $args->after;

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

Paso 3. Habilitar Walker en wp_nav_menu

Los temas de WordPress utilizan wp_nav_menu() para mostrar los menús. También hemos publicado un tutorial para principiantes sobre cómo añadir menús de navegación personalizados en los temas de WordPress. La mayoría de los temas de WordPress añaden menús en header.php de la plantilla. Sin embargo, es posible que tu tema haya utilizado algún otro archivo de plantilla para mostrar los menús

Lo que tenemos que hacer ahora es encontrar wp_nav_menu() en tu tema (probablemente en header.php) y cambiarla así

<?php $walker = new Menu_With_Description; ?>

<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'walker' => $walker ) ); ?>

En la primera línea ponemos $walker para utilizar la clase de caminante que definimos antes en functions.php. En la segunda línea de código, el único argumento extra que tenemos que añadir a nuestros argumentos existentes de wp_nav_menu es 'walker' => $walker

Paso 4. Estilizar las descripciones

La clase del caminante que hemos añadido antes muestra las descripciones de los elementos en esta línea de código:

$item_output .= '<br /><span class="sub">' . $item->description . '</span>';

El código anterior añade un salto de línea al elemento del menú añadiendo un
y luego envuelve sus descripciones en un span con clase sub. Así

<li id="menu-item-99" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.example.com/about/">About<br /><span class="sub">Who are we?</span></a></li>

Para cambiar la apariencia de tus descripciones en tu sitio, puedes añadir CSS en la hoja de estilos de tu tema. Hemos probado esto en Twenty Twelve y hemos utilizado este css

.menu-item {
border-left: 1px solid #ccc;
}

span.sub { 
font-style:italic;
font-size:small;
}

Esperamos que este artículo te resulte útil y te ayude a crear menús con descripciones de menú de aspecto atractivo en tu tema. ¿Preguntas? Déjalas en los comentarios de abajo.

Recursos adicionales

Cómo dar estilo a los menús de navegación de WordPress

Cómo añadir elementos personalizados a menús específicos de WordPress

Bill Erickson's Menús con clase de descripción