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

El sistema de menú de WordPress tiene una característica incorporada donde puede agregar descripciones con los elementos del menú. Sin embargo, esta característica está oculta por defecto. Incluso cuando está habilitado, mostrarlos no es compatible 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 sus temas de WordPress.

Nota: este tutorial requiere que tengas un buen entendimiento del desarrollo de los temas HTML, CSS y WordPress.

¿Cuándo y por qué querría agregar descripciones de menú??

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

Las descripciones se pueden usar para decirles a los visitantes qué 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 Descripciones de Menú

Ir Apariencia »Menús. Haga clic en Opciones de pantalla Botón en la esquina superior derecha de la página. Comprobar el Descripciones caja.

Esto habilitará el campo de descripciones en los elementos de su menú. Me gusta esto:

Ahora puede agregar descripciones de menú a los elementos en su menú de WordPress. Sin embargo, estas descripciones aún no aparecerán en tus temas. Para mostrar las descripciones de los menús tendremos que añadir 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 en tu tema funciones.php expediente.

 la clase Menu_With_Description extiende Walker_Nav_Menu function start_el (& $ output, $ item, $ depth, $ args) global $ wp_query; $ sangría = ($ profundidad)? str_repeat ("\ t", $ depth): "; $ class_names = $ value ="; $ clases = vacío ($ item-> clases)? array (): (array) $ item-> classes; $ class_names = join (", apply_filters ('nav_menu_css_class', array_filter ($ classes), $ item)); $ class_names = ''; $ output. = $ indent. ''; $ atributos =! ¿vacío ($ item-> attr_title)? '': "; $ attributes. =! empty ($ item-> target)? 'target ="'. esc_attr ($ item-> target). '"':"; $ atributos. =! ¿vacío ($ item-> xfn)? 'rel = "'. esc_attr ($ item-> xfn). '"': "; $ attributes. =! empty ($ item-> url)? 'href ="'. esc_attr ($ item-> url). '"':"; $ item_output = $ args-> before; $ item_output. = ''; $ item_output. = $ args-> link_before. apply_filters ('the_title', $ item-> title, $ item-> ID). $ args-> link_after; $ item_output. = '
'. $ item-> descripción. ''; $ item_output. = ''; $ 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 usan la función wp_nav_menu () para mostrar los 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, es posible que su tema haya 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 tu tema (muy probablemente en header.php) y cámbiala así.

   'primary', 'menu_class' => 'nav-menu', 'walker' => $ walker)); ?> 

En la primera línea ponemos $ caminante utilizar la clase de caminante que definimos anteriormente en funciones.php. En la segunda línea de código, el único argumento adicional que necesitamos agregar a nuestros argumentos existentes wp_nav_menu es 'walker' => $ walker.

Paso 4. Diseño de las descripciones.

La clase de caminante que agregamos anteriormente muestra descripciones de artículos en esta línea de código:

 $ item_output. = '
'. $ item-> descripción. ''; 

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

 
Acerca de
Quienes somos?
 

Para cambiar la forma en que aparecen sus descripciones en su sitio, puede agregar CSS en la hoja de estilos de su tema. Estábamos probando esto en Twenty Twelve y usamos este css.

 .menu-item border-left: 1px solid #ccc;  span.sub font-style: italic; tamaño de letra: pequeño;  

Esperamos que encuentre útil este artículo y que lo ayude a crear menús de aspecto atractivo con descripciones de menú en su tema. Preguntas? Déjalos en comentarios abajo.

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

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