Tutorial WordPress: Crear secciones de “Preguntas sobre WordPress” con acordeón CSS

Introducción

En este tutorial completo aprenderás a crear secciones tipo “Preguntas sobre WordPress” con un acordeón construido únicamente con HTML y CSS, apto para insertar en entradas o páginas de WordPress. Verás dos variantes: acordeón que permite abrir múltiples preguntas a la vez (checkbox) y acordeón que permite abrir solo una pregunta (radio). También incluimos un shortcode para añadir FAQs desde functions.php y consejos de accesibilidad y estilo para integrarlo con tu tema.

Qué lograremos

Un acordeón CSS puro, sin JavaScript.
Dos comportamientos: multiabierto (checkbox) y exclusivo (radio).
Cómo insertar el HTML en un bloque HTML personalizado de Gutenberg o en el editor clásico.
Un shortcode para gestionar FAQs desde functions.php.

Consideraciones previas

Importante: El HTML que verás en los ejemplos se puede pegar directamente en un bloque HTML personalizado en Gutenberg o en la pestaña Texto del editor clásico. El CSS lo puedes añadir en Apariencia → Personalizar → CSS Adicional (o en tu archivo style.css del tema hijo). Si vas a usar el shortcode, añade el PHP en functions.php de tu tema hijo o en un plugin de funcionalidades.

Método 1 — Acordeón CSS (múltiples abiertos, checkbox)

Este método usa inputs de tipo checkbox ocultos y labels para controlar la visualización del contenido mediante el selector :checked .content. Es compatible con CSS puro y es fácil de replicar.

HTML de ejemplo (pega en un bloque HTML):

ltdiv class=wp-faqgt
  ltdiv class=faq-itemgt
    ltinput type=checkbox id=faq1 /gt
    ltlabel for=faq1 class=faq-questiongt¿Qué es WordPress?lt/labelgt
    ltdiv class=faq-answergt
      ltpgtWordPress es un CMS (sistema de gestión de contenidos) usado para crear sitios web y blogs.lt/pgt
    lt/divgt
  lt/divgt

  ltdiv class=faq-itemgt
    ltinput type=checkbox id=faq2 /gt
    ltlabel for=faq2 class=faq-questiongt¿Es necesario programar para usarlo?lt/labelgt
    ltdiv class=faq-answergt
      ltpgtNo es obligatorio programar puedes usar temas y plugins. Sin embargo, conocimientos básicos ayudan a personalizarlo.lt/pgt
    lt/divgt
  lt/divgt
lt/divgt

CSS asociado (añádelo a CSS Adicional):

/ Contenedor base /
.wp-faq { max-width: 900px margin: 0 auto }

/ Oculta los inputs pero mantenlos accesibles /
.wp-faq input[type=checkbox] {
  position: absolute
  left: -9999px
}

/ Estilo de la pregunta (label) /
.faq-question {
  display: block
  background: #f7f7f7
  padding: 14px 16px
  cursor: pointer
  border: 1px solid #e3e3e3
  font-weight: 600
  transition: background .15s
  margin-bottom: 6px
}

/ Estado hover/focus para accesibilidad /
.faq-question:hover,
.faq-question:focus {
  background: #f0f0f0
}

/ Respuesta, por defecto oculta /
.faq-answer {
  max-height: 0
  overflow: hidden
  transition: max-height .35s ease
  padding: 0 16px
  border-left: 1px solid #e3e3e3
  border-right: 1px solid #e3e3e3
  border-bottom: 1px solid #e3e3e3
  background: #fff
  margin-bottom: 12px
}

/ Mostrar cuando el checkbox está marcado /
.wp-faq input[type=checkbox]:checked   .faq-question   .faq-answer {
  max-height: 800px / Suficiente para el contenido ajusta si hace falta /
  padding: 12px 16px
}

/ Opcional: icono (pseudo-elemento) /
.faq-question::after {
  content:  
  float: right
  transition: transform .2s
}
.wp-faq input[type=checkbox]:checked   .faq-question::after {
  content: -
}

Método 2 — Acordeón con una sola sección abierta (radio)

Si prefieres que solo haya una pregunta abierta a la vez, usa inputs de tipo radio con el mismo name. El comportamiento es casi idéntico, cambiando el tipo de input.

HTML para un solo abierto:

