Cómo agregar un menú de navegación a WordPress: una guía para principiantes

¿Tiene problemas para agregar un menú de navegación a WordPress?

WordPress realmente lo hace bastante Interfaz fácil de usar que lo ayudará a agregar menús a WordPress sin saber ningún código. Pero si eres nuevo en WordPress, aún puede ser difícil sumergirte y crear tu primer menú.

En esta publicación, te mostraré todo lo que necesitas saber para crear un menú de navegación único y detallado como el que usamos aquí en Recursos WP:

Al final de esta publicación, sabrás cómo:

Crear un nuevo menú de WordPress
Elige dónde aparece este menú
Agregue elementos de navegación a su menú
Cree estructuras de navegación más avanzadas, como menús desplegables anidados
Usa el menú de WordPress en los widgets

¡Pasemos directamente a crear el menú de navegación!

Paso 1: crea tu menú de navegación

Antes de que pueda comenzar a agregar enlaces y elementos de navegación a su menú, debe… ¡crear un menú! Así que empecemos desde el principio…

Para acceder a la interfaz del menú de navegación:

Ir al panel de WordPress
haga clic aquí Apariencia → Menú

ahora estas en Menú interfaz. Esto debería pedirle que cree el menú inmediatamente. Esto es todo lo que necesita hacer ahora:

Especificar El nombre del menú – es un nombre puramente interno que te ayudará a recordar el menú – tus invitados no lo verán.
Después de ingresar su nombre y apellido, haga clic en Crea un menú.

¡Y eso es todo! Acabas de crear el menú.

Paso 2: Asigna tu menú a la ubicación deseada

Después de crear el menú, WordPress mostrará una pantalla que contiene parcialmente una opción llamada Configuración del menú. Este paso es de especial interés para usted Ver ubicación opción:

Esto le dice a WordPress dónde insertar el menú de navegación en la versión activa del sitio. Por ejemplo, en Recursos WP (y la mayoría de los otros sitios web) nuestro menú de navegación principal está claramente ubicado en nuestro encabezado.

Desafortunadamente, los nombres de estas ubicaciones difieren según el tema: por lo tanto, las ubicaciones reales que ve en la interfaz pueden ser diferentes de las ubicaciones en la captura de pantalla de mi sitio de muestra.

Entonces, ¿qué ubicación debe elegir?

Bueno, si desea crear el menú de navegación «estándar» que usamos aquí en Recursos WP, generalmente querrá seleccionar una opción que incluya la palabra «Básico». Por lo general, lo verá listado como algo como esto:

Básico
Menú principal
Menú de navegación principal

Es posible que algunos temas no contengan la palabra «Básico», lo que puede dificultar un poco las cosas. Por lo tanto, si no ve «Básico» en ninguna parte de la lista de ubicaciones, también puede probar ubicaciones como:

Después de encontrar la ubicación correcta del menú, marque la casilla y haga clic en guardar el menú:

Paso 3: Agregar elementos al menú de navegación

¡Ya casi terminas! Todo lo que queda es agregar los elementos que aparecerán en el menú de navegación.

Esta sección será la más larga de esta guía, ya que hay muchas cosas que puede hacer al agregar elementos del menú de navegación.

Permítanme comenzar con algunos consejos generales como:

Agregar un nuevo elemento del menú de navegación
Personalizar un elemento del menú de navegación
Cambiar el orden de los elementos del menú de navegación
Eliminar el elemento del menú de navegación

Luego, presentaré algunos tutoriales sobre cómo hacer ciertas cosas, como:

Cree un menú desplegable debajo de los elementos normales del menú de navegación
Cree una categoría principal en la que no se pueda hacer clic para un menú desplegable
Agregar enlaces personalizados

¿Cómo agrego un nuevo elemento del menú de navegación?

Para agregar un elemento al menú de navegación, use la barra lateral de la izquierda:

En esta barra lateral, debe notar que hay diferentes secciones para:

Fiestas – te permite agregar enlaces a cualquiera de los publicados paginas.
Publicaciones – te permite agregar enlaces a cualquiera de los publicados publicaciones.
Enlaces personalizados – esto le permite agregar enlaces personalizados. Estos pueden ser enlaces internos o enlaces externos.
Categorías – esto le permite agregar enlaces a diferentes categorías en su blog.

Según el tema específico y/o los complementos que esté utilizando, también puede ver secciones adicionales con elementos de menú que son específicos de su sitio web..

Supongamos que desea agregar un enlace al suyo contacto lado. Todo lo que necesitas hacer es:

Marque la casilla de la suya contacto lado
haga clic aquí Agregar al menú

Después de hacer clic Agregar al menúdeberías verlo aparecer debajo Estructura del menú en el lado derecho de la interfaz:

