El sistema de menús de WordPress tiene una función integrada en la que puede agregar descripciones con los elementos del menú. Sin embargo, esta función está oculta de forma predeterminada. Incluso si está habilitado, no se admite mostrarlos sin agregar algún 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, le mostraremos cómo habilitar las descripciones de menú en WordPress y cómo agregar descripciones de menú en su tema de WordPress.

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

Nota: este tutorial requiere que tenga algún conocimiento del desarrollo de temas de HTML, CSS y WordPress.

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

Algunos usuarios sienten que agregar descripciones de menú ayudará con el SEO. Sin embargo, creemos que la razón principal por la que desea utilizarlos es para brindar una mejor experiencia de usuario en su sitio web.

Las descripciones se pueden utilizar para decirles a los visitantes lo que encontrarán si hacen clic en un elemento del menú. Una descripción interesante atraerá a más usuarios a hacer clic en el menú.

descripción del menú

Paso 1: Instrucciones del menú abierto

ir con Apariencia » MenúHaga clic en opciones de pantalla botón en la esquina superior derecha de la página. Marque la casilla Descripción.

Habilitar descripciones de menú en WordPress

Esto habilitará el campo de descripción en el elemento del menú. como esto:

Campo de descripción agregado al elemento del menú

Ahora puede agregar descripciones de menú a elementos en su menú de WordPress. Sin embargo, estas descripciones aún no aparecerán en su tema. Para mostrar la descripción del menú, tenemos que agregar algo de código.

Paso 2: Agrega la clase de caminante:

La clase Walker amplía las clases existentes en WordPress. Básicamente, solo agrega una línea de código para mostrar la descripción del elemento del menú.agrega este código a tu tema functions.php documento.

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

		$output .= $indent . '<li ' . $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 >' . $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

Los temas de WordPress usan la función wp_nav_menu() para mostrar los menús. También publicamos 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 están en header.php plantilla. Sin embargo, su tema puede usar un archivo de plantilla diferente para mostrar el menú.

Lo que tenemos que hacer ahora es encontrar wp_nav_menu() Ejecute su tema (muy probablemente en header.php) y cámbielo 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 Use la clase de caminante que definimos anteriormente functions.phpEn la segunda línea de código, el único parámetro adicional que necesitamos agregar al parámetro wp_nav_menu existente es 'walker' => $walker.

Paso 4. Estiliza la descripción

La clase de caminante que agregamos anteriormente muestra la descripción del elemento en esta línea de código:

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

El código anterior funciona agregando una nueva línea al elemento del menú
etiqueta, luego ajuste su descripción en un lapso con subclases. como esto:

<li  ><a href="http://www.example.com/about/">About<br /><span >Who are we?</span></a></li>

Para cambiar la forma en que se muestra la descripción en su sitio web, puede agregar CSS a la hoja de estilo de su tema. Probamos en Twenty Twelve y usamos este css.

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

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

Esperamos que encuentre útil este artículo y que lo ayude a crear menús geniales con descripciones de menú en su tema. ¿problema? Déjalas en los comentarios a continuación.

Otros recursos

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

Cómo agregar elementos personalizados a un menú específico de WordPress

Menú de Bill Erickson con clases de descripción

Los datos expuestos en este sitio web son de índole informativo, no necesariamente están actualizados. Esta información es una recopilación de información de internet.