Cómo crear secciones de Preguntas y Respuestas atractivas en WordPress con HTML

Te voy a enseñar cómo crear FAQ en WordPress utilizando HTML moderno, específicamente las etiquetas <details> y <summary>, una solución ligera, accesible y amigable con el SEO.

Crear una sección de preguntas frecuentes en tu sitio WordPress no tiene por qué ser complicado ni requerir plugins adicionales si buscas una solución sencilla y efectiva.

Las etiquetas HTML <details> y <summary>, complementadas opcionalmente con un poco de CSS para el estilo y JavaScript para mejorar la interacción, te ofrecen una manera moderna, semántica, accesible y ligera de implementar un acordeón HTML para tus FAQ en WordPress, ya sea usando el editor de bloques o tu maquetador visual favorito.

¿Qué son las etiquetas <details> y <summary> de HTML?

Quizás no las conozcas, pero las etiquetas <details> y <summary> son elementos estándar de HTML5 diseñados precisamente para este tipo de funcionalidad: mostrar y ocultar información adicional.

• La etiqueta <details> actúa como un contenedor para el contenido que quieres mostrar u ocultar. Por defecto, este contenido está oculto.
• La etiqueta <summary> se coloca dentro de <details> y proporciona el texto visible, la «pregunta» o el resumen sobre el que el usuario hará clic para desplegar el contenido.

Al hacer clic en el texto de <summary>, el navegador mostrará u ocultará el resto del contenido dentro de <details>, creando un efecto de acordeón nativo.

Beneficios de usar <details> y <summary> para tus FAQ:

1. Mejora de la experiencia de usuario (UX): Permiten presentar mucha información de forma compacta. Los usuarios pueden escanear rápidamente las preguntas y expandir solo aquellas que les interesan, evitando el scroll innecesario y mejorando la navegación en tu sección de preguntas frecuentes en WordPress con <details>.
2. Accesibilidad básica incorporada: Estos elementos son accesibles por defecto. Los lectores de pantalla y la navegación por teclado funcionan correctamente con ellos sin necesidad de añadir roles ARIA complejos ni JavaScript adicional para la funcionalidad básica de mostrar/ocultar.
3. Ligereza y rendimiento: Al ser una característica nativa del navegador, no necesitas cargar librerías de JavaScript externas para crear un acordeón HTML en WordPress, lo que contribuye a una carga más rápida de la página.
4. Potencial SEO: Aunque el contenido dentro de <details> está inicialmente oculto para el usuario, los motores de búsqueda como Google pueden rastrear e indexar este contenido. Esto es crucial para mejorar el SEO de tu FAQ en WordPress, ya que las respuestas pueden contribuir a posicionar por las preguntas que los usuarios buscan. Un FAQ semántico en WordPress es siempre una buena práctica.

Creando tu primera FAQ con <details> y <summary>: la estructura básica

La estructura HTML es muy sencilla. Veamos un ejemplo para una única pregunta y respuesta:

<details>
  <summary>¿Cuál es la primera pregunta frecuente?</summary>
  <p>Esta es la respuesta detallada a la primera pregunta. Puedes incluir párrafos, listas e incluso otras etiquetas HTML aquí dentro.</p>
</details>
Lenguaje del código: PHP (php)

Si quieres tener varias preguntas, simplemente repites la estructura:

<details>
  <summary>¿Cómo creo una FAQ en WordPress con HTML?</summary>
  <p>Puedes usar las etiquetas <code>&lt;details&gt;</code> y <code>&lt;summary&gt;</code> directamente en el editor de bloques de WordPress o con un módulo HTML en tu maquetador visual favorito.</p>
</details>

<details>
  <summary>¿Son estas etiquetas buenas para el SEO?</summary>
  <p>Sí, el contenido dentro de <code>&lt;details&gt;</code> es indexable por los motores de búsqueda, lo que ayuda a tu estrategia SEO.</p>
</details>

