WordPress tiene un número aparentemente interminable de opciones de personalización para su sitio web. Sin embargo, descubrir cómo aplicar algunos de ellos puede no ser obvio de inmediato. Un ejemplo sutil es agregar un título en su menú sin vincularlo a una página.
Afortunadamente, este proceso puede ser rápido y sencillo. Al ajustar algunas opciones y agregar algo de CSS a su sitio, puede incorporar títulos en su menú de WordPress sin agregar enlaces que los acompañen.
En este tutorial, cubriré algunas de las razones por las que es posible que desee agregar un título en el que no se puede hacer clic en su menú de WordPress, luego lo llevaré a través de tres simples pasos para configurar uno. ¡Vamos!
¿Por qué agregar un título en un menú de WordPress sin vincularlo a una página?
Los menús tratan principalmente de hacer que su sitio sea fácil de navegar. Agregar un título sin un vínculo puede parecer contraproducente, pero puede ser una herramienta organizativa útil que permite a los usuarios encontrar rápidamente la información que necesitan.
Una de las principales aplicaciones de esto es utilizar un elemento de menú no vinculado para categorizar subelementos que sí tienen vínculos. Por ejemplo, aquí hay un título principal llamado Contáctenos que no enlaza en ninguna parte:
En lugar de, Contáctenos actúa como un elemento principal para los elementos secundarios funcionales a los que los usuarios pueden comunicarse por correo electrónico, teléfono o visitando una ubicación física. De esta manera, los visitantes pueden ir directamente a su método de contacto preferido en lugar de hacer clic en un enlace a una página de contacto y desplazarse por todas las opciones.
Los títulos de menú desvinculados también pueden ser útiles si está buscando mostrar un mensaje estático de manera consistente en su sitio. Aunque este método hará el trabajo, es mejor que agregue un código de encabezado o pie de página personalizado si este es su objetivo.
Cómo agregar títulos en un menú sin vincular a una página (en 3 pasos)
Agregar títulos a un menú de WordPress sin vincular a una página puede ser un toque sutil y profesional. Afortunadamente, es un proceso sencillo. Una vez que conozca los pasos, podrá agregar rápidamente títulos de menú no vinculados donde los necesite.
Paso 1: seleccione o cree un menú
Lo primero que deberá hacer es crear o editar el menú al que le gustaría agregar un título desvinculado.
Puede comenzar navegando a Apariencia> Menús en la barra lateral del panel de WordPress. Esto lo llevará a la siguiente pantalla:
Desde aquí, su menú actual ya debería estar en la pantalla si tiene uno. Si quiere empezar desde cero, haga clic en crear un nuevo menú en lugar de.
Paso 2: agregue un enlace personalizado
Ahora que ha seleccionado el menú en el que va a trabajar, puede comenzar a crear su título de menú desvinculado.
Navega al Agregar elementos de menú panel en el lado izquierdo de la pantalla y abra el Enlaces personalizados pestaña para expandir las opciones:
Esto mostrará dos campos: URL y Texto del enlace. Para que no se pueda hacer clic en el enlace, simplemente ingrese # en el URL caja.
Luego, escriba su título desvinculado en el Texto del enlace campo. En este ejemplo, he optado por utilizar el Contáctenos etiqueta.
Cuando haya terminado, haga clic en Agregar al menú. Puede agregar subelementos con enlaces debajo de este título si lo desea, y arrastrar y soltar elementos del menú para organizarlos.
Paso 3: use CSS para evitar que el cursor cambie al pasar el mouse
Los primeros dos pasos lo ayudaron a crear un elemento de menú que no se vincule a una página. Sin embargo, los usuarios que pasen el cursor sobre él seguirán viendo que sus cursores cambian como si pudieran hacer clic en él. Como no conducirá a ninguna parte, es posible que desee cambiar el cursor por motivos de coherencia.
Afortunadamente, esto se puede hacer fácilmente con un poco de CSS.
En el Menús pantalla, navegue hasta la esquina superior derecha y haga clic en el Opciones de pantalla desplegable. Esto le presentará algunas opciones. Encuentra el etiquetado Clases CSS:
Marque esta casilla y cierre el Opciones de pantalla menú.
Luego, desplácese hacia abajo hasta el menú de su sitio web. Busque el título que creó anteriormente que no tiene un enlace.
Ahora debería haber un campo adicional debajo de él etiquetado Clases CSS (opcional).
Ingrese una clase CSS personalizada para que se corresponda con el cambio del cursor (el código CSS se agregará a continuación). he usado imposible de hacer clic aquí para mantenerlo simple:
Una vez que se haya decidido por una clase, guarde su configuración.
Luego, abra el Personalizador de WordPress navegando a Apariencia> Personalizar en el menú de la barra lateral.
Una vez que esté allí, navegue hasta el CSS adicional pestaña en la parte inferior del menú de la izquierda. Copia y pega el siguiente código:
.unclickable > a {
pointer-events: none;
}
La única excepción aquí es si usó una clase que no sea imposible de hacer clic más temprano. Si lo hizo, simplemente reemplace esa línea con el nombre que le dio a la clase CSS.
Su campo CSS debería verse así:
El cambio debería reflejarse tan pronto como haya ingresado el CSS adicional.
Compruebe que el cursor no le da la opción de hacer clic cuando se desplaza sobre el elemento de menú desvinculado. Una vez que esté satisfecho de que se hayan implementado los cambios que ha realizado, haga clic en Publicar para guardar la configuración.
Una vez que haya completado estos pasos, debería haber agregado un título a su menú sin vincularlo a una página o hacer que parezca que se puede hacer clic en él.
Conclusión
Descubrir cómo agregar un título a su menú de WordPress sin vincularlo a una página puede ser un poco confuso al principio. Afortunadamente, con un poco de orientación, puede navegar por el proceso con facilidad.
En este artículo, cubrí tres pasos simples para agregar un título desvinculado a su menú de WordPress:
- Crea o selecciona el menú que te gustaría usar
- Agregar un nuevo elemento de menú de enlace personalizado
- Aplique algunas líneas de CSS para hacer que el cursor sea predeterminado en un puntero al pasar el mouse
¿Qué opción de menú desvinculada creará con este tutorial? ¡Háganos saber en la sección de comentarios!