Seguro has visto en muchos sitios esas listas de preguntas que se abren al hacer clic. Para hacerlas, mucha gente instala un plugin de «acordeones» o de «FAQ». No hace falta: el editor de bloques trae desde hace tiempo el bloque Detalles.
Dónde está y cómo se usa
- En el editor, presiona
/y escribe detalles (o búscalo en el insertador de bloques). - Escribe en la primera línea el resumen: lo que siempre se ve (por ejemplo, la pregunta).
- Debajo, agrega el contenido que aparece al abrirlo. Puedes poner cualquier bloque: párrafos, listas, imágenes, código, incluso otros bloques Detalles.
En la barra lateral puedes marcar Abierto por defecto si quieres que algún bloque aparezca desplegado al cargar la página.
Las versiones más recientes de WordPress incorporan también un bloque de acordeón con más opciones de diseño. Si lo ves en tu insertador, sirve para lo mismo; el bloque Detalles sigue siendo la opción más simple y liviana.
Por qué es mejor que un plugin
El bloque Detalles usa las etiquetas HTML <details> y <summary>, que los navegadores entienden por sí solos. Eso significa:
- Cero JavaScript: no carga ningún archivo extra.
- Accesible: funciona con teclado y con lectores de pantalla sin hacer nada.
- Se puede buscar: en los navegadores modernos, si alguien busca con
Ctrl + Funa palabra que está dentro de un bloque cerrado, el bloque se abre solo. - Sin dependencia: si mañana cambias de tema o de plugins, sigue funcionando.
Ideas de uso
- Preguntas frecuentes de una tienda o un servicio.
- Soluciones paso a paso: el problema en el resumen y la solución dentro.
- Código largo: «Ver el código completo» en el resumen y el bloque de código dentro.
- Spoilers, respuestas de ejercicios o información secundaria.
¿Y el SEO del contenido oculto?
Google lee el contenido de los bloques cerrados y lo indexa. Al ser una forma estándar de mostrar información, no se considera «contenido oculto» en sentido negativo. Solo una advertencia: lo más importante de la página no debería estar escondido; ponlo a la vista.
Los datos estructurados de FAQPage ya no generan resultados enriquecidos en Google para la mayoría de los sitios. Usa el bloque Detalles porque es cómodo para tus visitantes, no esperando estrellas en los resultados.
Darle estilo
El estilo base depende del tema. Si quieres que se vea como una lista de preguntas con borde y flecha, agrega en Apariencia → Editor → Estilos → CSS adicional (temas de bloques) o en Apariencia → Personalizar → CSS adicional (temas clásicos):
.wp-block-details {
border: 1px solid #d0d7de;
border-radius: 8px;
padding: 12px 16px;
margin-bottom: 12px;
}
.wp-block-details summary {
cursor: pointer;
font-weight: 600;
list-style: none;
}
.wp-block-details summary::-webkit-details-marker {
display: none;
}
.wp-block-details summary::before {
content: "▸ ";
}
.wp-block-details[open] summary::before {
content: "▾ ";
}
.wp-block-details[open] summary {
margin-bottom: 8px;
}Un truco: que solo uno esté abierto a la vez
El HTML moderno permite que varios <details> con el mismo atributo name funcionen como un acordeón: al abrir uno, se cierran los demás. Si tu versión del bloque no ofrece esa opción, puedes conseguir el mismo efecto con un bloque HTML personalizado:
<details name="faq"><summary>¿Hacen envíos a regiones?</summary><p>Sí, a todo Chile.</p></details>
<details name="faq"><summary>¿Cuánto tarda el despacho?</summary><p>Entre 2 y 5 días hábiles.</p></details>¿Para qué usas el bloque Detalles en tu sitio? Comparte un ejemplo en el foro y sumemos ideas.
