• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Core / Propiedades avanzadas de menú en WordPress

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

  • CRUD en WordPress sin pluginsCRUD en WordPress sin plugins
  • Cómo eliminar todos los productos de WooCommerceCómo eliminar todos los productos de WooCommerce
  • Agrupar los resultados de búsqueda en WordPressAgrupar los resultados de búsqueda en WordPress
  • tipos de complementos de WordPress5 tipos de complementos de WordPress
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 principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

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

Populares

Cambiar el prefijo de las tablas de WordPress

5 Temas para la Administración de WordPress

Deshabilitar verificación del correo electrónico de administración

Fechas relativas en WordPress a través de código

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados