Cómo agregar descripciones de menú en temas de WordPress

El sistema de menús de WordPress tiene una función incorporada en la que puede agregar descripciones con elementos de menú. Sin embargo, esta función está oculta de forma predeterminada. Incluso si está habilitado, su visualización no es compatible sin agregar código. La mayoría de los temas no están diseñados teniendo en cuenta descripciones de los elementos del menú. En este artículo, le mostraremos cómo habilitar descripciones de menú en WordPress y cómo agregar descripciones de menú en sus temas de WordPress.

Nota: Este tutorial requiere una buena comprensión del desarrollo de temas HTML, CSS y WordPress.

¿Cuándo y por qué desea agregar descripciones de menú?

Algunos usuarios piensan que agregar la descripción del menú puede ayudar con el SEO. Sin embargo, creemos que la razón principal por la que querría usarlos es para brindar una mejor experiencia de usuario en su sitio.

Las descripciones se pueden utilizar para decirles a los visitantes lo que encontrarán si han hecho 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 del menú

Ir Apariencia »Menú. Haga clic en Opciones de pantalla en la esquina superior derecha de la página. Marque la casilla Descripciones.

Esto habilitará el campo de descripción en los elementos del menú. Me gusta esto:

Ahora puede agregar descripciones de menú a elementos en su menú de WordPress. Sin embargo, estas descripciones aún no aparecerán en sus temas. Para ver las descripciones del menú, necesitaremos agregar algún código.

Paso 2: agregue la clase de caminante:

La clase Walker extiende la clase existente en WordPress. Básicamente, solo agrega una línea de código para mostrar las descripciones de los elementos del menú. Agrega este código a tu tema functions.php archivo.

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

		$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. Habilite Walker en wp_nav_menu

Uso de temas de WordPress wp_nav_menu () función para mostrar menús. También hemos publicado un tutorial para principiantes sobre cómo agregar menús de navegación personalizados en temas de WordPress. La mayoría de los temas de WordPress agregan menús en header.php modelo. Sin embargo, su tema puede haber usado algún otro archivo de plantilla para mostrar los menús.

Lo que tenemos que hacer ahora es encontrar wp_nav_menu() funciona en su tema (probablemente en header.php) y cámbielo de esa manera.

<?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 establecemos $walker para usar la clase de caminante que definimos anteriormente en functions.php. En la segunda línea de código, el único argumento adicional que necesitamos agregar a nuestros argumentos wp_nav_menu existentes es 'walker' => $walker.

Paso 4. Descripciones de estilo

La clase walker que agregamos anteriormente muestra las descripciones de los objetos en esta línea de código:

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

El código anterior agrega un salto de línea al elemento del menú agregando un archivo
etiqueta y luego envuelve sus descripciones en un rango con clase sub. Me gusta esto:

<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 el aspecto de las descripciones en su sitio, puede agregar CSS en la hoja de estilo del tema. Lo estábamos probando en Twenty Twelve y usamos este CSS.

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

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

Esperamos que este artículo le resulte útil y le ayude a crear menús de gran apariencia con descripciones de menús en su tema. Preguntas? Déjalos en los comentarios a continuación.

Recursos adicionales

Cómo diseñar los menús de navegación de WordPress

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

Bill Erickson Menú con clase de descripción