Cómo agregar descripciones de menú en sus temas de WordPress
El sistema de menús de WordPress tiene una función incorporada en la que puede añadir descripciones con elementos de menú. Sin embargo, esta característica está oculta por defecto. Incluso cuando está habilitado, no se puede mostrarlos sin añadir algún código. La mayoría de los temas no se diseñan teniendo en cuenta las descripciones de los elementos del menú. En este artículo le mostraremos cómo habilitar descripciones de menú en WordPress y cómo añadir descripciones de menú en sus temas de WordPress.
Nota: Este tutorial requiere que usted tenga un buen entendimiento del desarrollo de temas en HTML, CSS y WordPress.
¿Cuándo y por qué desea agregar descripciones de menús?
Algunos usuarios piensan que añadir la descripción del menú ayudará con el SEO. Sin embargo, creemos que la razón principal por la que usted querría usarlos es para ofrecer una mejor experiencia de usuario en su sitio.
Las descripciones se pueden utilizar para informar a los visitantes de lo que 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 las descripciones del menú
Vaya a Apariencia " Menús . Haga clic en el botón Opciones de pantalla en la esquina superior derecha de la página. Marque la casilla Descripciones .
Esto habilitará el campo de descripciones en los elementos de su menú. Así:
Ahora puede añadir descripciones de menú a los elementos de su menú de WordPress. Sin embargo, estas descripciones no aparecerán todavía en sus temas. Para mostrar las descripciones de los menús tendremos que añadir algún código.
Paso 2: Añadir la clase de caminante:
La clase Walker amplía la clase existente en WordPress. Básicamente sólo añade una línea de código para mostrar las descripciones de los elementos del menú. Añada este código en el archivo functions.php de su tema.
12345678910111213141415161717181920212223242526272829classMenu_With_Description extendsWalker_Nav_Menu { functionstart_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= '>. esc_attr( $nombres_de_clase) . "$output.= $indent. '
'. artículo->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 el menú 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 añadir menús de navegación personalizados en temas de WordPress. La mayoría de los temas de WordPress añaden menús en la plantilla header.php. Sin embargo, es posible que el tema haya utilizado algún otro archivo de plantilla para mostrar los menús.
Lo que tenemos que hacer ahora es encontrar la función wp_nav_menu() en tu tema (muy probablemente en header.php) y cambiarla así.
123 ` primary', `menú_de_menú_de_menú_de_menú_de_menú_de_menú_de_menú_de_menú_de_menú de_menú_de_menú_de_menú de_de_nombre_de_de_nombre_de_de_de_nombre_de_de_negocio
En la primera línea establecimos $walker para usar la clase de caminante que definimos anteriormente en functions.php. En la segunda línea de código, el único argumento extra que necesitamos añadir a nuestros argumentos existentes del wp_nav_menu es'walker' => $walker.
Paso 4. Estilo de las descripciones
La clase de caminante que agregamos anteriormente muestra las descripciones de los artículos en esta línea de código:
1$item_output.= `
'. artículo->descripción . '';
El código anterior añade un salto de línea al elemento de menú añadiendo un
y luego envuelve tus descripciones en un espacio con class sub. Así:
1
¿Quiénes somos?
Para cambiar la forma en que sus descripciones aparecen 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.
12345678.menu-item {border-left: 1pxsolid#ccc;} span.sub{ font-style:italic;font-size:small;}
Esperamos que este artículo le resulte útil y le ayude a crear menús atractivos con descripciones de menús en su tema. ¿Preguntas? Déjelos en los comentarios de abajo.
Recursos adicionales
Cómo Estilizar los Menús de Navegación de WordPress
Cómo añadir elementos personalizados a menús específicos de WordPress
Menús de Bill Erickson con Descripción Clase
Deja una respuesta