• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

Dani Sánchez

  • ¿Eres agencia?
  • Quién soy
  • Servicios WordPress
    • Mantenimiento
    • Maquetación & Desarrollo
    • Soporte técnico
  • Portfolio
  • Blog
  • Presupuestos
Estás en: Inicio / Cursos / Curso de Wordpress – 8. Creación de menús

Curso de WordPress – 8. Creación de menús

El 8 de mayo de 2016 por dani.sanchez

Contenidos del curso

En el capítulo anterior sobre creación de páginas internas, creamos una serie de páginas simulando los contenidos de un curso de inglés. Creamos una página principal (o padre) con el título del curso donde se redactaría la presentación o introducción del curso, y una serie de páginas secundarias (o hijas) que contendrían cada uno de los capítulos.

También contamos con la página principal de nuestro sitio web y la página que creamos para contacto.

Ahora organizaremos todas estas páginas en un menú principal para acceder cómodamente a todos los contenidos.

Para ir a la sección de menús nos situamos en el panel administrador de WordPress, posicionándonos sobre Apariencia y Menús:

Menús

Actualmente no tenemos ningún menú creado, por lo que casi todas las opciones están desactivadas.

Pantalla de menús

Vamos a crear un menú al que llamaremos «Principal», pulsando en el botón Crear menú:

Menú Principal

Ahora podemos añadir elementos a la Estructura del Menú.

¿Qué tipo de elementos se pueden añadir a los menús?

Elementos_de_menu

Páginas: Se añaden páginas que ya tenemos creadas en nuestro sitio web. Por defecto nos muestra las páginas más recientemente creadas, pero podemos seleccionar que nos muestre todas o buscarlas por el título, lo que nos viene muy bien en caso de tener múltiples páginas creadas.

Entradas: No es lo normal, pero también nos permite buscar de entre nuestras entradas o publicaciones y añadirlas a un menú.

Enlaces personalizados: Podemos añadir al menú un enlace hacia una URL específica, por ejemplo a nuestro Twitter o página de Facebook.

Categorías: Si tenemos nuestras entradas clasificadas en categorías, cada una de estas dispone de una URL propia para mostrar en una página todas las entradas correspondientes a esa categoría. Las categorías las veremos en el próximo capítulo dedicado a las Entradas.

También se nos abren nuevas opciones para el menú recién creado.

opciones_de_menu

Añadir páginas automáticamente: Si marcamos esta opción, cada nueva página que creemos en WordPress se va a añadir automáticamente al menú. De momento la vamos a dejar desactivada.

Ubicaciones del tema: Dependiendo del tema o plantilla que instalemos, podremos tener varios lugares en los que ubicar los menús. Normalmente existe un Menú Primario que se posiciona en la Cabecera o Header, y también puede haber localizaciones para menús secundarios que suelen situarse en los Laterales o Sidebars y Pies de página o Footers. Como el menú que hemos creado actuará de menú principal, marcaremos la opción Menú Primario.

Vamos a añadir al menú principal las páginas correspondientes al Curso de inglés y la página de Contacto:

añadir_al_menu

Para ello marcamos las casillas de cada página y pulsamos en boton_añadir_al_menu

Se añaden todos los nuevos elementos a la Estructura del Menú:

estructura_del_menu

Pulsamos en Guardar menú, y vamos a ir a la página para ver cómo queda el menú principal recién creado:

menu_desordenado

Como vemos se ha generado el menú principal en el Header de nuestra página. Un enlace por cada página añadida. Pero para mejorarlo ahora vamos a ordenarlo.

Volvemos al administrador del menú. Podemos arrastrar cada elemento y posicionarlo a nuestro gusto:

arrastrar_elemento_menu

Vamos a ordenarlo de forma que quede así:

menu_ordenado

Guardamos y volvemos a la página para observar el resultado:

menu_ordenado

Ahora nos muestra el menú ordenado, mucho más coherente que la primera vez.

Pero podemos mejorarlo aún más creando una jerarquía de menú dentro del curso de inglés, ahorrando mucho espacio para incorporar otros elementos al menú correspondiente a otros contenidos.

