Cuando instalamos nuestro WordPress, por defecto viene determinado que la página de inicio serán las entradas del Blog, algo que luego cambiaremos para que el usuario al poner nuestro dominio llegue a la página de inicio.

Claro que si quieres que el usuario llegue directamente al Blog dejaremos esa configuración 😉

Pero además debemos crear un menú de navegación y eso es lo que veremos hoy.

No hay una regla, pero sí te puedo aconsejar que no crees un menú interminable donde el usuario se termine mareando.

En mi web, si miras, tengo las pestañas necesarias, incluso en el blog utilizo una barra de búsquedas y no coloco las categorías en el menú.

Claro que también estaría bueno poder seleccionar por categorías como lo hacen muchos bloggers, pero ya dependerá de lo que prefieras.

Incluso puedes probar ambas y evaluarlo 😉

Por supuesto antes de crear el menú deberás crear las páginas, incluso las entradas y sus categorías, etiquetas y demás que quieras incluir en el menú.

 

¿Cómo crear un Menú?

Para crear un Menú, nos iremos a Apariencia > Menú

Crear Menu Apariencia

 

Una vez allí nos dispondremos a crear un nuevo menú y para ello daremos click en “Crear Menú”

Crear Menu

 

Deberemos darle un nombre, que obviamente nos va a servir para identificarlo.

Una vez que lo hemos creado ya tenemos habilitadas las opciones para comenzar a incorporar los enlaces que queremos colocar.

 

¿Qué podemos incluir en el menú?

Podremos colocar enlaces las páginas de nuestro sitio, a nuestras entradas, proyectos y también URL personalizadas, donde podremos enlazar a sitios externos si lo necesitáramos, por ejemplo a nuestras Redes Sociales.

También podremos colocar enlaces a categorías y etiquetas.

Elementos Menu

 

Al desplegar cada pestaña veremos las opciones de acuerdo a lo que hemos ido creando en nuestra web.

En este caso si despliego “Páginas” estarán todas las páginas creadas, pero no quiero que aparezcan todas en el menú, es por eso que iré seleccionado aquellas que crea convenientes.

Elementos Menu Paginas

 

Entonces tildaré en las casillas las que quiero que aparezcan y le daré click en “añadir al menú”

Cuando las agregues se colocarán alfabéticamente y debes ubicarlas como mejor te parezca, en general colocaremos inicio, sobre mí, servicios, blog y contacto, aunque ya sabes, puedes acomodarlas como quieras.

Mover Menu

 

¡Ya casi lo tenemos listo!

Pero debemos decirle dónde aparecer, para ello más abajo tenemos la sección Ajustes de menú y le diremos si es el menú Principal, Menú secundario o inferior.

Que sepas que estas opciones dependerán del Theme que utilices.

Una vez listo le damos a guardar menú.

Guardar Menu

 

No te aconsejo que tildes la opción de «Añadir automáticamente nuevas páginas de nivel superior a menú», ya que lo mejor es personalizarlo a tu gusto.

 

Cambiar el nombre que aparecerá en el menú

Si ves, en la imagen anterior, hay una página que tiene un nombre demasiado largo y esto no quedaría bien en el menú, así que ahora cambiaremos eso.

Seleccionamos la pestaña del menú que queremos cambiar, en este caso “Servicio Diseño Web” y le cambiamos la etiqueta de navegación.

Etiqueta de Navegacion

 

Ahora si vamos a la web, tendremos el menú según lo hemos creado en la sección menú de WordPress.

Menu Principal creado

 

¿Cómo agregar enlaces personalizados?

Quizás te preguntes para qué crear un enlace personalizado y puede haber varios motivos.

Uno por ejemplo es crear en el menú una pestaña que sea simplemente para albergar un sub menú o bien puedes querer poner una URL a otro sitio.

Nos vamos ahora a la sección de «Añadir elementos al menú» y seleccionamos “Enlaces personalizados”

Menu enlaces personalizados

 

Donde dice URL colocaremos la URL a donde queremos que se dirija el usuario al hacer click allí.

Y en Texto del enlace lo que queremos que aparezca en el menú.

En este caso pondré un # ya que no quiero enviar a ningún sitio al usuario y ya veremos el motivo 😉

En texto colocaré Servicios y lo añado al menú.

Anadir enlace personalizado en el menu

 

Bien, ya tengo un nuevo acceso desde el menú, y lo ha hecho de esta manera para colocar los servicios que ofrezco, claro que, si tienes un solo servicio, utilizar la primera opción que te he mostrado 😉

 

¿Cómo crear un Menú desplegable?

Y acá llegamos a ver para qué me servirá ese enlace personalizado que he creado recientemente.

Teniendo las páginas de servicios creadas, ahora las añadiré al menú y las colocaré como un submenú de Servicios.

Es simple, arrastramos a un segundo nivel las pestañas que deseamos se coloquen como submenú.

Submenu Servicios

 

Opciones que puedes tener ocultas al crear menús

Si quieres crear un enlace personalizado que no va a tu sitio web, lo suyo es que se abra en una nueva pestaña, para que el usuario no abandone tu sitio.

