Propiedades avanzadas de menú en WordPress

[ 4 septiembre 2018 ] [ Actualizado: 10 septiembre 2018 ] [ Autor: Jhon Marreros Guzmán ][ Core - Básico] [ ]

funcionalidad

Cuando creas ítems de menú en WordPress, desde Apariencia > Menús, por defecto verás que sólo aparecen las opciones básicas para un ítem de menú, sin embargo existen otras opciones que WordPress oculta por defecto y que podrían resultarte útiles

1- Habilitar propiedades avanzadas de menú

Para habilitar las propiedades avanzadas de menú en WordPress, ingresa a Apariencia > Menús, en la parte superior verás las opciones de pantalla, al desplegar las opciones de pantalla verás que puedes marcar opciones adicionales, tal como se muestra en la siguiente imagen.

2- Propiedades avanzadas en los ítems de menú

Luego que selecciones cada una de las propiedades avanzadas, entonces aparecerá campos adicionales en cada ítem de menú, tal como se ve en la siguiente imagen:

 
Como propiedades avanzadas adicionales se incluyen:

• Destino del enlace: genera el campo «abrir enlace en una pestaña nueva», es decir agrega target=»_blank», útil especialmente para links externos.
• Atributo del título: permite ingresar un título para el enlace, se muestra cuando se pasa el ratón sobre el enlace y además sirve para accesibilidad.
• Clase CSS: Permite agregar una clase CSS al parent del enlace, usualmente al elemento HTML li, útil si se quiere dar un diseño personalizado al enlace.
• Relación con el enlace (XFN): Microformato HTML para el enlace, agrega un atributo rel al cual pueden asignarse diferentes valores que indiquen la relación con el enlace.
• Descripción: Texto descriptivo del enlace, no todos los themes lo soportan. Puedes revisar el artículo: agregar descripción a los ítems de menú en WordPress

3- Ejemplo de uso de propiedades avanzadas de enlace

En la siguiente imagen se puede ver un ejemplo de uso de estas propiedades avanzadas, se ha creado un nuevo ítem de menú que hace referencia a una cuenta personal en Twitter.

 
Al guardar el enlace si vemos el front-end del sitio veremos que se genera el siguiente código HTML.

<li id="menu-item-123" class="twitter-menu menu-item">
	<a title="Mi Twitter personal" target="_blank" rel="me" href="https://twitter.com/decodecms">
	Mi Twitter
	</a>
</li>

4- Conclusión

A pesar de que estas propiedades avanzadas de menú se encuentran ocultas por defecto, te sugiero tenerlas en cuenta cuando crees tu menú, de esta manera podrás especificar aún más los enlaces de tu menú con estas configuraciones adicionales.

 
¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores.

Valora este artículo : (2 votos, promedio: 5,00 de 5)

Cargando…