<details>
  <summary>¿Necesito JavaScript para que funcionen?</summary>
  <p>No, la funcionalidad básica de expandir y contraer es nativa del navegador y no requiere JavaScript.</p>
</details>
Lenguaje del código: PHP (php)

Como ves, el código es limpio y muy fácil de entender. La etiqueta <summary> contiene la pregunta visible, y el resto del contenido dentro de <details> (en este caso, un párrafo <p>) es la respuesta que se mostrará al hacer clic.

Cómo implementar tu FAQ con HTML en WordPress

Ahora que ya conoces la estructura, veamos cómo puedes añadir estas secciones de preguntas frecuentes en WordPress con <details> a tus páginas o entradas, tanto con el editor de bloques como con maquetadores visuales populares.

Usando el editor de bloques de WordPress (Gutenberg)

Si utilizas el editor de bloques moderno de WordPress (Gutenberg), el proceso es muy directo:

1. Abre la página o entrada donde quieras añadir la sección de FAQ.
2. Haz clic en el icono «+» para añadir un nuevo bloque.
3. Busca el bloque «HTML personalizado» (o custom HTML en inglés) y selecciónalo. Este bloque te permite insertar código HTML directamente.
4. Pega tu código HTML (el que vimos en el ejemplo anterior) en el área de texto del bloque.
5. Haz clic en «Vista previa» dentro del bloque HTML para ver cómo se mostrará, o guarda/actualiza la página y visualízala en el frontend.

¡Y ya está! Tendrás una sección de FAQ funcional. Este es el método recomendado para crear FAQ en WordPress con HTML de forma nativa si usas el editor de bloques.

Usando maquetadores visuales (Elementor, Divi, Oxygen, Beaver Builder, etc.)

Si prefieres trabajar con un maquetador visual o page builder como Elementor, Divi, Oxygen, Beaver Builder u otros, el proceso es igualmente sencillo, ya que la mayoría ofrecen formas de insertar código HTML personalizado:

1. Abre la página con tu maquetador visual: Inicia la edición de la página o sección donde deseas colocar la FAQ.
2. Busca y añade un módulo/widget de HTML: El nombre exacto puede variar según el maquetador. Busca términos como «HTML», «Código», «HTML personalizado», «Bloque de código» (Code Block), o similar.
   • En Elementor, puedes usar el widget «HTML».
   • En Divi, el módulo «Código» es una buena opción.
   • En Oxygen Builder, puedes usar el elemento «Code Block».
   • En Beaver Builder, el módulo «HTML» te servirá.
3. Pega tu código HTML: Una vez añadido el módulo/widget, encontrarás un área de texto donde puedes pegar la estructura HTML de tus <details> y <summary> que preparamos antes.
4. Guarda los cambios y previsualiza: Aplica los cambios en tu maquetador y luego revisa la página en el frontend para asegurarte de que la FAQ se muestra y funciona correctamente.

Aunque muchos maquetadores visuales ofrecen sus propios módulos de «Acordeón» o «Preguntas frecuentes», utilizar directamente HTML con <details> y <summary> te da un control más fino, es semánticamente correcto y, a menudo, más ligero, ya que no depende de los estilos o scripts adicionales que pueda cargar el módulo específico del maquetador para esta función. Es una excelente alternativa si buscas simplicidad y rendimiento.

Dando estilo a tus preguntas frecuentes con CSS

Por defecto, la apariencia de <details> y <summary> es bastante básica y puede variar ligeramente entre navegadores. La buena noticia es que puedes personalizarla fácilmente con CSS.

No profundizaremos mucho aquí, pero para que te hagas una idea, podrías querer cambiar el cursor cuando se pasa sobre la pregunta o modificar el marcador (la flechita o triángulo) que indica si está desplegado o no.

Por ejemplo, para cambiar el cursor a una «manita» y añadir un poco de espacio:

summary {
  cursor: pointer; /* Indica que es un elemento clicable */
  padding: 0.5em 0;
  font-weight: bold; /* Para destacar la pregunta */
}

