Wer eine WordPress-Website verkaufsfähig aufbauen will, stößt schnell an die Grenzen des Editors. Standardthemes sehen nach einer frischen Installation aus: riesige weiße Leerflächen, generische Karten, Platzhalter-Button. Page-Builder wie Elementor lösen das Problem, kosten aber Performance und Abhängigkeiten. Es geht auch anders: Eine volle Premium-Website lässt sich ohne Page-Builder direkt über die REST-API bauen – mit gezielter CSS-Injection. Genau das haben wir kürzlich bei einer Demo-Website für einen SHK-Meisterbetrieb umgesetzt. In diesem Beitrag zeige ich, wie der Trick funktioniert und warum er stabiler ist als Browser-Automation.
Das Kernproblem: WordPress entfernt <style>-Tags
WordPress säubert jeden Inhalt, der über den Editor oder die REST-API ankommt, mit wp_kses_post. Diese Funktion filtert HTML auf eine erlaubte Whitelist und entfernt dabei unter anderem <style>-Blöcke und einen Großteil von Inline-CSS. Das ist aus Sicherheitsgründen sinnvoll, aber es macht es schwer, Inhalte individuell zu gestalten. Du kannst schlicht kein eigenes CSS in einen Beitrag oder eine Seite schreiben und erwarten, dass es erhalten bleibt.
Die Lösung ist ein kleiner, aber effektiver Workaround: Statt <style> direkt zu verwenden, packst du ein <script> in den Inhalt. Skript-Tags werden von wp_kses_post nicht entfernt. Das Skript erzeugt zur Laufzeit ein <style>-Element und hängt es an den <head> der Seite an. Das CSS lebt also im DOM, nicht im Seitenquelltext – und es funktioniert.
<script>
if(!document.getElementById('premium-css')){
var s = document.createElement('style');
s.id = 'premium-css';
s.textContent = `/* dein komplettes CSS hier */`;
document.head.appendChild(s);
}
</script>Der Guard if(!document.getElementById('premium-css')) verhindert, dass das Stylesheet mehrfach eingefügt wird, wenn mehrere Seiten das gleiche Setup verwenden. So bleibt das Design konsistent, ohne doppelte Regelwerke.
Warum REST-API statt Browser-Automation?
Es gibt zwei Wege, eine Premium-Seite zu bauen: über den Browser mit dem Block-Editor oder über die REST-API. Beide haben ihre Berechtigung, aber für komplexe, konsistente Designs gewinnt die REST-API.
Der Browser-Weg hat Nachteile
Browser-Automation wirkt auf den ersten Blick intuitiv, scheitert aber im Detail. Der Block-Editor rendert Inhalte asynchron, modale Dialoge blockieren die Steuerung, und das Ergebnis ist stark vom verwendeten Theme abhängig. Wer eine verkaufsfähige Website mit Hero-Sektion, Leistungskarten und Footer will, bekommt mit Gutenberg-blocks im Browser meist generische Ergebnisse – und verbrennt dabei viel Zeit mit Feintuning.
Die REST-API ist vorhersehbar
Über die REST-API postest du fertige HTML-Blöcke mit status: publish. Jeder Request ist deterministisch, du kannst Skripte schreiben, die ganze Seitenstrukturen aufbauen, und du hast volle Kontrolle über das Markup. Das ist ideal für Kundenprojekte, bei denen dieselbe Layout-Logik mehrmals wiederverwendet wird.
import urllib.request, json, base64
creds = base64.b64encode(b"user:app_password").decode()
headers = {
"Authorization": f"Basic {creds}",
"Content-Type": "application/json"
}
# CSS für JS-Template-Literal escapen
css_raw = open("design.css").read()
css_escaped = css_raw.replace("\\", "\\\\").replace("`", "\\`").replace("${", "\\${")
inject = f"""<script>
if(!document.getElementById('premium-css')){{
var s=document.createElement('style');
s.id='premium-css';
s.textContent=`{css_escaped}`;
document.head.appendChild(s);
}}
</script>"""
body = "<!-- wp:html -->" + open("seite.html").read() + "<!-- /wp:html -->"
content = inject + body
data = json.dumps({
"title": "Leistungen",
"slug": "leistungen",
"content": content,
"status": "publish"
}).encode()
req = urllib.request.Request(
"https://deine-domain.de/wp-json/wp/v2/pages",
data=data, headers=headers, method="POST"
)
print(json.loads(urllib.request.urlopen(req).read())["id"])Die CSS-Injection im Detail
Der wichtigste Schritt ist das korrekte Escaping des CSS. Da das Stylesheet in einem JavaScript-Template-Literal landet, musst du drei Zeichen neutralisieren: Backslash, Backtick und die Interpolation ${. Wer das überspringt, bekommt einen Syntaxfehler im Skript und das Design bricht komplett zusammen.
| Zeichen | Ersetzen durch | Grund |
|---|---|---|
\ | \\ | Backslash beginnt in JS einen Escape |
` | \` | Backtick beendet das Template-Literal |
${ | \${ | Wäre sonst JS-Interpolation |
Neben der CSS-Injection solltest du die WordPress-Standardelemente ausblenden, die das Premium-Design stören. Der Seitentitel, der Footer des Themes und die Standard-Padding-Werte des Inhaltsbereichs werden per CSS deaktiviert, damit ausschließlich dein eigenes Layout sichtbar ist.
.entry-header .entry-title { display: none !important; }
.site-footer { display: none !important; }
.site-content { padding: 0 !important; max-width: 100% !important; }Praxis: Ein Premium-Handwerker-Layout
In unserem Projekt haben wir mit dieser Technik eine komplette SHK-Meisterbetrieb-Website aufgebaut: Startseite, Leistungen, Über uns, Kontakt, Impressum und Datenschutz. Das Design folgte einer klaren Systematik, die sich leicht auf andere Handwerks-Branchen übertragen lässt.
Farbpalette und Typografie
Für Sanitär, Heizung und Klima haben wir Teal/Cyan (#0a7e8c) für Wasser und Wärme verwendet, kombiniert mit warmem Orange (#e8731a) für Call-to-Action-Buttons. Diese Farben vermitteln Vertrauen und Professionalität. Die Navigationsleiste bekam einen dunklen Hintergrund (dunkles Blau mit weißem Text), die Typografie nutzt die System-Font-Stack mit clamp() für responsive Schriftgrößen.
Hero-Sektion und Karten
Die Startseite startete mit einem Full-Width-Hero-Banner (mindestens 85vh hoch) inklusive Statistik-Badges und zwei Call-to-Action-Buttons. Darunter folgten Leistungskarten als weiße Elemente mit weichen Schatten, abgerundeten Ecken und einem Hover-Effekt. Jede Sektion bekam hintersetzte Farben, damit keine weißen Löcher entstehen – das ist ein häufiges Problem bei Standard-WordPress-Seiten.
Warum diese Methode für Kundenprojekte ideal ist
Der größte Vorteil der CSS-Injection-Methode ist die Wiederverwendbarkeit. Einmal aufgebaut, lässt sich das Design durch Austausch von Text, Bildern und Farben auf jeden Handwerksbetrieb übertragen: SHK, Elektro, Maler, Dachdecker. Die Struktur bleibt, der Inhalt wird ausgetauscht. Das beschleunigt Demo-Erstellung und macht sie skalierbar.
Zudem bleibt die Website leichtgewichtig. Kein Page-Builder, keine zusätzlichen Plugin-Abhängigkeiten, keine aufgeblähten Shortcodes. Das schlägt sich direkt in der Ladezeit nieder – ein Faktor, den Google und Kunden gleichermaßen gewichten.
Mögliche Stolperfallen
Theme-Klassen unterscheiden sich
Block-Themes wie Twenty Twenty-Five verwenden andere CSS-Klassen als klassische Themes wie Astra. Während bei Astra die Klassen .entry-header und .ast-container greifen, musst du bei Block-Themes auf .wp-site-blocks, das header-Element und .wp-block-post-title ausweichen. Vor dem Bauen solltest du also immer prüfen, welches Theme aktiv ist.
Niemals read-modify-write
Eine weitere Falle: Die REST-API liefert bei Seiten oft nur content.rendered zurück, nicht den Roh-Inhalt. Wer bestehende Seiten auslesen und verändern will, erzeugt dabei schnell leeren Content. Die zuverlässige Strategie ist, Seiten immer von Grund auf neu aufzubauen statt sie zu modifizieren.
Fazit
Premium-WordPress-Websites brauchen keinen Page-Builder. Mit der REST-API und einem kleinen CSS-Injection-Trick lassen sich verkaufsfähige, leichte und konsistente Websites bauen, die sich für Kundenprojekte beliebig wiederverwenden lassen. Die Technik erfordert Grundwissen in HTML und CSS, zahlt sich aber durch Vorhersehbarkeit und Geschwindigkeit aus.
Weiterlesen
Wenn dich Automatisierung und technische Workflows interessieren, schau dir auch diese Beiträge an:
MCP Server selbst bauen: KI-Agenten automatisieren deinen Homelab
Homelab-Automatisierung mit Hermes Agent: WordPress-Posts autonom erstellen
Homelab & IT Learnings: Was wirklich funktioniert hat