How To Add Menu Descriptions In Wordpress Themes

Cómo agregar descripciones de menú en sus temas de WordPress

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.

¿Cuándo y por qué querría agregar descripciones de menú?

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.

Descripciones De Menú

Paso 1: active las descripciones del menú

Ir a Apariencia »Menús. Haga clic en Opciones de pantalla en la esquina superior derecha de la página. Marque la casilla Descripciones.
Habilitar Descripciones De Menú En Wordpress
Esto activará el campo de descripción en los elementos de su menú. Así:
Campo De Descripción Agregado A Los Elementos Del Menú
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. ‘

  • Sobre
    ¿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

    Leave a Reply