¿Cómo crear un menú en WordPress?

Los menús en WordPress, a mi parecer, creo que son los elementos más importantes que componen un sitio web. Sin los menús no podríamos navegar ni conocer todos los apartados como páginas, entradas o productos de un sitio web.

Crear un menú en WordPress es muy sencillo. Es necesario tener en cuenta como configurarlo y distribuirlo de manera que la navegación sea agradable y el usuario pueda acceder a todos los contenidos de nuestro sitio web.

Índice del contenido
    Add a header to begin generating the table of contents

    1. Conociendo los menús en WordPress

    Dirígete al apartado Apariencia >> Menús. Desde este apartado es donde se gestionan todos los menús que compondrán tu sitio web en WordPress.

    En la siguiente imagen podrás observar todos los parámetros y elementos con los que podrás construir y configurar un menú en WordPress.

    Elementos y propiedades de un menú en WordPress
    Elementos y propiedades de un menú en WordPress
    • Añadir páginas automáticamente. Marcando esta opción, cada vez que crees una página nueva, esta se añadirá al menú sin tener que hacer nada. Se recomienda dejar esta casilla desmarcada para no romper la estética del sitio web. Luego podrás añadir la página al menú en el orden que quieras,
    • Dónde se verá. Aquí podrás elegir qué menú quieres crear. Estos menús están disponibles según el tema que estés utilizando.

    Haciendo clic en la pestaña Opciones de pantalla, puedes habilitar otros tipos de contenido y las propiedades avanzadas del menú.

    • Destino del enlace. Este parámetro se utiliza si quieres que la página se abra en una ventana nueva del navegador. Muy útil para los Enlaces personalizados.
    • Atributos del título. Este texto ofrece información adicional del enlace. Por ejemplo, hacia dónde te llevará el enlace.
    • Clases CSS. Puedes añadir una clase y luego crear la regla CSS. Por ejemplo, si quieres que el color de ese elemento sea rojo en vez de verde para que resalte del resto de elementos en el menú.
    • Relación con el enlace (XFN). Esta propiedad permite establecer la relación que tiene el enlace con el exterior. Por ejemplo si quieres que sea un enlace nofollow (rel="nofollow").
    • Descripción. Permite añadir una descripción al enlace ofreciendo una información amplia sobre el destino del enlace.

    De todos estos parámetros el que más se utiliza es Destino del enlace siempre que sea necesario. Se recomienda su uso con Enlaces externos si quieres enlazar con otro sitio web o landing pages en el mismo sitio web.

    Propiedades avanzadas de un elemento de menú
    Propiedades avanzadas de un elemento de menú

    El texto que indiques en el campo Etiqueta de navegación será el que se muestre en el menú.

    Aunque cada elemento está relacionado con una página (o taxonomía), es recomendable indicar un nombre corto que esté relacionado con el contenido de la página. De esta manera no se rompe la estética del sitio web.

    Anuncio publicitario

    2. Creando el menú de mi sitio web

    En WordPress, los temas se desarrollan para soportar 1 o más menús dependiendo del desarrollador.

    Como te he mencionado anteriormente, Astra es el tema que estamos utilizando para el desarrollo de este curso de WordPress. Este tema soporta 2 menús: el menú primario (o menú principal) y el menú del pié de página.

    En la lección, crear una página con WordPress, te he sugerido trabajar con una estructura inicial (Excel) para llevar el orden de las páginas que vayas creando en tu sitio web.

    La finalidad de trabajar con una estructura inicial es que, tanto en el Excel, como en el listado de páginas y el menú, coincida el orden de las páginas creadas.

    Puedes descargar el fichero Excell desde el enlace: estructura inicial.

    Excel con la estructura inicial de un proyecto en WordPress
    Excel con la estructura inicial de un proyecto en WordPress

    Para crear un menú:

    1. Dirígete al apartado Apariencia >> Menús y escribe un nombre en el campo Nombre del menú. Por ejemplo: Menú principal.
    2. En Páginas, selecciona todos los elementos que van a componer el menú.
    3. Haz clic en el botón Añadir al menú.

    Como puedes observar, todos los elementos seleccionados se han añadido al apartado Estructura del menú.

    Para cambiar el orden de los elementos del menú, haz clic en cada uno y, sin soltar el ratón, arrástralos hacia arriba o abajo hasta que se encuentren todos en el orden que desees.

    Para cambiar el nombre de los elementos de menú, despliega cada uno de los elementos del menú (haciendo clic en la flecha) y, en el campo Etiqueta de navegación, escribe el nombre que se visualizará en el menú.

    Marca la casilla Menú primario en los ajustes del menú y haz clic en Guardar menú.

    Creación del menú principal del sitio web
    Creación del menú principal del sitio web

    Una vez hayas creado el menú principal hay que crear el menú del pié de página. Para esto, haz clic en el enlace crea un nuevo menú y repite el procedimiento anterior.

    Puedes añadir los elementos de menú que consideres oportunos. Lo más común es añadir las páginas legales y alguno más si deseas.

    Creación del menú del pié de página del sitio web
    Creación del menú del pié de página del sitio web

    Vamos a la portada de nuestro sitio web para comprobar que se ven bien los menús que hemos creado. Abre una nueva pestaña del navegador y escribe la URL de tu sitio web: https://www.midominio.com/ (recuerda sustituir midominio.com por el tuyo).

    Con el tema Astra, podemos observar que el menú principal se encuentra en la cabecera de la página pero no se encuentra el menú del pié de página. Entonces, ¿qué hemos hecho mal?

    No te preocupes que no hemos hecho nada mal. Aunque Astra ofrece un espacio en el pié de página para alojar el menú, también ofrece espacio para otros elementos. Es por esto que no lo ha asignado automáticamente y hay que hacerlo de forma manual.

    Para esto, dirígete a Apariencia >> Personalizar >> Pie de página >> Barra del pie de página.

    Asignar el menú pié de página en Astra
    Asignar el menú pié de página en Astra

    En Diseño, puedes elegir la configuración de los elementos del pié de página. >En las Secciones 1 y 2, selecciona el contenido que quieres que se muestre en estos espacios. Puedes elegir entre menú del pie de página, texto personalizado, un widget o nada.

    Una vez hayas finalizado, haz clic en Publicar.

    3. Submenus en WordPress

    Los submenús son elementos dependientes de los elementos de un menú. Son aquellos que se despliegan debajo de un elemento de menú cuando pasas el ratón. A un elemento de menú se suele llamar padre y al de un submenú hijo.

    Crear un submenú es exactamente igual que crear un menú en WordPress con algunas variaciones.

    El proceso es el siguiente:

    1. Lo primero que tienes que hacer es crear un menú.
    2. Selecciona los elementos y añádelos a la estructura del menú. Se añadirán al final de todos los elementos.
    3. Selecciona uno de ellos y arrástralo justo debajo del elemento padre del menú que corresponda. Una vez lo ubiques debajo de este elemento, arrástralo ligeramente hacia la derecha.
    4. Repite el mismo procedimiento con el resto de elementos.
    5. Haz clic en el botón Guardar menú.

    El orden en el que coloques los elementos, tanto del menú como del submenú, será el mismo orden que se vera en tu sitio web.

    Creación de un submenú en WordPress
    Creación de un submenú en WordPress
    Submenú en WordPress
    Submenú en WordPress

    4. Elementos de menú sin enlace

    Los elementos de menú sin enlace se suelen utilizar mayormente cuando tenemos un submenú (o varios) en nuestro menú principal. La idea es tener un elemento padre que no enlace con nada y que de él dependan varios elementos hijo que conforman el submenú.

    Un elemento de menú sin enlace es un elemento decorativo de primer nivel, que no tiene ninguna relación con los tipos de contenido, pero que es necesario para alojar elementos hijo y construir un submenú.

    Tomando como referencia las imágenes del punto anterior, fíjate que tanto el elemento padre (Servicios) como los elementos hijo son páginas. Esto quiere decir que el elemento padre enlaza con una página y, de esa página, derivan 3 subpáginas relacionadas.

    Ahora veamos las siguientes imágenes:

    Creación de un submenú con elemento sin enlace en WordPress
    Creación de un submenú con elemento sin enlace en WordPress
    Submenú en WordPress
    Submenú en WordPress

    En este caso el elemento padre (Servicios) no es una página sino un Enlace personalizado (primera imagen) al que no le hemos asignado ningún enlace. Será un elemento decorativo sin enlace pero necesario para crear el submenú.

    Sin embargo, en el menú de nuestro sitio web (segunda imagen), no ha cambiado nada desde el punto de vista estético pero el elemento padre no nos redirigirá a ningún sitio por no tener enlace.

    Para crear un enlace sin menú tenemos que añadir un elemento del tipo Enlace personalizado:

    • URL: simplemente escribimos el símbolo almohadilla "#".
    • Texto del enlace: escribimos el texto que queremos que se vea en el menú.
    Enlace personalizado en un menú en WordPress
    Enlace personalizado en un menú en WordPress

    Anuncio publicitario

    5. Conclusión

    Crear un menú en WordPress es bastante sencillo. Dependiendo del tema que utilices, puedes realizar un sitio web con varios menús según tus necesidades.

    Como te he mencionado anteriormente, los menús son los elementos más importantes de un sitio web. Sin un menú, no podríamos navegar ni conocer un sitio web.

    ¿Te ha gustado?

    Te estaría muy agradecido si pudieras valorar esta entrada y compartirla en tus redes sociales. De esta manera me animas a continuar trabajando en este proyecto y ayudas a otras personas que desean aprender.

    (18 votos, promedio: 4.9 de 5)

    Facebook
    Twitter
    WhatsApp
    Telegram
    Email

    ¿Me invitas un café?

    Todo el contenido que puedes encontrar en este sitio web es gratis y siempre lo será pero, mantenerlo, requiere de muchos cafés y muuuuchas horas . Si te gusta mi trabajo y te está ayudando, considera invitarme un café para apoyarme y apoyar este proyecto. ¡Te invito un café!.

    Suscríbete y aprende WordPress desde cero

    No me gusta el SPAM y se que a ti tampoco. Sólo recibirás información útil sobre WordPress.

    Al enviar, confirmas que has leído y aceptas la política de privacidad. Conoce nuestro compromiso con tu privacidad.

    Comparte tu experiencia

    Deja un comentario si tienes alguna duda o cuéntanos cómo ha sido tu experiencia.

    Suscríbete!
    Avísame sobre

    7 Comentarios
    Inline Feedbacks
    Ver todos los comentarios

    Hola Gian,
    Gracias por esta publicación.
    Tengo una duda, he creado un menú primario, un sólo elemento que es un enlace externo.
    Cuando pasa a responsive, se transforma en menú hamburguesa, cosa que me va perfecto, pero al desplegarse el menú, me aparece en color lila Astra... cómo puedo modificar ese color al turquesa en que está diseñada mi web?

    Muchas gracias de antemano y saludos,
    Noelia

    Hola Noelia, la mayoría de colores y tipografías en general de Astra solo se pueden modificar con la versión PRO. En este enlace puedes comprar la versión PRO: Astra PRO. Un saludo!

    Muchas gracias por responder tan rápido!

    Hola Gian una pregunta, yo en mi menu tengo un elemento que es etiqueta, y debajo aparecen otras etiquetas que deberían ser subcategorias, pero tengo problemas y no se como solucionarlo, si me puedo comunicar con vos de alguna forma te estaria super agradecido

    Hola Facundo, con este comentario ya te has comunicado conmigo, solo que no entiendo muy bien que problema tienes. Si quieres puedes exponerlo respondiendo a este comentario y así lo compartimos con el resto de usuarios. Un saludo!

    Okey Gian gracias por el servicio. El problema es el siguiente, como página de entradas seleccione la de Blog, pero tengo otra pagina que es la de cultivo que también van entradas específicas al a eso, al cultivo, el problema es que cuando clickeo en el menú la parte de cultivo, cuando carga no aparece ninguna de las entradas, entonces decidí poner una Etiqueta que en esta si aparecen. No se si hay alguna manera, en el caso de que ponga la pagina de cultivo en el menu, de que no tenga ninguna acción es decir que clicken y no pase nada. Tampoco me deja colocar categorías en el menú no se si es normal de wordpress o si es problema mio. Espero haberme explicado, saludos!

    Hola Facundo, si he entendido bien creo que el problema está en que has creado una página que se llama Cultivo y quieres que aparezcan las entradas correspondientes. En primer lugar, Cultivo debería ser una Categoría, no una página. No es "técnicamente correcto" poner entradas de una categoría en una página a menos que sepas lo que estás haciendo. Lo que tienes que hacer es crear una categoría llamada Cultivo y asignarle esa categoría a las entradas correspondientes (borra la página). Luego asignas la categoría como item del menú. Para que WordPress te deje hacerlo, tiene que haber al menos 1 entrada con esa categoría asignada. En el capítulo 07 puedes encontrar toda la información sobre la gestión de un blog. Un saludo!

    7
    0
    ¿Dejas un comentario? Gracias!x

    Tratamiento de datos personales

    • Responsable: MARIA ANTONIETA BEAUTY CONCEPT, S.L.
    • Finalidad: Suscribirte a la lista de correos electrónicos.
    • Derechos: Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en legal@cursowordpress.com, así como el derecho a presentar una reclamación ante una autoridad de control.
    • Destinatarios: Los datos no se cederán a terceros salvo en los casos en que exista una obligación legal.
    • Información adicional: En mi política de privacidad encontrarás información adicional sobre la recopilación y el uso de su información personal incluida información sobre acceso, conservación, rectificación, eliminación, seguridad y otros temas.

    Tratamiento de datos personales

    • Responsable: MARIA ANTONIETA BEAUTY CONCEPT, S.L.
    • Finalidad: Moderar y responder comentarios de usuarios.
    • Derechos: Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en legal@cursowordpress.com, así como el derecho a presentar una reclamación ante una autoridad de control.
    • Destinatarios: Los datos no se cederán a terceros salvo en los casos en que exista una obligación legal.
    • Información adicional: En mi política de privacidad encontrarás información adicional sobre la recopilación y el uso de su información personal incluida información sobre acceso, conservación, rectificación, eliminación, seguridad y otros temas.