El sistema de menús de WordPress tiene una función incorporada en la que puede agregar descripciones con elementos de menú. Sin embargo, esta función está oculta de forma predeterminada. Incluso cuando está habilitado, no es posible mostrarlos sin agregar algún 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 una comprensión justa 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 del menú ayudará con el SEO. Sin embargo, creemos que la razón principal por la que querría utilizarlos es para ofrecer 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.
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. Comprobar el Descripciones caja.
Esto habilitará el campo de descripciones en los elementos de su menú. Como esto:
Ahora puede agregar descripciones de menú a elementos en su menú de WordPress. Sin embargo, estas descripciones aún no aparecerán en sus temas. Para mostrar las descripciones del menú tendremos que agregar algún código.
Paso 2: agregue la clase de caminante:
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 tu tema functions.php
expediente.
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. Habilite Walker en wp_nav_menu
Uso de temas de WordPress wp_nav_menu () función 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 header.php
plantilla. Sin embargo, es posible que su tema haya utilizado algún otro archivo de plantilla para mostrar menús.
Lo que tenemos que hacer ahora es encontrar wp_nav_menu()
función en su tema (muy probablemente en header.php) y cámbielo 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 de caminante 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 .= '<br /><span class="sub">' . $item->description . '</span>';
El código anterior agrega un salto de línea al elemento del menú agregando un
etiqueta y luego envuelve sus descripciones en un intervalo con clase sub. Como esto:
<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 la forma en que aparecen sus descripciones en su sitio, puede agregar CSS en la hoja de estilo de su tema. Estábamos 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 este artículo le resulte útil y le ayude a crear menús atractivos 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
Bill Erickson Menús con clase de descripción