El sistema de menús de WordPress tiene una función integrada donde puedes agregar descripciones a los elementos del menú. Sin embargo, esta función está oculta por defecto. Incluso cuando está habilitada, mostrarlas no es compatible sin agregar algo de 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, te mostraremos cómo habilitar las descripciones de menú en WordPress y cómo agregar descripciones de menú en tus temas de WordPress.
Nota: Este tutorial requiere que tengas un buen entendimiento de HTML, CSS y desarrollo de temas de WordPress.
¿Cuándo y por qué querrías agregar descripciones a los menús?
Algunos usuarios creen que agregar descripciones a los menús ayudará con el SEO. Sin embargo, creemos que la razón principal por la que querrías usarlas es para ofrecer una mejor experiencia de usuario en tu sitio.
Las descripciones se pueden usar para decirle 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ú
Ve a Apariencia » Menús. Haz clic en el botón Opciones de pantalla en la esquina superior derecha de la página. Marca la casilla de Descripciones.
Esto habilitará el campo de descripciones en tus elementos de menú. Así:
Ahora puedes agregar descripciones a los elementos de tu menú de WordPress. Sin embargo, estas descripciones aún no aparecerán en tus temas. Para mostrar las descripciones de menú, tendremos que agregar algo de código.
Paso 2: Agregar la clase walker:
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 el archivo functions.php de tu tema.
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 = ' class="' . esc_attr( $class_names ) . '"';
$output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $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 class="sub">' . $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. Habilitar Walker en wp_nav_menu
Los temas de WordPress usan la función wp_nav_menu() para mostrar 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 la plantilla header.php. Sin embargo, es posible que tu tema haya utilizado algún otro archivo de plantilla para mostrar menús.
Lo que necesitamos hacer ahora es encontrar la función wp_nav_menu() en tu tema (lo más probable es que esté en header.php) y cambiarla 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, establecemos $walker para usar la clase walker que definimos anteriormente en functions.php. En la segunda línea de código, el único argumento adicional que necesitamos agregar a nuestros argumentos existentes de wp_nav_menu es 'walker' => $walker.
Paso 4. Estilizando las descripciones
La clase walker que agregamos anteriormente muestra las descripciones de los elementos en esta línea de código:
$item_output .= '<br /><span class="sub">' . $item->description . '</span>';
El código anterior agrega un salto de línea al elemento del menú añadiendo una etiqueta
<li id="menu-item-99" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.example.com/about/">About<br /><span class="sub">Who are we?</span></a></li>
Para cambiar cómo aparecen tus descripciones en tu sitio, puedes agregar CSS en la hoja de estilos de tu tema. Estuvimos probando esto en Twenty Twelve y usamos este css.
.menu-item {
border-left: 1px solid #ccc;
}
span.sub {
font-style:italic;
font-size:small;
}
Esperamos que encuentres útil este artículo y que te ayude a crear menús con descripciones geniales en tu tema. ¿Preguntas? Déjalas en los comentarios a continuación.
Recursos adicionales
Cómo estilizar menús de navegación de WordPress
Cómo agregar elementos personalizados a menús específicos de WordPress
Menús con clase de descripción de Bill Erickson
Matthew Blaxton
En PHP 8.0 y superior, esto generará un error crítico.
Necesitas encontrar esta línea:
function start_el( $output, $item, $depth, $args ) {
Cambiar esa línea a la siguiente debería hacer que el error desaparezca:
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
Soporte de WPBeginner
Gracias por compartir eso para quienes usan PHP 8.
Administrador
Norman
Hola,
¿Cómo puedes hacer que la descripción también sea enlazable?
Soporte de WPBeginner
We cover that in step 4
Administrador
kayvan A.Gilani
Para agregar descripciones de menú en mis temas de WordPress, hice los pasos 1 y 2 de este blog, pero no pude seguir el paso 3 para avanzar y realizar el cambio total.
Soporte de WPBeginner
Si no puedes encontrar la función en tu tema, te recomendamos contactar al soporte de tu tema específico y ellos deberían poder ayudarte.
Administrador
yiannis
Hola,
¿Cómo deshabilitar la descripción de la categoría de producto en max mega menu?
Ya he ido a Mega Menu > General Settings y he configurado Menu Item Descriptions en disabled, pero el problema persiste.
Soporte de WPBeginner
Deberías contactar al soporte del plugin y ellos podrán ayudarte con la configuración que no funciona correctamente.
Administrador
Sergio
¡Muchas gracias!
Soporte de WPBeginner
You’re welcome
Administrador
Lanka
Muchas gracias, me salvaste
JKLYN
Gracias. Me ahorraste tiempo.
dan
¿Puede esto funcionar con WP_Bootstrap_Navwalker?
ya que lo he intentado y rompe mi sitio...
kalpana
Muchísimas gracias... fue muy útil para mí... me salvaste el día
Steven
¿cómo apagar la descripción en el diseño móvil?
Anzani Zahrani
Hola.. Por favor Ayuda..
¿Cómo agregar el título de la categoría, sin usar la descripción del título de la categoría?
Ido Schacham
¡Totalmente útil, gracias!
Rahman
Gran consejo, pero en la descripción del menú no admite etiquetas html. ¿Alguien sabe algo sobre esto?
Gracias
Iryna
Hola a todos,
¿Alguna idea de cómo permitir etiquetas html en la descripción?
remove_filter(‘nav_menu_description’, ‘strip_tags’);
esta no me funciona.
Damien Carbery
@Iryna: ¿Puedes publicar tu código en algún sitio, por ejemplo pastebin.com.
Dónde llamas a remove_filter() determinará si funciona – tiene que ser llamado después de la llamada a add_filter().
Llamarlo justo antes de la llamada a wp_nav_menu() podría funcionar.
Max
¿Hay alguna manera de que la descripción no sea un hipervínculo?
Ashok
gracias… funcionó. pero en la descripción del menú no admite etiquetas html.
igorasas
¿Ya podría estar ahí listo para enchufar? ¿Cómo funcionará este hack con el tema "Twenty TwelveVersión: 1.5"
? ¿Y al igual que con el plugin wpml?
Guy
Gracias por el consejo
Phong
Gracias, esto fue realmente útil para simplemente copiar y pegar esto y obtener la imagen rápida.
Chad
Oye amigo, agregué la clase walker a functions.php, pero no encuentro wp_nav_menu en el tema genesis. ¿Qué me falta? ¡¡¡No tengo idea de qué hacer a continuación?!?!
Ksenia
Explica muy bien – detallado y claro. 1 minuto y las descripciones de los menús están bien. ¡Gracias!
Mary Anne
Muchas gracias por este tutorial. Me lo recomendaron y funcionó perfectamente para hacer los cambios que quería. Sin embargo, al hacer estos cambios, perdí mis menús desplegables de subelementos. ¿Alguna idea de qué afectó eso en el cambio de código?
Gracias por tu tiempo y tutorial
Soporte de WPBeginner
Parece un problema de CSS, lamentamos no poder ser más específicos. Intenta usar las herramientas de desarrollador de Google Chrome para depurarlo.
Administrador
Paul Renault
He implementado las descripciones del menú y funcionó muy bien. Ahora mi cliente está pidiendo un salto de línea dentro de una de las descripciones. He intentado poner un retorno de carro e insertar una etiqueta
en el campo de descripción a través del administrador. No aparece en el front-end. WP elimina estas ediciones. ¿Hay alguna manera de remediar esto?
Soporte de WPBeginner
Si tu cliente solo quiere espaciado, puedes usar CSS para eso.
Administrador
Paul Renault
El cliente quiere un salto de línea. ¿Hay alguna manera de insertar una etiqueta
en la descripción? Si pongo una ahora, se elimina.
Barry
Genial tutorial, chicos, solo quiero saber cómo implementar esto en un menú personalizado que se muestra usando el widget de menú personalizado.
Oryan Consulting
¡Gracias! He estado trabajando en WordPress durante años y nunca había oído hablar de esto. Estaba buscando eliminar las descripciones, ya que eran muy redundantes en el sitio en el que estoy trabajando. Busqué por todas partes de dónde venían.
¡Oh, qué alegría!
sambassador
¡Funciona!
pero para php 5.4 tendrás que igualar los argumentos del walker de wp para la función start_el:
function start_el( &$output, $object, $depth = 0, $args = array(), $current_object_id = 0 )
y busca y reemplaza $item con $object.
Steve Covello
¡Eres genial! Funcionó perfectamente.
Kevin Gilbert
Perfecto. Esto era justo lo que necesitaba para terminar un sitio. Tuve algunos problemas con el CSS, pero finalmente lo resolví y lo hice funcionar. Gracias por los excelentes artículos.
Jon
¡Excelente consejo. Funcionó perfectamente!
Jedediah White
Esto funcionó perfectamente para mí. La función de clase también es perfecta. ¡Muchas gracias!
Pankaj
Necesitaba crear lo mismo y estaba totalmente perdido.
Estaba planeando hacer algunas cosas estúpidas para que esto se hiciera.
¡Gracias a Dios que encontré esta publicación y ahorré tiempo y estrés!
Simplemente amo este sitio, aprendí tantas cosas.
Muchas gracias por mostrar las cosas más fáciles aquí.
Pankaj
La etiqueta span también aparece en los submenús.
no se muestra ahí, pero ocupa tanto espacio que se ve muy mal.
¿Hay alguna solución para lo mismo??
DiTesco
Este es realmente un gran tutorial y me preguntaba si esto funcionaría en Thesis 1.8.5. Si no, sería genial si pudieras proporcionar uno. Ciertamente te ayudaré a publicarlo. ¡Pulgares arriba!
svet
Seguí tu tutorial y agregué una descripción a mi menú. ¡Gracias! Sin embargo, cuando estoy en modo móvil, el menú se convierte en un menú desplegable y el título del menú y la descripción se conectan. Por ejemplo, si mi elemento de menú es “acerca de” y la descripción “más sobre mí”, la versión móvil muestra “acerca demás sobre mí”. ¿Hay alguna forma de solucionar esto?
David
Tuve el mismo problema. Esto es lo que hice.
Cambié esto:
$description = ! empty( $item->description ) ? ‘<span>’.esc_attr( $item->description ).'</span>’ : ”;
A esto:
$description = ! empty( $item->description ) ? ‘<br /><span>’.esc_attr( $item->description ).'</span>’ : ”;
No estoy seguro de si es la mejor solución, pero a mí me funcionó.
Garrett Hyder
Gracias chicos, me encontré con lo que SVET y DAVID hicieron con el menú móvil.
El código parece haber cambiado mi cambio fue simplemente agregar un span con el separador de guiones y en mi consulta de escritorio simplemente lo suprimí ya que no era necesario allí.
$item_output .= ‘ – ‘;
Dentro de mi consulta "Solo Escritorio" establecí el span en display none;
@media only screen and (min-width: 740px) {
header #submenu li span.dash { display:none; }
Espero que eso ayude, manejó mi problema muy bien.
Nicola
Gran publicación – muy clara, exactamente lo que necesitaba y funcionó perfectamente. ¡Gracias!
Samedi Amba
Gracias por el gran tutorial. He completado los pasos principales bien, como puedes ver en
http://ueab.ac.ke/demo/index
Me quedé atascado con el estilo, ¿cómo reduzco el espacio entre la etiqueta del menú principal y la descripción? Tu ayuda es muy apreciada.
Personal editorial
Tiene que ver con el line-height de tu clase .menu a de tu tema. Si reduces eso, el espaciado se reducirá solo.
Administrador
Chris Rouse
Gran publicación. He intentado investigar esto antes, pero las instrucciones anteriores que encontré no fueron tan fáciles de seguir. Pude insertar el código de functions.php, averiguar cómo cambiar la clase walker en mi archivo de encabezado (diferente para el tema que uso, pero sencillo) y poner las cosas en marcha en unos 15 minutos de principio a fin.
Una pieza que quizás quieras agregar es cómo incluir el borde derecho en el último elemento del menú usando la propiedad :last-child.
.menu-item:last-child { color: #ccc; }
Damien Carbery
En lugar de extender Walker_Nav_Menu, sería bueno (y más fácil) si se proporcionara un filtro, por ejemplo: Si el código principal tuviera: $item_output .= apply_filters( ‘walker_nav_menu_description’, $item->description);
Entonces la función de filtro personalizada solo tendría: return "" . $description . "";
Cathy Earle
Gran información… voy a empezar a agregar esto a mis sitios. ¡Gracias!