✅Cómo Crear un Menú Ancla One Page con Gutenberg en WordPress

En muchas ocasiones, cuando creamos una web, nos damos cuenta de que el contenido disponible no es suficiente como para justificar la creación de múltiples páginas individuales con apenas unos párrafos en cada una. En estos casos, la mejor solución es agrupar todo el contenido en la página de inicio y estructurarlo de forma clara y accesible. Aquí es donde el menú ancla “one page” cobra protagonismo: permite a los usuarios navegar entre las diferentes secciones de la página web de manera fluida, mejorando la experiencia y la usabilidad.

¿Qué es un menú ancla “one page”?

Un menú ancla es una navegación que en lugar de dirigir al usuario a diferentes páginas internas, lo desplaza directamente a distintas secciones dentro de la misma página a través de enlaces que apuntan a un ID específico en el contenido. Este tipo de menú es ideal para páginas estáticas o landing pages con poco contenido distribuido. Es mucho más eficiente reunir toda la información en una sola página larga y ayudar al visitante a navegar de forma fluida y rápida, evitando que tenga que cargar múltiples páginas con bloques de información dispersa y breves.

Puedes ver un par de ejemplos de webs One Page con este tipo de menú aquí y aquí.

Paso 1: Crear las secciones en Gutenberg

1. Edita la página Inicio.
2. Divide tu contenido en secciones y bloques (Ejemplo: «Sobre mí», «Servicios», «Testimonios», «Contacto»).
3. A cada sección le vas a asignar un ID único.

¿Cómo asigno un ID en Gutenberg?

• Selecciona el bloque que será el inicio de la sección.
• En la barra lateral derecha, ve a la pestaña «Avanzado».
• En «Anclaje HTML» escribe el ID, por ejemplo: servicios, contacto, etc.

Paso 2: Crear el menú personalizado

1. Ve a Apariencia > Menús.
2. Crea un nuevo menú y asígnale un nombre (por ejemplo: “Menú One Page”).
3. Añade enlaces personalizados (en vez de páginas).

Formato de enlace ancla:

• Para la sección «Servicios», escribe en la URL: #servicios
• Para la sección «Contacto»: #contacto

El texto de enlace será el que verá el usuario, como “Servicios” o “Contacto”.

Paso 4 (opcional): Efecto de scroll suave

Si quieres que el desplazamiento hacia las secciones sea más fluido, puedes añadir este código al footer de tu tema desde functions.php o utilizar un plugin como Code Snippets:

add_action('wp_footer', function() {
    echo "<script>
        document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });
    </script>";
});
Lenguaje del código: PHP (php)

Cuando el usuario haga clic en un enlace del menú, será llevado de forma fluida a la sección correspondiente dentro de la misma página.