details {
  margin-bottom: 1em; /* Espacio entre preguntas */
  border-bottom: 1px solid #eee; /* Un separador sutil */
}

details p {
  padding: 0.5em 1em; /* Un poco de sangría para la respuesta */
}
Lenguaje del código: PHP (php)

Puedes añadir este CSS en WordPress a través del Personalizador > CSS adicional, o si tu maquetador visual lo permite, en las opciones de CSS personalizado de la página o del propio módulo HTML.

Experimenta con diferentes estilos para que la sección de FAQ se integre perfectamente con el diseño de tu web.

Mejorando la interacción: acordeón exclusivo con JavaScript

El comportamiento nativo de <details> permite que múltiples elementos estén abiertos simultáneamente. Si quieres que al abrir un elemento <details> los demás se cierren automáticamente (un comportamiento de «acordeón exclusivo», muy útil para largas listas de FAQ), necesitarás un poco de JavaScript.

La idea es la siguiente: cuando un elemento <details> se abre, recorremos todos los demás elementos <details> de la misma sección y, si alguno está abierto, lo cerramos.

Aquí tienes un ejemplo de código JavaScript que puedes usar:

document.addEventListener('DOMContentLoaded', function () {
  // Seleccionamos todos los elementos <details> de la página.
  // Si tienes varios grupos de FAQs y solo quieres aplicar esto a uno específico,
  // deberás ser más selectivo con el selector, por ejemplo,
  // const faqDetails = document.querySelectorAll('.mi-seccion-faq details');
  const allDetails = document.querySelectorAll('details');

  allDetails.forEach(detailsEl => {
    // Escuchamos el evento 'toggle' que se dispara cuando el estado de <details> cambia.
    detailsEl.addEventListener('toggle', function (event) {
      // Si el <details> actual se ha abierto...
      if (detailsEl.open) {
        // ...recorremos todos los demás <details>.
        allDetails.forEach(otherDetailsEl => {
          // Si es un elemento <details> diferente al que se acaba de abrir
          // y está actualmente abierto...
          if (otherDetailsEl !== detailsEl && otherDetailsEl.open) {
            // ...lo cerramos.
            otherDetailsEl.removeAttribute('open');
          }
        });
      }
    });
  });
});
Lenguaje del código: PHP (php)

Explicación del código:

1. document.addEventListener('DOMContentLoaded', function () { ... });
   • Nos aseguramos de que el script se ejecute solo después de que todo el contenido HTML de la página se haya cargado y analizado por el navegador.
2. const allDetails = document.querySelectorAll('details');
   • Seleccionamos todos los elementos <details> presentes en el documento. Si quisieras que este comportamiento solo afecte a una sección específica de FAQ (y no a todos los <details> de tu web), deberías darle a esa sección un id o una clase contenedora y ajustar el selector. Por ejemplo, si tu FAQ está dentro de un div con la clase faq-container, usarías document.querySelectorAll('.faq-container details');.
3. allDetails.forEach(detailsEl => { ... });
   • Iteramos sobre cada uno de los elementos <details> encontrados.
4. detailsEl.addEventListener('toggle', function (event) { ... });
   • A cada elemento <details> le añadimos un «oyente» para el evento toggle. Este evento se dispara cada vez que el usuario hace clic en el <summary> para abrir o cerrar el <details>.
5. if (detailsEl.open) { ... }
   • Dentro del oyente, comprobamos si el <details> que disparó el evento se acaba de abrir (su atributo open es true).
6. allDetails.forEach(otherDetailsEl => { ... });
   • Si se abrió, volvemos a iterar sobre todos los elementos <details>.
7. if (otherDetailsEl !== detailsEl && otherDetailsEl.open) { ... }
   • Comprobamos que otherDetailsEl no sea el mismo elemento que se acaba de abrir (otherDetailsEl !== detailsEl) y que esté actualmente abierto (otherDetailsEl.open).
