El sistema de menús de WordPress tiene una funcionalidad incorporada donde puede agregar descripciones con elementos de menú. Sin embargo, esta función está oculta de forma predeterminada. Incluso cuando está habilitado, su visualización no es compatible sin agregar 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, le mostraremos cómo habilitar descripciones de menú en WordPress y cómo agregar descripciones de menú en sus temas de WordPress.
Nota: Este tutorial requiere que tenga un buen conocimiento del desarrollo de temas HTML, CSS y WordPress.
Contents
Algunos usuarios piensan que agregar una descripción de menú ayudará con el SEO. Sin embargo, creemos que la razón principal por la que querría usarlos es para brindar una mejor experiencia de usuario en su sitio. Las descripciones se pueden utilizar para decirles a los visitantes 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.
Ir a Apariencia »Menús. Haga clic en Opciones de pantalla en la esquina superior derecha de la página. Marque la casilla Descripciones.
Esto activará el campo de descripción en los elementos de su menú. Así:
Ahora puede agregar descripciones de menú a sus elementos de menú de WordPress. Sin embargo, estas descripciones aún no aparecerán en sus temas. Para mostrar las descripciones de los menús, necesitaremos agregar algún código.
Paso 2: agregue la clase Walker:
La clase Walker extiende la clase existente en WordPress. Simplemente agrega una línea de código para mostrar las descripciones de los elementos del menú. Agrega este código al archivo functions.php de tu tema. class Menu_With_Description extiende Walker_Nav_Menu {función start_el (& $ salida, $ elemento, $ profundidad, $ args) {global $ wp_query; $ sangría = ($ profundidad)? str_repeat (» t», $ profundidad): »; $ nombre_clase = $ valor = «»; $ clases = vacío ($ artículo-> clases)? matriz (): (matriz) $ elemento-> clases; $ class_names = join (», apply_filters (‘nav_menu_css_class’, array_filter ($ clases), $ elemento)); $ nombres_clase = «clase =» «. esc_attr ($ nombres_clase). ‘»‘; $ salida. = $ sangría. ‘
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 su tema haya utilizado otro archivo de plantilla para mostrar los menús. Lo que tenemos que hacer ahora es encontrar la función wp_nav_menu () en su tema (probablemente en header.php) y cambiarla así.
‘primary’, ‘menu_class’ => ‘nav-menu’, ‘walker’ => $ walker)); ?> En la primera línea, definimos $ 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 wp_nav_menu existentes es ‘walker’ => $ walker.
Paso 4. Diseñar las descripciones
La clase de caminante que agregamos anteriormente muestra descripciones de elementos en esta línea de código: $ item_output. = ‘
«. $ artículo-> descripción. ‘‘; El código anterior agrega un salto de línea al elemento del menú al agregar un
etiqueta, luego envuelve sus descripciones en un rango con clase sub. Así:
¿Quiénes somos?
Para cambiar la forma en que aparecen sus descripciones en su sitio, puede agregar CSS en la hoja de estilo de su tema. Probamos esto en Twenty Twelve y usamos este CSS. .menu-item {borde izquierdo: 1px sólido #ccc; } span.sub {estilo de fuente: cursiva; tamaño de fuente: pequeño; } Esperamos que este artículo le resulte útil y que le ayude a crear menús interesantes con descripciones de menús en su tema. ¿Preguntas? Déjalos en los comentarios a continuación.
Recursos adicionales
Cómo dar estilo a los menús de navegación de WordPress Cómo agregar elementos personalizados a menús específicos de WordPress Menús de Bill Erickson con clase de descripción