Cómo añadir y administrar un menú de WordPress en el tema Extra. Mega Menú

por | 1 Comentario

Temas Elegant Themes
Los menús nos permiten navegar por la web y tener acceso a todos los rincones del sitio desde una misma localización. Pero lo que parece tan sencillo como configurar el menú en WordPress, a veces se complica al no saber cómo crearlo o dónde hay que tocar para poder tener el menú que queremos.

Aunque no lo penséis, el apartado de los menús es un tema bastante amplio, y dependiendo de la plantilla y los plugins que instalemos, se puede complicar un poco su configuración. Voy a dividir este capítulo en dos, primero me centraré en las opciones de WordPress para luego hablar de las que ofrece el tema Extra.

Suscríbete:

 

 

Configurar el menú en WordPress

 

Comencemos por las funciones básicas de los menús, las que trae WordPress por defecto y cuyo funcionamiento afecta a casi la totalidad de las plantillas. Antes de nada, un consejo, no cargues tu menú con demasiados botones o volverás loco al usuario de tu web.

 

Qué botones puedo añadir al menú

Desde las versiones más antiguas de WordPress a la actual, han ido ampliándose las posibilidades de añadir más tipos de enlaces al menú. Ahora podemos enlazar con casi cualquier sitio de nuestra web. Las opciones por defecto que podemos utilizar son:

  • Botones para enlazar con páginas.
  • Botones para enlazar con entradas.
  • Crear botones con enlaces personalizados.
  • Botones para mostrar los elementos de una misma categoría.

Pero todas estas opciones pueden verse ampliadas si optamos por añadir algún plugin como WooCommerce, que convierte nuestro sitio en una tienda online, opciones de portfolio o proyectos. Además de las anteriores, se añadirían estas nuevas opciones:

  • Botones para mostrar productos.
  • Botones para enlazar con categorías de productos.
  • Botones para las distintas etiquetas del producto.
  • Botones para enlazar con diversas variables de WooCommerce.
  • Botones de proyecto.
  • Botones de categorías de proyectos.

Configurar el menú de WordPress. Los botones

 

Configurar el menú en nuestro sitio web

Existen dos formas de añadir un menú, desde la zona de administración en «Apariencia > Menús«, o desde la personalización con vista previa.

Esta última es la más recomendada para crear el menú, ya que podemos ir viendo cómo va quedando. Además, con la última versión de WordPress, podemos añadir enlaces a páginas y entradas que aún no hemos creado, y añadirlas directamente desde el menú.

La opción de añadir el menú desde el personalizador visual del tema, es suficiente para la mayoría de los temas básicos y gratuitos. Los temas Premium o de pago suelen tener opciones avanzadas a las que sólo se puede acceder desde la zona de administración, como veremos más adelante con el tema EXTRA.

 

Pasos para crear un menú desde el personalizador

  1. Creamos un nuevo menú picando en «Añadir un menú» y le asignamos un nombre.
  2. Elegimos la ubicación donde queremos mostrar el menú. Podemos crear varios menús si el tema nos lo permite y da la opción de ubicarlos en distintos lugares de la web.
  3. Si queremos que el menú se incremente automáticamente según vamos creando nuevas páginas, podemos marcar la casilla al respecto. No es muy aconsejable si creamos muchas páginas, ya que el menú puede llegar a desbordarse.
  4. Pinchamos en el botón «Añadir ítems» para elegir que links o botones queremos tener en el menú de la lista que se despliega a la derecha. Pinchando en el que nos interesa, se añadirá al menú automáticamente. Dentro de las opciones de páginas y entradas, podemos añadir botones, aunque estas no estén creadas.
  5. Antes de cerrar la ventana, pinchamos en «Guardar y publicar» para no perder el menú que hemos creado.

Configurar el menú de WordPress. Personalizador

 

Cómo crear un menú desplegable y cambiar los nombres del botón

Puede que nos interese crear una serie de links o enlaces que dependan de una opción principal. Para crear un menú desplegable y renombrar el botón, hay que realizar los pasos siguientes:

  1. Añadir todos los ítems que queramos añadir como desplegables al menú de forma normal.
  2. Mantener el ratón pinchando sobre cada uno de ellos y moverlos hacia la derecha hasta que queden de forma escalonada debajo del botón principal.
  3. Para cambiar el nombre, basta con picar una vez sobre cada botón para que se despliegue la caja donde podemos cambiarlo por el que queramos. El nombre que pongamos no afecta al título de la entrada, artículo, producto…, sólo al nombre del botón.
  4. Podemos cambiar de sitio todos los botones, una vez creado el menú, arrastrándolos a la posición que nos interese.

Configurar el menú de WordPress. Menú desplegable

 

Configurar el menú del tema EXTRA

Una vez que hemos visto de forma rápida cómo añadir y modificar un menú en WordPress, información válida también para esta plantilla, vamos a ver que opciones adicionales podemos configurar.

Las opciones del menú, o menús, dependen de muchas variables en esta plantilla, vamos a verlas poco a poco para no perdernos ningún detalle.

 

Barra de navegación fija

Dependiendo de si la tenemos activa o no, la cabecera donde se encuentran los menús estará siempre visible mientras navegamos por la web o se desplazará con la página al hacer scroll. Esta opción se encuentra dentro de las opciones del tema.

Configurar el menú de WordPress. Navegación fija

 

Opciones de la barra de navegación por defecto

Dentro de las opciones del tema, existe una pestaña llamada «Navegación» (Navigation), desde la que podemos configurar las opciones que trae por defecto esta plantilla.

NOTA: Estas opciones se desactivan si asignamos un menú personalizado al menú principal.

EXTRA genera automáticamente un menú con las páginas y las categorías que vamos creando según añadimos contenido a la web. Desde esta pestaña podemos decidir que queremos y que no queremos que aparezca de este menú.

  • Excluir páginas de la barra de navegación: Aquí elegimos las páginas que queremos mostrar. Aparecen todas las que hayamos creado.
  • Mostrar menús desplegables: Si al crear algunas páginas, estas las guardamos como hijas o dependientes de otra, podemos elegir si mostrarlas como desplegables o que no aparezcan en el menú.
  • Mostrar enlace a Home: Esta es sencilla, mostrar el enlace de la página principal o no. Si tenemos una página estática que aparece ya en el menú, puede que no interese mostrar el botón de la «Home«. Pero podemos hacerlo al revés, mostrar este botón y ocultar la página estática.
  • Ordenar enlaces de las páginas/categorías: Como no podemos colocar los enlaces como nosotros queremos, la plantilla EXTRA nos da una serie de opciones para colocarlas.
    • Las páginas
      • post_title
      • menu_order
      • post_date
      • post_modified
      • ID
      • post_author
      • post_name
    • Las categorías
      • Nombre
      • ID
      • Slug
      • Cantidad
      • Grupo de términos
  • Ordenar enlaces de las páginas/categorías: En ascendente o descendente.
  • Número de niveles de menú desplegable: Podemos elegir cuantos ítems mostrar al desplegar el menú.

Configurar el menú de WordPress. Opciones

 

Desactivar los enlaces en elementos superiores de los menús desplegables

Esta opción se aplica a cualquier menú que tengamos. Con ella conseguimos enviar al usuario de nuestra web a uno de los enlaces del menú desplegable y evitamos que pinche en el menú superior, llevándole a donde nosotros queremos.

Configurar el menú de WordPress. Desactivar menú superior

 

Ajustes personales al configurar el menú en el tema EXTRA

Aquí empieza lo bueno, las posibilidades y combinaciones que nos brinda este tema, nos permite configurar el menú que queramos y de la forma que más nos guste. Podemos elegir la tipografía más adecuada, combinar cualquier color, elegir la posición, los márgenes, los tamaños… Puedes hacer prácticamente de todo.

Estas opciones se acceden desde el personalizador del tema, pinchando desde la administración de WordPress en «Apariencia > Personalizar«.

Configurar el menú de WordPress. Menú extra

 

Ajustes de formato de encabezado

La primera opción que se nos plantea, es la posición que queremos tener en la barra principal, elegir que todo esté en un eje central, o colocar una barra tradicional en la que el logo está a la izquierda y el menú se coloca a la derecha.

También podemos configurar el menú y la barra de navegación para que permanezca oculta hasta que se haga scroll en la página. Una opción muy buena si queremos mostrar una imagen a toda pantalla al cargar la página principal.

Configurar el menú de WordPress. Ajustes de formato de encabezado

 

Ajustes de la barra del menú principal

La barra de navegación está compuesta por dos menús, el principal y un segundo menú con unas opciones más específicas de las que hablaremos en el siguiente punto.

