• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Themes / Agregar descripción en ítems de menú WordPress

Agregar descripción en ítems de menú WordPress

Agregar descripción en ítems de menú WordPress

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

mejoras

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

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:

Habilitar descripcion

 

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:

Opcion de descripción en item menú

 

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.

Descipcion en items de Menú de WordPress

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

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • CRUD en WordPress sin pluginsCRUD en WordPress sin plugins
  • Cómo eliminar todos los productos de WooCommerceCómo eliminar todos los productos de WooCommerce
  • Agrupar los resultados de búsqueda en WordPressAgrupar los resultados de búsqueda en WordPress
  • tipos de complementos de WordPress5 tipos de complementos de WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (4 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Maximiliano Cifarelli

    4 enero, 2017

    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!

    • Jhon Marreros Guzmán

      4 enero, 2017

      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.

      • Álvaro

        7 julio, 2020

        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?

        • Jhon Marreros Guzmán

          8 julio, 2020

          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.

  2. Juan Mejia

    20 agosto, 2020

    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

    • Jhon Marreros Guzmán

      21 agosto, 2020

      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.

      • Juan Mejia

        24 agosto, 2020

        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

        • Jhon Marreros Guzmán

          24 agosto, 2020

          Hola, prueba con el siguiente código CSS:

          #et-top-navigation nav > ul > li > a > small{
            display: block;
            margin-top:8px;
          }
          
  3. Juan Mejia

    24 agosto, 2020

    Excelente Jhon, Mil gracias

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Agregar Tabs personalizados en WooCommerce sin plugins

Autenticación con JWT en la API de WordPress

Entradas relacionadas mejoradas sin plugins en WordPress

Barra inferior fija para móviles en WordPress

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados