• Ir a navegación principal
  • Ir al contenido principal
  • Ir a la barra lateral primaria

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
Inicio / Tutoriales / Core / Propiedades avanzadas de menú en WordPress
Anuncio banner webservi

Propiedades avanzadas de menú en WordPress

Propiedades avanzadas de menú en WordPress

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

funcionalidad

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

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.

Mostrar opciones de pantalla menú

 

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:

Pantalla ítem de menú antes y después de habilitar propiedades avanzadas

 
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

Para generar el enlace XFN y ver todas las opciones que ofrece puedes revisar XFN creator

 

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.

Llenado de propiedades avanzadas de enlace

 
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.

Suscríbete a DecodeCMS:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Exportar / importar  la configuración del personalizador de temas en WordPressExportar / importar la configuración del personalizador de temas en WordPress
  • Personalizar página de gracias de WooCommercePersonalizar página de gracias de WooCommerce
  • Configura el tema Twenty Twenty One WordPressConfigura el tema Twenty Twenty One WordPress
  • Abrir enlaces externos en un nuevo tab automáticamenteAbrir enlaces externos en un nuevo tab automáticamente
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (3 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Maria

    19 septiembre, 2020

    Tengo una duda.
    En el footer de mi web tengo todo lo de cookies, privacidad, aviso legal…etc.
    Duda: ¿Dónde le pongo a esas páginas que el ENLACE ES NOFOLLOW?
    No encuentro dónde ponerlo.
    Es para que google no indexe esas páginas. Ya le puse NO INDEX, pero aparte debo poner ENLACE NO FOLLOW a dichas página de legalidad.
    Dónde es? No lo encuentro?
    Muchas gracias
    Saludos

    • Jhon Marreros Guzmán

      22 septiembre, 2020

      Hola

      Entiendo que estas usando un plugin para las cookies, tendrías que revisar la configuración del plugin, o sino lo tienes tendrías que consultar con el desarrollador ya que implica posiblemente buscar en el código.

      Saludos.

  2. Mar

    6 octubre, 2020

    Hola, muy buena explicación sobre opciones avanzadas para menú
    Una consulta, el poner el enlace -url personalizada- quiero que vaya hacia una página que lleva # (ya que esta enlaza en cada una de las partes de esa web), pongo el enlace laweb/producto/#colores hasta ahí todo ok, guardo, pero al ir a mi sitio, ir al menú donde he puesto el enlace -laweb/producto/#colores- veo que me agrega una guión bajo después de # y queda así laweb/producto/#_colores y claro ya no lleva a colores, lleva al inicio de esa url y mi idea es que vaya a colores (como está en laweb/producto/#colores), por qué sucede esto, hay alguna manera de solucionarlo?
    Gracias
    Mar

    • Jhon Marreros Guzmán

      7 octubre, 2020

      Hola
      Es muy raro que te agregue un caracter, si accedes al menú lo ves guardado correctamente o también se cambia?, prueba temporalmente cambiar de theme y configura su menú y verifica si te sucede lo mismo.

  3. Mar

    7 octubre, 2020

    Hola Jhon, gracias por tu respuesta
    En realidad no hay plugin para cookies, puede ser algún otro plugin que afecte?
    Alguna otra posibilidad?
    Saludos

    • Jhon Marreros Guzmán

      7 octubre, 2020

      Hola, posiblemente sea parte de la funcionalidad de tu theme, podrías probar cambiando de theme temporalmente.

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral primaria

Presentación

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
Los 5 posibles errores que estas cometiendo cuando trabajas con código en WordPress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social

Populares

Agregar redes sociales en la cabecera de WordPress

Agregar CSS en WordPress de manera correcta

Jerarquía de Archivos de Plantilla en WordPress

Estilos de editor en Gutenberg

Recientes

  • Exportar / importar la configuración del personalizador de temas en WordPress
  • Personalizar página de gracias de WooCommerce
  • Configura el tema Twenty Twenty One WordPress
  • Abrir enlaces externos en un nuevo tab automáticamente
alojamiento wordpress

© logo decode pie Copyright 2021 | Todos los derechos reservados | Política de Privacidad