Si volvemos al administrador de menús, observamos que de igual modo que podemos arrastrar un elemento arriba o abajo, podemos arrastrarlo una posición a la derecha, convirtiéndolo en un subelemento:

subelementos_menu

Si hacemos lo mismo con los demás elementos correspondientes a los capítulos del curso de inglés, nos quedará una estructura como esta, donde Curso de Inglés será el elemento padre del menú, y los capítulos serán los subelementos o hijos.

subelementos

Vamos a la página a ver cómo queda:

pagina_con_menu_final

Observamos que el menú se ha reestructurado en dos únicos elementos principales, ¿pero dónde están los demás subelementos? Si posicionamos el ratón en Curso de Inglés, aparecen automáticamente quedando así organizamos de forma muy elegante:

ver_subelementos

Vamos a incluir un elemento más al menú, que será un enlace personalizado a nuestra página de Facebook:

Volvemos al administrador de menús y nos situamos sobre Enlaces Personalizados, pegamos la URL que queremos agregar al menú, y texto que queremos darle, por ejemplo «Mi Facebook».

enlace_personalizado

Añadimos al menú y Guardamos.

principal

Así podemos añadir todos los elementos que necesitemos para nuestro menú y organizarlos fácilmente según nuestras preferencias con tan solo arrastrar al lugar que deseemos.

Para finalizar comentar que cada elemento de menú puede ser editado haciendo clic en el triangulito a la derecha de cada elemento, así como borrarlo en caso de equivocarnos o dejar de necesitarlo:

editar_elemento

Publicado en: Cursos, WordPress

¿Quiéres invitarme a un café?

Si te has fijado en este blog no hay ni rastro de publicidad, todo el contenido publicado lo hago de forma artruista al igual que yo recurro a otros sitios cuando necesito algo. Pero si te he servido de ayuda y quieres agradecérmelo, puedes hacer una pequeña donación (el importe que quieras):

Entradas similares

  • Cerrar modales de Elementor con JavaScript (jQuery)
  • Redirección 301 para cambios de dominio
  • Guía rápida de Flexbox
  • Filtro de WooCommerce para personalizar el mensaje de «Gracias por tu pedido»
  • Portátiles reacondicionados, ¿mejor que uno nuevo?

Barra lateral principal

Autor

Dani Sánchez

logo mastodon @danisanchez

Entradas recientes

  • Iniciar sesión en nuestros VPS mediante SSH Keys
  • Cerrar modales de Elementor con JavaScript (jQuery)
  • Redirección 301 para cambios de dominio
  • Guía rápida de Flexbox
  • Filtro de WooCommerce para personalizar el mensaje de «Gracias por tu pedido»

Comentarios recientes

  1. Brandon Portes en Taller de verano de WooCommerce #1
  2. Sebastian en Instalar WordPress + MySQL + phpMyAdmin desde Docker Compose
  3. Rigol en Instalar LAMP (Linux, Apache, MySQL y PHP) en Fedora
  4. dani.sanchez en Instalar WordPress + MySQL + phpMyAdmin desde Docker Compose
  5. rikylinux en Instalar WordPress + MySQL + phpMyAdmin desde Docker Compose

Categorías

  • Actualidad
  • Afiliación AliExpress
  • Agent Press Pro
  • Bettaso Web Restaurantes
  • Cursos
  • Destacado
  • Divi
  • Drupal
  • Elementor
  • Genesis
  • Iniciación a PHP
  • Joomla!
  • Linux
  • Publicaciones
  • Tutoriales
  • WooCommerce
  • WordPress
Medium banner says Support Inkscape
Banner pie de página

Maquetación web, landings, blogs y tiendas online
cuidando hasta el mínimo detalle

Si necesitas que desarrolle tu proyecto web ponte en contacto conmigo.

Contacto
  • Mastodon
  • YouTube
  • LinkedIn

Alojado con energía 100% verde

Dani Sánchez © 2025 · Política de privacidad · Política de cookies