Agregar descripción en ítems de menú WordPress

[ 17 diciembre 2016 ] [ Autor: Jhon Marreros Guzmán ][ Themes - Intermedio] [ ]

mejoras

Estas realizando modificaciones a tu menú y te preguntas, ¿qué tal quedaría si agrego una descripción por cada ítem de menú?, entonces vas y revisas la configuración de ítems de menú, agregas la descripción, pero tu theme no lo muestra.

Este es un problema común, la mayoría de temas no muestran por defecto la descripción del ítem de menú, pero no te preocupes, has llegado al artículo correcto.

1- Habilitando el campo de descripción

Esto es lo primero que tienes que hacer, ya que por defecto la descripción esta oculta, por lo que, desde el dashboard de WordPress, ve a Apariencia > Menús > Opciones de pantalla y luego marca la descripción, tal como se ve en la siguiente imagen:

2- Llenando las descripciones de los ítems

Luego por cada ítem de menú te aparecerá un campo adicional de descripción, tal como se muestra en la siguiente imagen:

3- Agregando código en functions.php

En este punto, si revisas tu theme puede ser que no se muestren las descripciones, por lo que será necesario hacer algunas modificaciones en el archivo functions.php del theme que estas usando.

add_filter('walker_nav_menu_start_el','dcms_agregar_descripcion',10,4);

function dcms_agregar_descripcion( $item_output, $item, $depth, $args ){
    if ( ! empty($item->description)){
        return str_replace( '</a>', '<br/><small>'.$item->description.'</small></a>', $item_output );        
    }
    return $item_output;
}

En el código anterior:

• Utilizamos el hook walker_nav_menu_start_el, que hace referencia a la función dcms_agregar_descripcion, se usa la prioridad por defecto y se pasará 4 parámetros. Este hook se llama por ítem de menú.
• La variable $item es el objeto de ítem de menú, dentro de la función validamos si el ítem de menú tiene una descripción, si no la tiene simplemente retornamos la variable $item_output.
• $item_output tiene el HTML generado para el ítem de menú, por lo que para hacer cambios será necesario usar una función de reemplazo o una expresión regular.
• Dentro de la función de reemplazo str_replace usamos nuevamente $item con su propiedad description, formamos el HTML para el nuevo elemento, reemplazando la etiqueta de cierre de link.

4- Resultado Final

De ser necesario puedes agregar CSS, sin embargo con la etiqueta HTML small y un salto de línea en la mayoría de themes sería suficiente.

Como resultado final obtendrás un bonito menú principal con descripciones, tal como se muestra en la imagen.

 
 
¿Aún con dudas?, en el siguiente video se explica cada uno de los puntos anteriores.

Valora este artículo : (4 votos, promedio: 5,00 de 5)

Cargando…