El menú WordPress es un gran desconocido incluso para muchas de las personas que usan WordPress a diario. ¿Crees que ya lo sabes todo sobre los menús de esta potente heramienta? Acepta mi reto a ver si logro sorprenderte con algo que no sepas.
¿Para qué sirven los menús de WordPress?
- El menú WordPress es una de las partes más importantes de tu instalación. Se trata de la herramienta que nos permite enlazar a las páginas de nuestro site desde diferentes lugares de nuestra web. Veamos algunos ejemplos de uso más habituales:
- Crear el menú principal de tu página web. Es el menú situado en la cabecera o header de tu web.
- Crear un menú secundario. Plantillas como Divi te permiten crear menús secundarios en la zona de la cabecera, un menú superior como el que puedes ver aquí en Creatiburón, donde tengo los botones de petición de presupuesto.
- Crear un menú en el pie de la página. Es el lugar desde el que debes enlazar a las páginas legales de tu web y en páginas muy complejas, se usa también para enlazar a las funciones más importantes para los usuarios.
- Tener un menú en la barra lateral de tu blog/web enlazando a donde tú quieras.
- Tener un menú dentro del contenido de cualquier página de tu web.
- Crear un menú personalizado
- Hacer que los links se abran en otra página
Menús personalizado de WordPress
Muchos temas de WordPress van agregando automáticamente las páginas que creas en tu web al menú de WordPress. Pero solo usando los menús personalizados, puedes controlar bien las páginas que quieres añadir y el orden en el que aparecen. Para acceder a los menús de WordPress, tienes dos opciones:
- Escritorio/Apariencia/Menús. En esa página podrás crear un menú nuevo y asignarlo a dónde quieres que aparezca en tu plantilla. Aquí te aparecerán todos los ajustes posibles de menús.
- A través del personalizador de temas. Al que puedes acceder desde el front end de tu web, habiendo iniciado sesión previamente, pasando el ratón sobre la esquina superior izquierda, donde aparece el nombre de tu web. Verás que se abre un desplegable y que una de las opciones es personalizador de temas. Al abrirlo verás que hay una opción que se llama menús. No te ofrece todas las opciones pero para cambios rápidos con vista previa es una buena opción.
A qué puedo enlazar desde mi menú WordPress
- A cualquier página de tu web
- A cualquier entrada de tu blog, proyecto o producto.
- A una categoría del blog, de los proyectos o productos.
- A una etiqueta del blog, de los proyectos o productos.
- A un enlace personalizado.
Funcionamiento del menú WordPress
Simplemente despliega uno de los tipos de elementos y haz click en el elemento deseado para añadirlo al menú. Lo añadirá al final de la lista. Puedes arrastrar el elemento con el ratón hasta la ubicación que quieras.
Para crear un subelemento dentro de un menú WordPress, simplemente colócalo debajo del elemento desde el que quieras que salga el desplegable y arrastra un poco hacia la derecha.
A lo mejor quieres crear un deplegable pero que el elemento desde el que se despliega el menú, no enlace a ninguna parte. Puedes hacerlo añadiendo un enlace personalizado al menú con el título que quieras (por ejemplo, "Servicios"). Para añadirlo, en el apartado de la url puedes poner un punto o el símbolo de la almohadilla. Una vez que lo hayas añadido al menú, ya puedes borrarlo y dejar el apartado del enlace en blanco.
Desplegando las opciones de pantalla podrás abrir más opciones que por defecto no están activadas:
Muchas de estas opciones se refieren solo al tipo de elementos que se pueden añadir. Pero también en el apartado Mostrar propiedades avanzadas del menú hay algunas opciones interesantes:
- Destino del enlace te permite elegir si el enlace se abre en una nueva ventana. Muy buena opción cuando estás enlazando a una página fuera de tu web.
- Clase CCS nos permitirá darle un formato específico a ese elemento del menú. Lo usaremos después para crear un botón.
Si quieres añadir un menú a tu barra lateral, usa el widget Menú de navegación y escoge el menú que quieras mostrar de entre los menús que hayas creado para tu página.
Poner iconos al lado o en lugar de los elementos del menú
Usar iconos en tu menú puede ser una manera interesante de llamar la atención sobre un elemento concreto para facilitar que los usuarios lo encuentren. Yo suelo usar el plugin Menu Icons de ThemeIsle (aquí puedes ver cómo instalar un plugin).
Este plugin te permite añadir un icono de entre muchos de su biblioteca o una imagen o archivo SVG personalizado.
El mismo plugin ofrece muchos iconos entre los que elegir y si no puedes ir a Flaticon y bajarte el icono que quieras en formato SVG.
Crear un botón en tu menú WordPress con la plantilla Divi y CSS
Los botones son también buenas maneras de crear atajos para los navegantes hacia las páginas o acciones que más les interesan. Te cuento cómo he creado yo los botones aquí en Creatiburón.
Primero he asignado la clase CSS menu_button a los elementos a los que quería darles un estilo personalizado.
Y luego he añadido unas líneas de CSS al CSS personalizado de mi tema, Divi. Este apartado de CSS personalizado, está en las opciones del tema:
/* Add Button to Divi menu item with class menu_button */
@media only screen and ( min-width: 981px ) {
.menu_button a {
background-color: #ee4a65;
padding: 5px 15px !important;
border-radius: 5px;
color: #fff !important;
margin-bottom: 7px;
box-shadow: 0px 0px 30px 4px rgba(0, 0, 0, 0.1);
}
.et-fixed-header #top-menu .menu_button a {
color: #fff !important;
}}Puedes cambiar los colores sustituyendo los códigos de color. En mi caso he usado de fondo el color #ee4a65 y para el color de la letra, el blanco #ffffff.
El trozo de código original lo conseguí en Divi Theme examples.
Espero que te haya resultado interesante este artículo, suscríbete si quieres seguir aprendiendo WordPress conmigo.