8. otherDetailsEl.removeAttribute('open');
   • Si ambas condiciones son ciertas, cerramos ese otro elemento <details> quitándole el atributo open.

Cómo añadir este JavaScript en WordPress

Tienes varias formas de añadir este código JavaScript a tu sitio WordPress:

1. Usando un bloque/módulo HTML (para una página específica):
   • Si solo necesitas esta funcionalidad en una página o entrada concreta donde tienes tu FAQ, puedes añadir un bloque «HTML personalizado» (en Gutenberg) o un módulo/widget de HTML (en tu maquetador visual) y pegar el código JavaScript envuelto en etiquetas <script>.
   • Coloca el bloque/módulo HTML al final de tu contenido de FAQ en esa página.
2. En el archivo JavaScript de tu tema (recomendado para todo el sitio):
   • Si usas un tema hijo (lo cual es una buena práctica), puedes añadir el código JavaScript (sin las etiquetas <script>) al archivo scripts.js (o similar) de tu tema hijo y asegurarte de que se está cargando correctamente (generalmente se hace desde el archivo functions.php de tu tema hijo).
   • Esta es la forma más limpia si quieres que la funcionalidad esté disponible en todo el sitio.
3. Mediante un plugin de inserción de código:
   • Existen plugins como «Insert Headers and Footers» o «Code Snippets» que te permiten añadir fragmentos de JavaScript (y CSS o PHP) a tu web sin tener que modificar directamente los archivos del tema.
     Puedes usar uno de estos plugins para insertar el código JavaScript (envuelto en etiquetas <script>) en el pie de página de tu sitio o solo en las páginas donde lo necesites.
   • Algunos maquetadores visuales también ofrecen opciones para insertar código JavaScript personalizado a nivel de página o global.

Recuerda probar bien la funcionalidad después de implementarla para asegurarte de que funciona como esperas y no interfiere con otros scripts de tu web.

Consejos prácticos para unas FAQ efectivas con <details> y <summary>

Usar el HTML correcto y mejorar la interacción es solo una parte. Aquí tienes algunos consejos para que tu sección de FAQ sea realmente útil:

• Escribe preguntas claras y concisas: Utiliza el lenguaje que usarían tus usuarios.
• Proporciona respuestas directas y útiles: Ve al grano, pero asegúrate de que la respuesta sea completa.
• Considera el atributo open: Si quieres que una pregunta específica esté desplegada por defecto cuando se carga la página, puedes añadir el atributo open a la etiqueta <details> correspondiente.
  Nota: si usas el script de acordeón exclusivo, solo el último <details> con el atributo open en el código HTML permanecerá abierto al cargar la página, o ninguno si el script se ejecuta de una forma que los cierra todos primero. Generalmente, el comportamiento de open por defecto es respetado hasta la primera interacción.
• Agrupa las preguntas por temas: Si tienes muchas FAQ, organízalas en categorías para facilitar la búsqueda. Puedes usar encabezados (H3, H4) para separar las categorías.
• Mantén el contenido actualizado: Revisa tus FAQ periódicamente para asegurarte de que la información sigue siendo relevante y precisa.

Optimización SEO para tus secciones de FAQ en WordPress

Como mencionamos, el contenido dentro de <details> es generalmente indexable. Para potenciar aún más el SEO de tus FAQ en WordPress:

• Usa palabras clave de forma natural: Integra las palabras clave relevantes (como «crear faq wordpress html», «html details summary wordpress», «preguntas frecuentes wordpress <details>», «acordeón html wordpress» o «faq semántico wordpress») tanto en las etiquetas <summary> (las preguntas) como en el contenido de las respuestas, siempre que suene natural y aporte valor.
• Contenido rastreable: Por defecto, este contenido es accesible para los rastreadores. No necesitas hacer nada especial, pero evita técnicas que puedan bloquear el rastreo de estas secciones.
• Datos estructurados (Schema Markup): Para un nivel más avanzado de optimización SEO, considera implementar el marcado de datos estructurados FAQPage.
  Esto puede ayudar a que tus FAQ aparezcan como resultados enriquecidos (rich results) en las páginas de resultados de búsqueda de Google (SERPs).
  Esto va más allá del simple HTML, pero es el siguiente paso lógico para maximizar la visibilidad.
  Existen plugins de SEO que te pueden ayudar con esto, o puedes implementarlo manualmente si te sientes cómodo con JSON-LD.
  Este tutorial se centra en la estructura con <details> y <summary>, pero es bueno conocer el siguiente nivel.

