Menús y navegación

Módulo 4: Crear contenido · Tiempo de lectura: 7 minutos

Objetivo de aprendizaje: Después de esta lección podrá crear un menú claro, tanto en un tema de bloques como en un tema clásico, y sabrá qué hace que un menú sea bueno.

Conceptos clave: bloque de navegación, Editor del sitio, Apariencia > Menús, ubicación de menú, submenú, enlace personalizado, menú móvil, menú de pie de página, texto de enlace, accesibilidad

Dos formas, según su tema

Dónde crea el menú depende de su tema (lección 5.1):

• Tema de bloques: el menú es un bloque de navegación en la cabecera del sitio. Lo edita en el Editor del sitio (Apariencia > Editor > Navegación, o en la parte de plantilla Cabecera).
• Tema clásico: crea el menú en Apariencia > Menús y allí elige una ubicación de menú que ofrece el tema, como "Menú principal" o "Pie de página".

¿No ve Menús en Apariencia, solo Editor? Entonces está usando un tema de bloques. Es una confusión habitual tras cambiar de tema: "mi menú ha desaparecido". El menú antiguo sigue existiendo (está en la base de datos como una lista de elementos de menú), pero el nuevo tema busca en otro lugar. En el Editor del sitio puede importar un menú clásico existente en el bloque de navegación.

Qué puede incluir

Un elemento de menú puede ser:

• una página o entrada de su sitio;
• una categoría (entonces enlaza al archivo de esa categoría);
• un enlace personalizado: cualquier dirección, también a otro sitio, o un ancla dentro de una página (/diensten/#prijzen);
• en un tema de bloques, también otros bloques dentro de la navegación, como un campo de búsqueda, iconos de redes sociales o un botón "Pedir cita".

Puede arrastrar elementos de menú uno debajo de otro como submenú: en un tema clásico arrastrándolos ligeramente hacia la derecha, en el bloque de navegación con "Añadir submenú" o arrastrando un elemento sobre otro.

Un elemento de menú enlaza a una página, pero tiene su propia etiqueta. Si más adelante cambia el título de la página, la etiqueta del menú no cambia automáticamente (en un menú clásico nunca, en el bloque de navegación depende de cómo haya añadido el elemento). Así que revise también el menú después de cambiar un título.

Un buen menú

Un menú no es un índice de todo su sitio. Es una señal que indica los pocos lugares a los que la mayoría de los visitantes quiere ir. Algunas pautas:

• Pocos elementos principales: entre cinco y siete. Más tampoco cabe bien en un teléfono y los visitantes no lo leen.
• Como máximo un nivel de submenú. Un submenú dentro de otro submenú es difícil de usar en un teléfono y confuso para los lectores de pantalla.
• El encabezado de un submenú también es un enlace. En muchos temas, al hacer clic en "Servicios" se abre el submenú, pero "Servicios" en sí también es una página. Asegúrese de que esa página existe y muestra algo útil, o de que quede claro que el elemento es solo un encabezado.
• Palabras comunes que usarían los visitantes: "Precios", no "Nuestras opciones de inversión".
• Contacto y la acción más importante (pedir cita, hacer un pedido) siempre accesibles, a menudo a la derecha del menú o como botón.
• Los enlaces legales (política de privacidad, condiciones generales, configuración de cookies) pertenecen a un menú de pie de página, no al menú principal. Eso sí, siempre localizables, en cada página (lección 9.3).

Móvil y accesible

En un teléfono, el menú suele plegarse en un botón con tres rayas (el "menú hamburguesa"). En el bloque de navegación configura cuándo ocurre eso (siempre, o solo en pantallas pequeñas). Pruébelo siempre en un teléfono real:

• ¿Puede tocar cada elemento con el pulgar sin tocar por accidente el elemento de al lado?
• ¿Se abren los submenús con un toque, y se cierran de nuevo?
• ¿Se cierra el menú al elegir un elemento?

Para la accesibilidad (visitantes con lector de pantalla o que solo usan el teclado) tenga en cuenta:

• Textos de enlace claros. "Leer más" o "Haga clic aquí" no dice nada si un lector de pantalla lee todos los enlaces seguidos. "Lea más sobre nuestro horario de apertura" sí.
• Manejo con el teclado: con Tab recorre el menú, con Entrar abre un elemento. La mayoría de los temas y el bloque de navegación lo hacen bien; los menús hechos a medida con scripts, a menudo no.
• Un enlace a otro sitio preferiblemente se abre en la misma ventana. Si debe abrirse en una ventana nueva, indíquelo.

Otra navegación

Además del menú principal, estos elementos ayudan a los visitantes a orientarse:

• un campo de búsqueda (el bloque de búsqueda), especialmente en un sitio con muchas entradas;
• migas de pan ("Inicio > Servicios > Diseño web"), a menudo generadas por un plugin de SEO o por el tema;
• enlaces internos en sus textos hacia otras páginas (también bueno para el posicionamiento, lección 9.2);
• una página 404 que ayude: con un campo de búsqueda y enlaces a las páginas más importantes en lugar de solo "no encontrado". En un tema de bloques, la edita como plantilla "404" en el Editor del sitio.

En la práctica: así se ve en un panel

En la administración de WordPress:

• Tema de bloques: Apariencia > Editor > Navegación. Elija el menú, añada elementos con el signo más, arrástrelos en el orden correcto, y en los ajustes del bloque de navegación elija cuándo aparece el menú móvil.
• Tema clásico: Apariencia > Menús. Cree un menú, marque páginas a la izquierda y haga clic en Añadir al menú, arrastre el orden, y marque abajo la ubicación de menú. Guardar.

Resumen

• En un tema de bloques crea el menú con el bloque de navegación en el Editor del sitio; en un tema clásico, en Apariencia > Menús con una ubicación de menú.
• Un menú señala el camino a unos pocos lugares importantes: pocos elementos, como máximo un nivel de submenú.
• Los enlaces legales pertenecen a un menú de pie de página, siempre localizable.
• Pruebe el menú móvil en un teléfono real y use textos de enlace que digan algo por sí mismos.
• Un campo de búsqueda, enlaces internos y una página 404 útil complementan el menú.

Cuestionario

Ejercicio

Ejercicio D4.3: Un menú que funciona. Cree (o mejore) el menú principal de su sitio con como máximo siete elementos principales, un submenú y un enlace personalizado, y un menú de pie de página con su política de privacidad. Pruebe el menú móvil en su teléfono y usando solo el teclado (Tab y Entrar). Marque lo que funciona y anote: qué tipo de tema tiene (bloques o clásico), dónde ha creado el menú, y qué texto de enlace ha mejorado y cómo.

Leer más

Para trabajar en WordPress todavía no tenemos artículos propios; la documentación oficial de WordPress es extensa.

• Bloque de navegación (wordpress.org, en inglés): https://wordpress.org/documentation/article/navigation-block/
• Menús en temas clásicos (wordpress.org, en inglés): https://wordpress.org/documentation/article/appearance-menus-screen/
• Editor del sitio (wordpress.org, en inglés): https://wordpress.org/documentation/article/site-editor/