Entre las opciones para configurar el menú principal, tenemos gran cantidad de combinaciones para conseguir nuestro deseado menú.

  • Hacer ancho completo: podemos limitar la caja del contenido de la barra de navegación al ancho del resto de la página, o darle un ancho completo que se adapte a la anchura total de la pantalla.
  • Ocultar imagen del logo: Si tenemos un menú muy amplio, o no tenemos un logo para mostrar, desde aquí podemos ocultarlo.
  • Altura del menú y del logo
  • Tamaño y espaciado del texto
  • Elección de tipografía o fuente
  • Estilo de fuente: Podemos elegir que el texto sea negrita, cursiva, versalitas o subrayado.
  • Combinaciones de colores del texto y los enlaces
  • Color del fondo
  • Configuración visual del menú desplegable: Aquí no sólo nos da la opción de cambiar su aspecto visual a lo que se refiere a colores. También podemos elegir la forma en cómo queremos que se despliegue el menú, ofreciendo un aspecto dinámico y muy chulo.

Configurar el menú de WordPress. barra menú principal

 

Ajustes de elementos de cabecera

Desde aquí podemos activar y desactivar la barra de navegación secundaria, elegir que elementos mostrar de esta barra y cual dejar ocultos.

Los elementos especiales que contiene esta barra son un buscador, iconos de redes sociales (siempre que tengamos una cuenta y esté configurada en las opciones del panel principal), titulares de las últimas entradas y un menú en forma de hamburguesa.

El menú aparecerá si hemos creado uno y seleccionamos su ubicación como «menú secundario«, de lo contrario solo veremos tres rayas que se convierten en un aspa y no aparece nada.

Otra opción que podemos elegir, es desmarcar los titulares y dejar el menú secundario visible de forma tradicional, pudiendo configurar el aspecto visual de la misma forma que hacíamos con el menú principal desde los «Ajustes de la barra del menú secundario«.

Configurar el menú de WordPress. barra superior de Extra

 

Ajustes de la barra del menú secundario

Estas opciones modifican el aspecto de la barra superior, donde se encuentra el menú secundario, si lo tenemos activo. La variedad de combinaciones sigue siendo muy alta a la hora de configurar el menú para poder personalizarlo con nuestra propia identidad.

Podemos modificar todos los elementos individualmente, al igual que en el menú principal:

  • Hacer ancho completo: Como se indica, ajustar a la caja del contenido o al ancho total de la web.
  • Modificaciones del menú:
    • Tamaño del texto
    • Espacio entre letras
    • Elección de fuente o tipografía
    • Estilo de la fuente
    • Colores del texto y de los enlaces
    • Color del fondo
    • Color de fondo del menú desplegable
    • Tipo de animación al desplegarse el menú
  • Modificación de los titulares:
    • Tamaño del texto
    • Elección de fuente o tipografía
    • Estilo de la fuente
    • Colores de los textos que aparecen
  • Modificación de Buscar, Carrito y Redes Sociales:
    • Tamaño del texto
    • Espacio entre letras
    • Elección de fuente o tipografía
    • Estilo de la fuente
    • Color de fondo
    • Color de texto

 

Configurar el menú de WordPress. Menu secundario

 

Ajustes de navegación fija

Si hemos elegido la forma de «navegación fija«, como indicaba en el apartado de más arriba, con la que mostrábamos siempre el menú, con estas opciones podemos variar su aspecto cuando se empieza a navegar por la página, pudiendo ocultar el logo y disminuyendo el tamaño del menú para ganar espacio a la hora de mostrar el contenido de la web.

El aspecto al configurar el menú con estas opciones, sólo las veremos cuando movamos la página al hacer scroll, si volvemos a la parte superior de la página, el menú recuperará el aspecto inicial.

Las opciones que ofrece esta pestaña son:

  • Ocultar imagen del logo: Si al reducirse parece un borrón, o se distorsiona su aspecto, podemos quitarlo con esta pestaña.
  • Altura del menú: Con un mínimo de 60px.
  • Altura del logo: Si no lo hemos ocultado, podemos jugar con su tamaño.
  • Tamaño de texto: Lo podemos adaptar a la altura que elijamos de la barra de navegación.
  • Color de texto y enlaces.
  • Color de fondo.

Configurar el menú de WordPress. Navegacion fija cambios

 

Configurar el «Mega Menú» de Extra

Todos sabemos lo bonito que quedan los Mega Menús que vemos en algunas páginas. El tema DIVI incluye esta función desde hace tiempo y, por supuesto, el tema EXTRA no podía quedarse sin él.

Además de poder mostrar el Mega Menú de tipo lista como su hermana DIVI, incorpora dos nuevas formas de configurar el menú con esta característica para mostrar las entradas y los post destacados o recientes de categorías concretas, acompañados de sus miniaturas.