Demostración interactiva: Preguntas Frecuentes con <details>, estilo y acordeón exclusivo

Para que puedas ver todo en acción, incluyendo el comportamiento de «acordeón exclusivo» donde solo una pregunta está abierta a la vez, aquí tienes un bloque de código completo.

Puedes copiarlo y pegarlo en un bloque «HTML Personalizado» del editor de WordPress o en un widget de tu maquetador favorito:

<div class="faq-demo-container">
  <h3>Preguntas Frecuentes (Demostración Interactiva)</h3>

  <details>
    <summary><strong>Pregunta 1:</strong> ¿Cómo funciona este elemento desplegable?</summary>
    <p>Este es un elemento <code>&lt;details&gt;</code>. El texto que acabas de pulsar es un <code>&lt;summary&gt;</code>. Al hacer clic, se muestra el resto del contenido dentro de <code>&lt;details&gt;</code>.</p>
  </details>

  <details open>
    <summary><strong>Pregunta 2:</strong> ¿Por qué esta pregunta está abierta por defecto?</summary>
    <p>Porque la etiqueta <code>&lt;details&gt;</code> para esta sección incluye el atributo <code>open</code>. Así: <code>&lt;details open&gt;</code>. Es útil para destacar información, aunque con el script de "acordeón exclusivo", solo una permanecerá abierta a la vez tras la interacción.</p>
  </details>

  <details>
    <summary><strong>Pregunta 3:</strong> ¿Puedo añadir listas u otro HTML dentro?</summary>
    <div>
        <p>¡Por supuesto! Dentro de <code>&lt;details&gt;</code> (pero fuera de <code>&lt;summary&gt;</code>) puedes anidar más HTML:</p>
        <ul>
            <li>Como esta lista de ejemplo.</li>
            <li>Imágenes (<code>&lt;img&gt;</code>).</li>
            <li>Enlaces (<code>&lt;a&gt;</code>).</li>
            <li>Y cualquier otro elemento que necesites para tu respuesta.</li>
        </ul>
    </div>
  </details>

  <details>
    <summary><strong>Pregunta 4:</strong> ¿Qué hace que solo una pregunta esté abierta a la vez?</summary>
    <p>Eso se logra con un pequeño script de JavaScript que hemos incluido al final de este bloque de código. Escucha los eventos de apertura y cierra las demás preguntas automáticamente.</p>
  </details>

</div>

<style>
  .faq-demo-container {
    margin-bottom: 2em; /* Espacio después del contenedor de la demo */
  }
  .faq-demo-container summary {
    cursor: pointer;
    padding: 0.6em 0;
    font-size: 1.1em;
    transition: background-color 0.2s ease-in-out; /* Suave transición para hover */
  }
  .faq-demo-container summary:hover {
    background-color: #f9f9f9; /* Ligero fondo al pasar el ratón */
  }
  .faq-demo-container details {
    margin-bottom: 0.8em;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 0.8em;
  }
  .faq-demo-container details[open] summary {
    font-weight: bold;
    color: #333; /* Un color un poco más oscuro para la pregunta activa */
  }
  .faq-demo-container details div,
  .faq-demo-container details p {
    padding: 0.5em 1em 0.5em 0.8em;
    line-height: 1.6;
    color: #555; /* Color de texto para las respuestas */
  }
