Quitar el link principal de un menú desplegable en WordPress

por | 0 Comentarios

Al crear el menú principal con un menú desplegable, se añaden enlaces a todos los botones con un destino predeterminado, y es muy posible que quieras dar preferencia a los submenús anulando el enlace principal del ítem del que cuelgan, así obligas a los usuarios a elegir una sección, categoría o apartado concreto sin dar opción a pinchar en el apartado principal.

Si eres de los que les gusta este tipo de detalles, aquí aprenderás a configurar el menú desplegable de varias formas diferentes.

Suscríbete:

Cómo anular el enlace principal de un menú desplegable

Todos los pasos tienen una base genérica que puede extrapolarse a cualquier página web (ya esté creada con WordPress o no), ya que las acciones que podamos hacer en WordPress de forma visual, arrojan un resultado en el código basado en HTML o CSS.

Como este artículo es la consecuencia de varias consultas recibidas a través de diferentes canales, y todas se centraban en cómo hacer el proceso en WordPress, voy a realizar los pasos sobre este gestor de contenidos.

Crear un botón principal con un link a un punto concreto de la misma página

El primer método que voy a explicar es el más fácil de realizar, ya que engañaremos al menú añadiendo un enlace a un punto concreto dentro de la misma página en la que nos encontramos.

Cuando queremos desplazarnos a un apartado, título, párrafo o cualquier punto determinado que se encuentra en la misma página, se utiliza el símbolo de la almohadilla con un identificador (id), que habremos colocado previamente en alguna parte de la misma página.

Si utilizamos esta configuración para poner un enlace en el menú, pero sin añadir ningún identificador después de la almohadilla, el sistema no sabrá donde ir y se quedará donde estemos en ese momento.

Crear enlace personalizado en WordPress para menú desplegable
Crear enlace personalizado en WordPress

Una vez añadido al menú, lo sustituimos por el botón que queremos anular. Recolocamos el menú desplegable bajo este nuevo botón y eliminamos el antiguo.

Fíjate que ahora pondrá en la descripción del botón «Enlace personalizado», y que cuando lo desplegamos para ver las propiedades, la URL a laque apunta es el símbolo de la almohadilla.

Sustituir botón en el menú

Con estos sencillos pasos ya habremos anulado el enlace del menú principal de las opciones desplegables. Aunque es una opción válida para la mayoría de los casos, el botón sigue siendo un enlace que no lleva a ninguna parte y se mostrará la URL como tal con la almohadilla al final.

URL del enlace personalizado en WordPress
URL del enlace personalizado

Desactivar el link principal del menú desplegable con CSS

Aunque pueda asustar un poco y nos guste más hacer las cosas visualmente en vez de utilizar código, este proceso evita la almohadilla en la URL al eliminar el link por completo y no tendremos el cursor de la mano al pasar por encima como si fuera un enlace roto.

Para que la anulación o desactivación del enlace afecte sólo al botón del menú desplegable, tenemos que asignar un nombre único a través de una clase de estilo.

Para activar esta función llamada «Clases CSS», hay que acceder a la configuración del menú desde la administración y mostrar el contenido de la pestaña «Opciones de pantalla», que se encuentra en la parte superior derecha.

Activar el campo "Clases CSS" del menú en WordPress
Activar el campo «Clases CSS» del menú

Guardamos los cambios sin tocar nada más y regresamos al personalizador de WordPress, al apartado del menú para seguir configurando el botón.

Al desplegar las propiedades del botón principal del menú desplegable aparecerá ahora una nueva casilla para añadir un nombre personalizado, este nombre puede ser cualquiera, pero no puede llevar tildes, espacios ni caracteres especiales. Yo lo voy a llamar «sinenlace».

Fijaros que no he creado un «Enlace personalizado», estoy trabajando sobre el mismo botón de la página, sin cambiar la URL que tiene por defecto.

Asignar clase CSS al botón principal del menú desplegable
Asignar clase CSS al botón principal

Colocando el código CSS personalizado

Salimos de las opciones del menú y accedemos a la pestaña «CSS personalizado», donde colocaremos el siguiente código CSS que os explico a continuación, (debes cambiar la URL que aparece por la dirección que marque vuestra web):

  • Primero añadimos el nombre único de la clase que hemos asignado al botón del menú. Tiene que llevar siempre un punto delante. Esto se hace para que la anulación del enlace solo afecte a ese botón, y no otros posibles enlaces que pueda haber con la misma URL en la página web.
  • Indicamos el ancla al que afecta poniendo el link o URL completa que queremos anular. Si no sabemos cual es, accedemos a la web como un usuario normal y pasamos el ratón por encima del botón para ver la URL completa en la parte inferior de la pantalla.
  • Añadimos las funciones CSS que anula la acción del enlace y que transforma el cursor al aspecto por defecto.

Cuando pasemos por encima del ítem principal del menú desplegable ya no tendremos un enlace oculto, se desplegará el submenú y la URL de la página se mantendrá limpia sin la almohadilla del enlace personalizado.

Boton principal del menú desplegable anulado
Botón principal del menú desplegable anulado

Utilizar un tema con la opción de anular el nivel superior del menú desplegable

La última opción es contar con un tema que permita anular el enlace principal del menú, pero esta característica suele ser propia de temas premium como por ejemplo Divi, del cual soy un auténtico fan y sobre el que está construido este blog.

En este caso solo tenemos que localizar donde se encuentra esta característica y activarla o desactivarla según nuestras preferencias.

Ajustes del menú desplegable en el tema Divi
Ajustes del menú desplegable en el tema Divi

VISITA MI CANAL DE YOUTUBE

Juan

Juan

Juan Martín es el autor del blog Ingresos Vía Web, una persona como tú que intenta ganarse la vida en internet. Trabajo en mi blog para convertir mi sueño de generar autoempleo en realidad y poder ayudar a quien quiera, a conseguir su sueño a través de mis contenidos. Si te parece interesante apúntate a mi newsletter.

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Al dejar un comentario se solicitan datos como tu email y nombre que se almacenan en una cookie para que no tengas que volver a completarlos en próximas visitas. Para enviar un comentario debes aceptar nuestra política de privacidad. Responsable de los datos: Juan Martín Pascual. | Finalidad: Controlar spam, gestión y moderación de comentarios. | Legitimación: Tu consentimiento expreso. |Comunicación de los datos: No se comunicarán a terceros salvo por obligación legal. | Destinatario: Base de datos alojada en SiteGround Spain S.L. dentro de la UE. Ver política de privacidad de Siteground. | Derechos: Acceso, rectificación, supresión, limitación, portabilidad y olvido de sus datos.

Más de lo mío en Youtube

Categorías

Recomendado para Afiliados de Amazon

AAWP Amazon Affiliate for WordPress
Azon Press

Esta web funciona gracias a:

Descuento directo DIVI -  10 por ciento

Pin It on Pinterest

Share This
Ir al contenido