WordPress: usa IA para crear bloques personalizados (ejemplo gratis de acordeón)

Quería un acordeón en mi sitio de WordPress. Cada plugin "gratis" que probé era una venta encubierta con su propia página de configuración. Así que hice que una IA me escribiera uno: 25 líneas, sin plugin, sin JavaScript, y puedes quedártelo.

Actualización, julio de 2026: este artículo estuvo guardado en borradores más de un año prometiendo "el código de abajo" sin ningún código abajo. Aquí está. Disculpas por eso.

Lo que obtienes

Esto es una demo en vivo. Es el código exacto de la siguiente sección, pegado en esta página de la misma manera que lo pegarías en WordPress (aquí solo se tradujo el texto al español). Haz clic en los paneles:

Se abre y se cierra sin nada de JavaScript porque el elemento <details> integrado en el navegador se encarga de plegarlo por nosotros. Todos los navegadores lo soportan desde hace años.

El código

<style>
.ll-acc { border: 1px solid rgba(128,128,128,.5); border-radius: 10px; overflow: hidden; }
.ll-acc details + details { border-top: 1px solid rgba(128,128,128,.5); }
.ll-acc summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; font-weight: 600; list-style: none; }
.ll-acc summary::-webkit-details-marker { display: none; }
.ll-acc summary::after { content: "+"; font-size: 1.3em; font-weight: 400; line-height: 1; }
.ll-acc details[open] > summary { background: rgba(128,128,128,.12); }
.ll-acc details[open] > summary::after { content: "–"; }
.ll-acc .ll-acc-body { padding: 12px 18px 16px; }
</style>

<div class="ll-acc">
  <details>
    <summary>Question one goes here</summary>
    <div class="ll-acc-body">Answer one goes here. Text, links, pictures, whatever you want.</div>
  </details>
  <details>
    <summary>Question two goes here</summary>
    <div class="ll-acc-body">Answer two. Add more panels by copying one whole details block.</div>
  </details>
  <details>
    <summary>Question three goes here</summary>
    <div class="ll-acc-body">Answer three. Delete panels the same way.</div>
  </details>
</div>

Cosas que probablemente querrás cambiar:

• Las palabras. Cambia las preguntas y respuestas de muestra directamente en el bloque. Las áreas de respuesta aceptan HTML normal, así que los enlaces y las imágenes funcionan.
• Cantidad de paneles. Copia un bloque <details>...</details> completo para añadir un panel; borra un bloque para quitar uno.
• Que empiece abierto. Cambia la etiqueta de apertura de un panel a <details open> y se cargará ya expandido.
• Colores. Los grises son deliberadamente neutros para que se vean bien tanto en temas claros como oscuros. Cambia los valores rgba(...) si quieres los colores de tu marca.

Ponlo en tu página

Estas instrucciones de instalación son las que la IA escribió cuando se las pedí (ve el prompt más abajo). Las seguí en una instalación estándar de WordPress y resultaron correctas, que es honestamente la parte que más dudaba.

1. Inicia sesión en WordPress y abre la página o publicación donde quieres el acordeón. Pulsa Editar.
2. Haz clic en el + donde debería ir el acordeón y busca el bloque llamado HTML personalizado.
3. Pega todo el fragmento en él, tanto la parte de <style> como la parte de <div>.
4. Haz clic en el interruptor de Vista previa del bloque (o la vista previa a nivel de página) para verlo renderizado en lugar del código en crudo.
5. Actualizar o Publicar. Ve a hacer clic en tus paneles nuevos en la página en vivo y siéntete satisfecho por el dinero de plugin que no gastaste.

El prompt que lo escribió

Un poco de contexto. No encontré ningún plugin de acordeón que fuera gratis y no fuera pesado con avisos, y me negué a pagar una suscripción por lo que básicamente son veinticinco líneas de HTML. Escribir esas líneas tú mismo es exactamente el tipo de tarea pequeña y autocontenida en la que la IA de verdad es buena. El flujo de trabajo:

Cualquier IA que escriba código sirve:

• Ejecuta una localmente (gratis, privada): yo usé mi propio DeepSeek 70B local. Si tu equipo tiene la potencia, aquí está mi guía de instalación: Ejecutar DeepSeek en local: guía de 4 pasos.
• O usa una gratuita en línea: el plan gratuito de ChatGPT resuelve este prompt sin quejarse.

Aquí está el prompt. La lista de requisitos es la parte importante; un vago "hazme un acordeón" te da como resultado un montón frágil de JavaScript.

Write me an accordion I can paste into a WordPress "Custom HTML" block.

Requirements:
- Plain HTML and CSS only. No JavaScript, no external files, no plugin.
- Use <details> and <summary> so the browser handles opening and closing.
- Scope every CSS rule under one class so it can't restyle the rest of my theme.
- Neutral colors that look fine on a light theme or a dark theme.
- Three panels with placeholder questions and answers.
- Keep it under 40 lines.

Then explain, step by step, exactly how I install it on a WordPress page.
Assume I have never edited HTML before.

(El prompt se deja en inglés, pero si traduces esta lista de requisitos al español y se la envías a la IA, funciona igual de bien.)

Ese último párrafo es el truco del título de este artículo: la misma IA que escribe el código también te escribirá el manual de instalación, al nivel de habilidad que le pidas. Si un paso te confunde, pégaselo de vuelta y dile "explica el paso 3 como si nunca hubiera visto HTML". Lo hará, con paciencia, las veces que haga falta. Solo con eso ya supera a la mayoría de la documentación de plugins.

Un hábito que vale la pena robar: antes de que el código se acerque siquiera a tu sitio real, pégalo en un archivo llamado test.html en tu escritorio y haz doble clic. Se abre en tu navegador, sin necesitar servidor. Haz clic en cada panel. Si algo falla, muéstraselo a la IA y dile qué está mal. Solo después de que se comporte bien pasa a WordPress. Ese es todo el laboratorio de pruebas, y así fue como verifiqué el bloque de arriba.

Trampas habituales

• Usa el bloque de HTML personalizado, no un bloque de párrafo. Pega código en un bloque de texto normal y WordPress lo escapa amablemente, así que los visitantes ven código en crudo en lugar de un acordeón.
• Tener dos acordeones en una misma página no es problema. El fragmento <style> se duplica, lo cual es feo pero inofensivo. Si te molesta, pon el CSS una sola vez en Apariencia → Personalizar → CSS adicional y pega solo la parte del <div> en tus bloques.
• Algunos temas dibujan su propia flecha en el summary. El fragmento oculta el marcador predeterminado de dos maneras, pero un tema testarudo puede seguir pintando su propio icono junto a mi símbolo +/–. Si ves duplicados, pídele a la IA: "mi tema añade su propia flecha a los elementos summary, ocúltala."
• ¿Quieres paneles de uno en uno? Añade name="faq" dentro de cada etiqueta <details>. Los navegadores actuales cerrarán automáticamente los demás paneles; los más antiguos lo ignoran y nada se rompe.
• No pegues a ciegas la salida de la IA en un sitio en vivo. La prueba con el archivo de prueba de arriba toma dos minutos. Pedir que no haya JavaScript también reduce lo que puede salir mal, que es la mitad de la razón por la que lo exigí.