ltdiv class=wp-faq-singlegt
  ltdiv class=faq-itemgt
    ltinput type=radio name=faq-group id=faq-a1 /gt
    ltlabel for=faq-a1 class=faq-questiongtPregunta A1lt/labelgt
    ltdiv class=faq-answergtltpgtRespuesta A1.lt/pgtlt/divgt
  lt/divgt

  ltdiv class=faq-itemgt
    ltinput type=radio name=faq-group id=faq-a2 /gt
    ltlabel for=faq-a2 class=faq-questiongtPregunta A2lt/labelgt
    ltdiv class=faq-answergtltpgtRespuesta A2.lt/pgtlt/divgt
  lt/divgt
lt/divgt

El CSS puede ser el mismo que en la versión checkbox solo cambia los selectores si quieres diferenciar el estilo por clase (.wp-faq-single).

Shortcode para insertar FAQs fácilmente

Si prefieres no pegar HTML en cada entrada, puedes registrar dos shortcodes en functions.php: uno para agrupar y otro para cada item. Ejemplo sencillo (añádelo en functions.php de tu tema hijo):

/ Shortcodes: [faqs]...[/faqs] y [faq question=Título]Contenido[/faq] /

function faqs_shortcode_handler(atts, content = null) {
  return ltdiv class=wp-faqgt . do_shortcode(content) . lt/divgt
}
add_shortcode(faqs, faqs_shortcode_handler)

function faq_item_shortcode_handler(atts, content = null) {
  atts = shortcode_atts(array(question =gt Pregunta), atts, faq)
  static faq_id = 0
  faq_id  
  id = faq-s- . faq_id
  html  = ltdiv class=faq-itemgt
  html .= ltinput type=checkbox id= . esc_attr(id) .  /gt
  html .= ltlabel for= . esc_attr(id) .  class=faq-questiongt . esc_html(atts[question]) . lt/labelgt
  html .= ltdiv class=faq-answergt . do_shortcode(content) . lt/divgt
  html .= lt/divgt
  return html
}
add_shortcode(faq, faq_item_shortcode_handler)

Uso del shortcode en el editor (bloque de texto o editor de código):

[faqs]
[faq question=¿Qué es WordPress?]WordPress es un CMS.[/faq]
[faq question=¿Cómo instalo un plugin?]Desde el panel Plugins gt Añadir nuevo.[/faq]
[/faqs]

Integración y compatibilidad con el tema

Añade el CSS en Apariencia → Personalizar → CSS adicional para no tocar el theme principal.
Si tu tema tiene reglas que afecten labels o inputs, pon tus selectores con mayor especificidad o usa prefijos (.wp-faq .faq-question) para evitar conflictos.
Para animaciones más suaves y evitar jumps, usa max-height con una transición y un valor suficientemente grande otra opción es usar transform y height auto con JS si quieres precisión completa.

Accesibilidad y buenas prácticas

El método input label funciona con teclado (tab y espacio/enter sobre el label) y es respetuoso con muchos lectores de pantalla.
Si necesitas atributos ARIA dinámicos (aria-expanded), eso requiere JavaScript para actualizar el estado cuando cambia el input. Considera añadir un script sencillo si la accesibilidad requiere esos atributos.
Valida el HTML y revisa en móviles: asegúrate de que los elementos tengan suficiente contraste y tamaño táctil.

Comparativa rápida

Método	Ventajas	Inconvenientes
Checkbox (CSS)	Fácil, sin JS, permite múltiples elementos abiertos	Sin aria-expanded dinámico sin JS
Radio (CSS)	Solo uno abierto, UX conocida	Imposible cerrar todo (a menos que añadas un radio ninguno)
Shortcode (PHP)	Comodidad para editar desde el editor	Requiere tocar functions.php

Pruebas recomendadas antes de publicar

Prueba en móviles y escritorio (responsividad y tamaños táctiles).
Verifica que no haya conflictos con el CSS del tema (p. ej. margins y fuentes).
Comprueba la navegación con teclado (tabulación y activar con espacio/enter).
Si usas el shortcode, crea varias entradas de prueba para asegurar numeración única de IDs.

Resumen

Con una pequeña estructura HTML y estilos CSS puedes crear un acordeón para la sección “Preguntas sobre WordPress” adaptable a casi cualquier tema. Si prefieres gestionarlo desde el editor, el shortcode facilita la creación y mantenimiento. Para un sitio más accesible, valora añadir un pequeño JavaScript que actualice atributos ARIA cuando cambie el estado de los inputs.

SushiHost