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.
Artículos Relacionados
(4 votos, promedio: 5,00 de 5)
Cargando...
Hola!
Muy bueno, aunque me resultaría mejor que la descripción aparezca solo al pasar el puntero por encima, así se pueden agregar descripciones mas detalladas, aunque no se si seria posible, soy muy novato, solo es una idea 🙂
Saludos!
Lo que comentas sería posible con CSS, no lo veo muy práctico si el ítem tiene subitems de menú, porque estos subitems también se muestran al pasar el mouse sobre el ítem de menú padre.
Hola, Jhon. Este código me ha resultado muy, muy útil. Me interesa mucho lo que decías de que es posible, con CSS, mostrarlo sólo si pasas el ratón por encima. La idea sería que aparezca una caja justo debajo del menú con el texto en pequeñito explicando de qué va la sección, y que sólo salga al pasar el ratón por encima. ¿Podrías echarme un cable?
Hola, envíame la url del sitio en donde lo has implementado para revisar. De manera general sería ocultar las descripciones por defecto y sólo mostrarlas cuando se pasa el mouse, todo esto con CSS.
Tengo un inconveniente con los espacios puesto que mi descripción se ve muy cerca al nombre de la página, ¿como le puedo dar un poco más de espacio?, mi url es https://ssaoconsultores.com
Hola, es posible que se requiera ajustar con código CSS, sin embargo al consultar tu sitio no veo que actualmente se muestre la descripción. Saludos.
Hola Jhon, ya volvi a activar la descripción del menú, la habia borrado por lo que se ve tan feo, pero la voy a dejar así si la puedees revisar te agradezco
Hola, prueba con el siguiente código CSS:
Excelente Jhon, Mil gracias