Y lo mejor de todo, sin la necesidad de añadir ningún plugin adicional.

Estas opciones se activan desde la administración en «Apariencia > Menús«, y no desde el personalizador.

Configurar el menú de WordPress. 3 mega menús

 

Configurar el menú en modo «Lista Mega Menú»

Esta es la función más sencilla, con ella podemos mostrar un Mega Menú que muestra cuatro listas a las que podemos acceder a cada uno de los enlaces. Para Crear este Mega Menú debemos tener una estructura escalonada de submenús como se muestra en la siguiente imagen.

Las páginas «padre» o elementos superiores de las listas de las Gafas (en este ejemplo Nogal, Bambú, …), no tienen enlaces, hacen la función de titulares de cada una de las listas. Si tampoco queremos que contenga un enlace el elemento más superior que engloba a todo (Lista Mega Menú), debemos desactivarlo desde las opciones del tema, como se indica más arriba.

Configurar el menú de WordPress. Lista mega menú 1

 

Una vez que tenemos la estructura de las listas creadas, desplegamos las opciones del nivel más alto y seleccionamos la opción «Mega Menú – Lista» (Mega Menu List).

Configurar el menú de WordPress. Lista mega menú 2

 

Configurar el menú en modo «Artículos destacados»

Para crear un Mega Menú que muestre los artículos destacados de una categoría concreta, hay que crear un ítem en el menú para esa categoría. Cuando hayamos agregado la categoría que queremos mostrar, desplegamos las opciones del elemento y seleccionamos la opción «Mega Menú 3 – Destacadas» (Mega Menu 3 Featured).

Configurar el menú de WordPress. Mega Menú 3 destacadas

 

Configurar el menú en modo «Artículos Destacados y Recientes»

Para rizar el rizo, el tema EXTRA nos deja configurar el menú para mostrar dos artículos destacados y una pequeña lista de otros post que tienen relación con la misma categoría. La forma de configurar este Mega Menú es idéntica a la anterior, pero en la casilla de las opciones marcaremos «Mega Menú 2 – Lista de Destacados y Recientes» (Mega Menu 3 Featured and Recent List).

Configurar el menú de WordPress. Mega Menú 2

 

Temas Elegant Themes

 

Puedes pinchar a aquí para ver todas las entradas relacionadas con esta plantilla.


Suscríbete para no perderte ningún artículo nuevo, te aviso por email


Ya puedes configurar el menú de tu blog, tienda online o web correctamente. Si tienes dudas siempre puedo ayudarte.

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.

1 Comentario

  1. Emili

    Hola Juan,
    Tengo una duda muy simple con los menús. Estoy montando una web de reviews y venta de afiliación, llevo bastante tiempo con ello porque quiero que sea atractiva visualmente y fácil de manejar.
    He creado un menú principal en el que aparecen 5 categorías de las que cuelgan unas subcategorías.

    Ejemplo:

    Salud y Bienestar (categoría padre)
    – Afeitado (subcategoría)
    – Depilación (subcategoría)
    – Cabello (subcategoría)

    Ahora, cuando pulso en el Menú Principal encima de la Categoría, me aparece una página muy sosa con las tres subcategorías.

    Pero si cambio la Categoría Padre por una Página, visualmente cambia muchísimo:

    Salud y Bienestar (Página)
    – Afeitado (subcategoría)
    – Depilación (subcategoría)
    – Cabello (subcategoría)

    El resultado puede llegar a ser mucho más vistoso, puesto que la página me permite jugar visualmente de modo que cuando pulsas sobre Salud y Bienestar puedo hacer que se muestren tres botones con una imagen de llamada a la acción de la subcategoría y puedo jugar con toda la estética de esa página para que sea una portada mucho mas atractiva.

    Mi duda es: ¿cargarme literalmente la categoría padre para cambiarla por una página es perjudicial para el posicionamiento en google o para cualquier otra cosa? ¿Tiene alguna ventaja usar la opción Categoría/Subcategoría frente a Página/Subcategoría?

    Gracias de antemano. Espero que me puedas decir algo pronto, mi web empieza a parecerse a la Sagrada Familia, avanza muy lentamente. Cada paso son 100 dudas.

    Saludos

    Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

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:

Hosting WordPress de SiteGround

¿Quieres estar informado de lo que pasa en IVW?

Suscríbete y te aviso de las novedades

verificarprivacidad

Revisa tu bandeja de entrada o la carpeta de spam para confirmar tu suscripción. ¡Gracias por suscribirte!

Pin It on Pinterest

Share This
Ir al contenido