Te pongo como ejemplo un enlace a Instagram, pondremos la URL, el Texto de navegación y tildaremos en “Abrir en nueva pestaña”.

Menu enlaces personalizados URL externa

 

Probablemente no tengas esta opción visible y es que debes ir a Opciones de Pantalla, que se encuentra arriba, cerca de la barra de navegación, y habilitarlas.

Menu opciones de Pantalla

 

Menú de WordPress en barra lateral

Sí, también podemos crear un menú y colocarlo en la sidebar de nuestro sitio web.

Para ello nos vamos a Apariencia Widgets y seleccionamos menú personalizado.

Deberemos elegir qué menú colocaremos y listo.

Menu area sidebar

 

¿Cómo poner íconos en el menú?

Es muy sencillo colocar íconos en el menú.

Primero instalaremos un plugin que se llama Menú Icons, para ello vamos a Plugins > Añadir nuevo y lo buscamos en el repositorio de WordPress.

Menu Icons Plugin

 

Lo activamos y nos volvemos a Apariencia > Menú

Cuando estamos en Menús, vemos que se ha agregado una pestaña.

Plugin menu icons

 

Puedes seleccionar todos o simplemente los que vayas a utilizar.

Ahora si abrimos la pestaña de la configuración de Inicio tendremos la opción de seleccionar ícono.

Damos click allí y seleccionamos el que queremos para esa sección.

Menu Icons Dashicons

 

Si queremos los de Fontawsome, buscaremos en esa pestaña y damos click en “elegir”

Menu icons fontawsome

 

Guardamos menú y ya podemos verificar si está creado en el menú de nuestro sitio.

Menu principal iconos

 

Y así seguiremos con cada uno de los enlaces de nuestro menú.

 

¿Cómo agregar una imagen al menú?

Si quisiéramos agregar una imagen al menú, deberemos colocar un código HTML en la sección “etiqueta de navegación”

Colocar imagen en menu

 

Y este sería el resultado que obtendríamos

Imagen en menu

 

Si no sabes de dónde obtener ese código, te recomiendo que crees una entrada y coloques allí la imagen que quieres colocar en el menú.

Una vez la tengas debes dar click en “editar como HTML”

Foto Menu editar como HTML

 

Copias desde <img hasta la etiqueta de cierre />

Lo pegas en la sección que ya te he mencionado y listo, ya tienes tu imagen en el menú 😉

 

¿Cómo hacer un Mega Menú?

Para hacer un Mega menú tenemos varios plugins, pero si utilizas Divi tienes la opción de colocar en la sección CSS el texto “mega-menu”

Y ya te lo crea, tampoco es que sea wow, qué menú!! …pero te la puedes ingeniar si vas a colocar imágenes.

En este ejemplo obviamente no queda “lindo” pero es a los efectos que lo visualices.

Mega Menu con Divi

 

Y plugins para hacer mega menú puedes optar por:

  • Max Mega Menú
  • WP Mega Menú
  • Quad Menú

¡Y muchos más! Es cuestión de buscar el que se adapte a lo que deseas.

Claro que, aunque algunos tienen versión free, si te gusta y quieres más funcionalidades deberás adquirir su versión de pago.

 

¿Cómo destacar una pestaña del menú?

Muchas veces por una cuestión estratégica queremos destacar una de las pestañas del menú y para ello debemos ir a Apariencia > Menú y elegir la que queremos destacar.

En este caso haremos la prueba con la pestaña Contacto, donde en su apartado de Clase CSS colocaremos “destacado-menu”

Destacado contacto en Menu

 

Guardamos los cambios y vamos a darle estilo mediante código CSS.

Si utilizas Divi puedes hacerlo desde las opciones generales y sino mediante el personalizador de tema en el apartado para tal fin.

Pondremos en ese apartado:

/*Destacado contacto en menú*/

.destacado-contacto {

                background-color: #fcd6c3;

                }

Menu destacado Contacto

 

¿Cómo cambiar el color de texto y la tipografía del menú?

Para cambiar el color del texto y la tipografía del menú, nos iremos al «personalizador de temas».

Menu ajustes personalizador

 

Una vez allí nos vamos a > Cabecera y navegación > Barra de menú principal

Podremos determinar si la cabecera tendrá anchura completa o no, si ocultaremos la imagen del logotipo y los ajustes de tipografía, fuente, tamaño, colores.

Menu personalizador de temas

 

¿Cómo eliminar un enlace del menú?

Si tenemos un menú que ya no utilizaremos y queremos eliminarlo, simplemente deberemos elegir ese menú y dar click en “Borrar”

Borrar Menu

 

Conclusión

Crear tu menú en WordPress es muy sencillo, así que solo debes pensar bien qué pestañas colocarás para que el usuario llegue al contenido que quieres.

Recuerda que dependiendo del Tema que utilices tendrás más lugares disponibles para colocar tus menús.

Como en todo, mi recomendación es que vayas probando las diferentes alternativas 😉

Espero haberte ayudado, ¡que tengas buen día!!

¡Haz clic para puntuar esta entrada!
(Votos: 2 Promedio: 4)
Diseno Web - disenemos juntos

Pin It on Pinterest