</style>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    // Seleccionamos solo los <details> dentro de nuestro contenedor de demostración
    const allDetailsInDemo = document.querySelectorAll('.faq-demo-container details');

    allDetailsInDemo.forEach(detailsEl => {
      detailsEl.addEventListener('toggle', function (event) {
        // Si el <details> actual se ha abierto...
        if (detailsEl.open) {
          // ...recorremos todos los demás <details> en esta demo.
          allDetailsInDemo.forEach(otherDetailsEl => {
            // Si es un elemento <details> diferente al que se acaba de abrir
            // y está actualmente abierto...
            if (otherDetailsEl !== detailsEl && otherDetailsEl.open) {
              // ...lo cerramos.
              otherDetailsEl.removeAttribute('open');
            }
          });
        }
      });
    });

    // Pequeño ajuste para el caso inicial con 'open'
    // Si hay un elemento con 'open' y el usuario abre otro, el que tenía 'open' se cerrará.
    // Si quieres que al cargar la página solo uno esté abierto si hay múltiples con 'open',
    // podrías añadir lógica aquí, pero el script actual maneja bien la interacción del usuario.
    // Por ejemplo, para asegurar que solo el primero con 'open' (si hay varios) permanezca abierto al inicio:
    let firstOpenFound = false;
    allDetailsInDemo.forEach(detailsEl => {
        if (detailsEl.hasAttribute('open')) {
            if (firstOpenFound) {
                detailsEl.removeAttribute('open');
            } else {
                firstOpenFound = true;
            }
        }
    });

  });
</script>
Lenguaje del código: PHP (php)

Este código de demostración incluye:

• Varias preguntas y respuestas de ejemplo.
• Una pregunta marcada inicialmente como abierta por defecto (con el atributo open).
• Contenido HTML variado dentro de las respuestas, como listas.
• Un bloque <style> con CSS básico para mejorar la apariencia (idealmente, este CSS lo integrarías en el personalizador de tu tema o en tu hoja de estilos principal).
• Un bloque <script> con el JavaScript necesario para la funcionalidad de acordeón exclusivo. Este script se asegura de que al abrir una pregunta, las demás se cierren automáticamente.
  He ajustado el selector de JavaScript (.faq-demo-container details) para que solo afecte a esta sección de demostración y no a otros posibles elementos <details> en tu página.
  Para una implementación en producción, es recomendable mover el JavaScript a un archivo .js de tu tema.

En resumen: potencia tus FAQ en WordPress con HTML moderno

Llegados a este punto, ya has visto lo sencillo y ventajoso que resulta crear FAQ en WordPress con HTML, utilizando las etiquetas semánticas <details> y <summary>.

Esta técnica no solo te permite estructurar tus preguntas frecuentes en WordPress con <details> de una forma limpia y accesible, sino que también contribuye positivamente a la experiencia de usuario y al rendimiento de tu web.

Hemos explorado cómo implementar tu acordeón HTML en WordPress tanto con el editor de bloques como con los maquetadores visuales más populares, cómo darle un toque personal con CSS y cómo, incluso, mejorar la interacción con un poco de JavaScript para un comportamiento de acordeón exclusivo.

Recuerda que cada uno de estos pasos está diseñado para que puedas ofrecer respuestas claras a tus usuarios y, al mismo tiempo, mejorar el SEO de tu FAQ en WordPress gracias a un contenido bien estructurado e indexable.

Adoptar un FAQ semántico en WordPress con <details> y <summary> es una apuesta inteligente. No solo estarás utilizando estándares web modernos, sino que también estarás construyendo una base sólida para que tus visitantes encuentren la información que necesitan rápidamente y para que los motores de búsqueda comprendan mejor el propósito de tu contenido.

Así que, ¿a qué esperas? Anímate a implementar estas secciones de preguntas y respuestas. Verás cómo, con un esfuerzo relativamente pequeño, puedes marcar una gran diferencia en la usabilidad y la optimización de tu sitio WordPress.

Y si necesitas ayuda, dame un toque.