WordPress: KI benutzen, um eigene Blöcke zu bauen (kostenloses Akkordeon-Beispiel)

Ich wollte ein Akkordeon auf meiner WordPress-Seite. Jedes "kostenlose" Plugin, das ich ausprobiert habe, war ein Upsell mit eigener Einstellungsseite. Also habe ich eine KI eins schreiben lassen: 25 Zeilen, kein Plugin, kein JavaScript — und du kannst es haben.

Update, Juli 2026: Dieser Beitrag lag über ein Jahr im Entwurfsordner und versprach "den Code weiter unten", ohne dass da Code stand. Hier ist er. Tut mir leid deswegen.

Was am Ende dabei rauskommt

Das hier ist eine Live-Demo. Es ist genau der Code aus dem nächsten Abschnitt, auf dieselbe Art in diese Seite eingefügt, wie du ihn in WordPress einfügen würdest. Klick auf die Panels:

Es öffnet und schließt sich ohne jegliches JavaScript, weil das eingebaute <details>-Element des Browsers das Auf- und Zuklappen für uns übernimmt. Jeder Browser unterstützt das seit Jahren.

Der Code

<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>

Dinge, die du wahrscheinlich ändern willst:

• Die Texte. Tausche die Platzhalter-Fragen und -Antworten direkt im Block aus. Die Antwortbereiche akzeptieren normales HTML, also funktionieren Links und Bilder.
• Anzahl der Panels. Einen ganzen <details>...</details>-Block kopieren, um ein Panel hinzuzufügen; einen Block löschen, um eins zu entfernen.
• Von Anfang an geöffnet. Ändere das öffnende Tag eines Panels zu <details open>, dann lädt es aufgeklappt.
• Farben. Die Grautöne sind bewusst neutral gewählt, damit sie sowohl im hellen als auch im dunklen Theme gut aussehen. Tausche die rgba(...)-Werte aus, wenn du deine Markenfarben willst.

Auf deine Seite bringen

Diese Installationsanleitung hat die KI selbst geschrieben, als ich sie danach gefragt habe (Prompt weiter unten). Ich habe sie auf einer Standard-WordPress-Installation befolgt, und sie stimmte — was ehrlich gesagt der Teil war, an dem ich am meisten gezweifelt hatte.

1. Bei WordPress anmelden und die Seite oder den Beitrag öffnen, wo das Akkordeon hin soll. Bearbeiten anklicken.
2. Auf das + klicken, wo das Akkordeon stehen soll, und nach dem Block namens Eigenes HTML suchen.
3. Das ganze Snippet einfügen, sowohl den <style>-Teil als auch den <div>-Teil.
4. Auf den Vorschau-Umschalter des Blocks klicken (oder die Seiten-Vorschau), um zu sehen, wie es gerendert wird, statt rohen Code zu zeigen.
5. Aktualisieren oder Veröffentlichen. Auf der Live-Seite deine neuen Panels anklicken und sich über das gesparte Plugin-Geld freuen.

Der Prompt, der es geschrieben hat

Kurzer Hintergrund. Ich fand kein Akkordeon-Plugin, das gratis war und nicht nervte, und ich weigerte mich, ein Abo für im Grunde fünfundzwanzig Zeilen HTML zu bezahlen. Genau diese Art von kleiner, in sich geschlossener Aufgabe kann KI wirklich gut. Der Ablauf:

Jede KI, die Code schreiben kann, funktioniert:

• Eine lokal laufen lassen (kostenlos, privat): Ich habe mein eigenes lokales DeepSeek 70B verwendet. Wenn dein Rechner die nötige Leistung hat, hier meine Setup-Anleitung: DeepSeek lokal betreiben: eine 4-Schritte-Anleitung.
• Oder eine kostenlose Online-KI nutzen: Der kostenlose Tarif von ChatGPT bewältigt diesen Prompt klaglos.

Hier ist der Prompt. Die Liste der Anforderungen ist der wichtige Teil; ein vages "bau mir ein Akkordeon" bringt dir einen wackligen Haufen JavaScript ein.

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.

Der letzte Absatz ist der eigentliche Trick hinter dem Titel dieses Beitrags: Dieselbe KI, die den Code schreibt, schreibt auch die Installationsanleitung dazu, auf jedem gewünschten Kenntnisstand. Wenn dich ein Schritt verwirrt, füg ihn zurück ein und sag "erklär mir Schritt 3, als hätte ich noch nie HTML gesehen." Sie wird es tun, geduldig, so oft du willst. Das allein schlägt die meisten Plugin-Dokumentationen.

Eine Angewohnheit, die sich lohnt zu übernehmen: Bevor der Code auch nur in die Nähe deiner echten Seite kommt, füg ihn in eine Datei namens test.html auf deinem Desktop ein und doppelklick sie. Sie öffnet sich im Browser, ganz ohne Server. Klick jedes Panel an. Wenn etwas nicht stimmt, zeig es der KI und sag, was falsch ist. Erst wenn es funktioniert, geht es nach WordPress. Das ist das ganze Testlabor, und so habe ich auch das Akkordeon oben verifiziert.

Fallstricke

• Nutz den Block Eigenes HTML, nicht einen Absatz-Block. Fügst du Code in einen normalen Textblock ein, escaped WordPress ihn hilfsbereit, sodass Besucher rohen Code statt eines Akkordeons sehen.
• Zwei Akkordeons auf einer Seite sind kein Problem. Der <style>-Block wird dabei dupliziert, was hässlich, aber harmlos ist. Falls es dich stört, leg das CSS einmal unter Design → Anpassen → Zusätzliches CSS ab und füg in deine Blöcke nur noch den <div>-Teil ein.
• Manche Themes zeichnen ihren eigenen Summary-Pfeil. Das Snippet versteckt den Standard-Marker auf zwei Wegen, aber ein hartnäckiges Theme kann trotzdem sein eigenes Icon neben meinem +/–-Zeichen malen. Siehst du doppelte Pfeile, sag der KI: "mein Theme fügt summary-Elementen einen eigenen Pfeil hinzu, verstecke ihn."
• Willst du, dass immer nur ein Panel offen ist? Füg name="faq" in jedes <details>-Tag ein. Aktuelle Browser klappen die anderen Panels dann automatisch zu; ältere ignorieren es einfach, und nichts geht kaputt.
• KI-Output nicht blind auf eine Live-Seite einfügen. Der Test mit der Testdatei oben dauert zwei Minuten. Kein JavaScript zu verlangen verkleinert außerdem, was schiefgehen kann — das ist die Hälfte des Grundes, warum ich es zur Anforderung gemacht habe.