¿Cómo personalizo un elemento del menú de navegación?

De forma predeterminada, WordPress utilizará el nombre real de la categoría de publicación/página/texto en el menú de navegación.

Pero si quieres cambiarlo, todo lo que tienes que hacer es hacer clic Flecha hacia abajo junto a cualquier elemento del menú y puede cambiar su texto:

Cómo reorganizar los elementos del menú de navegación

Cuando comience a agregar varios elementos de menú, es posible que deba reordenarlos.

Para reorganizar el orden de los elementos del menú, simplemente arrástrelos y suéltelos en el orden que desee:

También puede arrastrar el elemento del menú debajo otro elemento de menú para crear un submenú:

Voy a profundizar en cómo funciona esta función de submenú en particular en un momento.

¿Cómo elimino un elemento del menú de navegación?

Para eliminar un elemento de un menú:

haga clic aquí Flecha hacia abajo icono a la derecha del elemento
Elegir Para eliminar

Cómo crear un submenú desplegable

Los menús desplegables son una característica bastante común en muchos sitios web. Si no está seguro de lo que quiero decir, aquí hay un ejemplo de mi página de prueba:

Para crear un menú de este tipo, todo lo que necesita hacer es reorganizar los elementos del menú para que estén «dentro» del elemento del menú principal de la siguiente manera:

Una vez hecho esto, WordPress marcará cada elemento en el menú con elemento hijo etiqueta.

También puede crear múltiples niveles de anidamiento como este:

En el frente, se vería algo como esto (¡el diseño real depende de tu tema!):

Finalmente, si está trabajando con menús desplegables, a menudo se encuentra con situaciones en las que no desea que las personas puedan hacer clic en el elemento del menú principal (es decir, el elemento del menú sobre el que el usuario flota para abrir el menú desplegable). -menú abajo).

Para hacer esto, necesita agregar uno nuevo Enlaces personalizados opción del menú:

Agregue el símbolo # w URL caja
Introduzca el texto deseado en Texto del enlace caja
haga clic aquí Agregar al menú

Use la función de arrastrar y soltar para convertir el elemento que acaba de agregar en una categoría principal
Edite el elemento que acaba de agregar y elimine el signo # para que el campo de URL quede vacío (Esta es una pequeña solución ya que WordPress no le permite agregar un elemento en blanco de inmediato)

¡Y eso es todo! Ahora, los usuarios pueden pasar el cursor sobre este elemento, pero no podrán hacer clic en él; solo acceden a los elementos desplegables.

Cómo agregar enlaces personalizados al menú de navegación

Obtuvo una vista previa de esto en la sección anterior, pero vamos a profundizar un poco más en Enlaces personalizados.

Los enlaces personalizados son útiles porque le permiten:

Enlaza rápidamente a cualquier ubicación de tu sitio, incluso si no es una publicación o página normal de WordPress.
Agregar enlaces externos a otros sitios.

Para agregar un enlace personalizado:

ir Enlaces personalizados sección en la barra lateral izquierda
Introduzca la URL a la que desea que haga referencia el elemento en URL caja
Introduzca el texto del elemento de menú en Texto del enlace caja
haga clic aquí Agregar al menú

Cómo editar elementos de menú con vista en vivo

En todos los ejemplos anteriores, le mostré cómo agregar un menú de navegación a WordPress usando el dedicado Menú interfaz.

Pero WordPress en realidad incluye otra forma de editar el menú. viendo los cambios en tiempo real.

Si bien no creo que esta sea la forma más fácil de crear un nuevo menú desde cero, vale la pena verificar cómo se verán los elementos del menú en un sitio de trabajo. Esto ayudará a garantizar que su menú se vea bien y sea fácil de usar para los visitantes.

Para acceder:

Ir Apariencia → Personalizar.
Elegir Menú la opción en la barra lateral del personalizador de WordPress

Seleccione su menú (el nombre que creó debe ser visible)
Use una interfaz similar para agregar nuevos artículos o cambiar su orden

A medida que realice cambios en el menú, la vista previa del sitio se actualizará automáticamente para reflejar estos cambios.

¿Cómo mostrar el menú de navegación de WordPress en un widget?

Finalmente, quiero concluir mostrándole cómo abrir el menú de WordPress en la barra lateral (o cualquier otra área de widgets).

Aquí está cómo hacerlo:

Ir Apariencia → Widgets
Fundar Menú de Navegación artilugio

Arrastrar Menú de Navegación widget para la ubicación seleccionada
Dale al widget (opcional) un título
Seleccionar menú con Seleccione el menú soltar – los menús se enumerarán de acuerdo con el nombre interno que les dio.
haga clic aquí Rescate