Quitar el link principal de un menú desplegable en WordPress

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.

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.

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.

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.

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.

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.

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.

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.