Custom CSS Handbuch

Stand: 2026-04-09  
Ansprache: Du  
Zielgruppe: Administrator:innen und Power-User, die CSS projektweit verwalten wollen.

1. Ăśbersicht & Anforderungen

  • Zweck: Dateibasierte Verwaltung von Frontend-CSS direkt im WP-Admin, inkl. Zuordnungen, Sortierung, Vorschau, Revisionen und Import.
  • Mindestanforderungen: WordPress 6.3+, PHP 8.0+, Schreibrechte auf /wp-content/uploads/.
  • Speicherort CSS-Dateien: /wp-content/uploads/lsc-custom-css/ (wird bei Aktivierung angelegt).

2. Manuelle Installation/Update

  1. Zip hochladen: Plugins > Installieren > Plugin hochladen, Datei lsc_custom_css.zip wählen, installieren, aktivieren.
  2. Alternativ per FTP/SCP: Inhalt nach /wp-content/plugins/lsc_custom_css/ kopieren, danach im Backend aktivieren.
  3. Update: wie oben, bestehendes Verzeichnis ĂĽberschreiben; Einstellungen/Dateien bleiben erhalten.
  4. Deinstallation: Im Plugin unter Einstellungen > LSC Custom CSS wählst Du, ob bei Deinstallation nur DB-Tabellen oder auch das Upload-Verzeichnis gelöscht werden.

3. Rollen & Rechte

Einstellbar unter `LSC Custom CSS > Einstellungen` (Capabilities je Rolle):

  • view: MenĂĽ sehen, Dateien laden.
  • edit: Dateien anlegen/bearbeiten/speichern, Zuordnungen ändern.
  • delete: Dateien löschen.
  • import: Customizer-CSS importieren.
  • snippets: Snippet-Management (kĂĽnftige CRUD/Import).
  • settings: diese Einstellungsseite aufrufen.
  • manage: setzt alle obigen Rechte (Legacy; Admin immer alles).

4. Allgemeine Einstellungen

  • Uninstall-Verhalten: Nichts löschen / nur Tabellen / Tabellen + Upload-Verzeichnis.
  • Standard-Vorschau-URL: Vorbelegung fĂĽr die Live-Vorschau. Standard = home_url('/') (Website-Adresse). Eigene URL nur setzen, wenn andere Domain/Stage nötig ist (CORS/Mixed Content beachten).

5. Admin-UI & Bedienung

5.1 Explorer (rechts)

  • Dateibaum nach Bereich (global/header/footer/page/post/category/tag/custom_post_type).
  • Aktionen: Neu, Aktualisieren, Seiten-CSS erstellen (legt Datei inkl. Zuordnung an), Filter/Suche.
  • Drag-and-Drop-Sortierung pro Bereich (Sortierwert je Datei).
  • Statusanzeige: â—Ź aktiv, â—Ż inaktiv.

5.2 Editor & Tabs (links)

  • Monaco-Editor (Syntax-Highlighting, Wordwrap, Suchen/Ersetzen, Mehrfachselektion).
  • Tabs: „+“ legt leere Datei an; Stern (*) = ungespeichert.
  • Felder: Pfad (.css), Bereich, Status (aktiv/inaktiv), Sortierung (Zahl, kleinere zuerst), Zuordnungen (Format typ:id, z.B. page:12).
  • Snippet-Palette: Kommentarblock, Media Query, Flex, Grid, Button – Klick fĂĽgt an Cursor ein.
  • Speichern: Button oder Ctrl/Cmd + S. Unsaved-Warnung beim Verlassen.
5.2.1 Bereiche im Detail (Header/Footer/Global/Page/Post)
  • global: wird immer geladen, höchste Basis-Priorität. Nutze fĂĽr site-weite Tokens/Reset/Utility-Klassen.
  • header: wird frĂĽh im <head> platziert. Ideal fĂĽr Above-the-Fold-Styles, Fonts, Layout-Fixes, die vor dem Rendern wirken sollen.
  • footer: wird spät (im Footer) geladen. Gut fĂĽr nicht-kritische Styles, progressive Enhancements oder späte Overrides.
  • page/post/category/tag/custom_post_type: nur auf zugeordneten Objekten. Kombination mit Zuordnungen (z.B. page:12, post:34).
  • Sortierung: innerhalb eines Bereichs bestimmt die Zahl die Reihenfolge (kleiner = frĂĽher). Empfohlen: 10er-Schritte (10, 20, 30), damit später Zwischenwerte möglich sind.

5.3 Zuordnungen

  • Textarea oder Zuordnungs-Modal (AJAX-Suche).
  • Ohne Eintrag gilt Datei fĂĽr den gesamten Bereich (z.B. alle Seiten bei page).
  • Mehrere Zeilen möglich, je eine Zuordnung pro Zeile.

5.4 Live-Vorschau

  • IFrame mit frei wählbarer URL (Standard siehe Einstellungen).
  • Ansicht wechseln: Seitenansicht (ganze Seite) / Elementansicht (isoliertes Element).
  • Element wählen: startet Picker im Seiten-IFrame; Klick auf ein Element setzt den Selektor und schaltet zur Elementansicht.
  • Selektor folgt Cursor: liest die CSS-Regel unter dem Editor-Cursor aus und setzt den Selektor (automatisch, aber kein Auto-Switch der Ansicht).
  • Overlay in Seitenansicht markiert das Ziel; Elementansicht zeigt nur das geklonte Element.
  • Pseudo-Elemente (::before/::after) können nicht als eigener Knoten gerendert werden – es wird das Basis-Element gezeigt, Hinweis erscheint.
  • Skripte im Vorschau-IFrame werden entfernt, um jQuery-/Plugin-Fehler zu vermeiden; dynamische Funktionen der Zielseite können fehlen.
  • „Vorschau neu laden“ lädt die URL neu; „Vorschau extern“ öffnet im neuen Tab.

5.5 Import „Zusätzliches CSS“

  • MenĂĽ: im Editor-Bereich Button „Zusätzliches CSS importieren“ (falls freigeschaltet).
  • Ergebnis: legt global/imported-additional-css.css an, Original bleibt im Customizer erhalten, protokolliert Nachricht.

5.6 Revisionen

  • Jede Speicherung erzeugt eine Revision.
  • Revisionen-Liste pro Datei mit Wiederherstellen.
  • Unterschied (Diff) ist im MVP schlicht, aber Wiederherstellung schreibt Inhalt zurĂĽck und erzeugt neue Revision.

5.7 Sortierung & Lade-Reihenfolge

  • Sortierung pro Datei (numerisch), kleinere Werte zuerst.
  • Reihenfolge je Bereich, Kombination mit Bereichslogik: z.B. global -> header -> footer -> page/{id}.

5.8 Header- und Footer-CSS konkret

1) Datei anlegen  
   – Pfadbeispiele: `header/nav-layout.css`, `header/critical-hero.css`, `footer/legal-links.css`.  
   – Bereich: `header` bzw. `footer`.  
   – Status: aktiv setzen, Sortierung ggf. 10/20/30.
2) Inhalt schreiben  
   – Header: Fokus auf Above-the-Fold, Navigation, Branding, Sticky-Header-Fixes.  
   – Footer: Spalten-Layout, rechtliche Links, Newsletter-Blöcke, nur dort benötigte Widgets.
3) Zuordnungen
   – Meist leer lassen, damit auf allen Seiten wirkt.  
   – Wenn nur bestimmte Seitentypen: alternative Dateien im gleichen Bereich mit Zuordnungen (`page:12` etc.) anlegen.
4) Vorschau
   – Vorschau-URL auf eine repräsentative Seite setzen.  
   – Elementansicht: passenden Header-/Footer-Knoten wählen (z.B. `.site-header`, `.site-footer`), nicht das Pseudo-Element.
5) Performance-Hinweis
   – Kritische Header-Styles in kleine, gezielte Dateien aufteilen; nicht-kritisches in `footer`.

5.8 Sicherheit

  • Nonces & Capabilities in allen Aktionen.
  • Pfadvalidierung: nur .css, kein .., nur innerhalb Arbeitsverzeichnis.
  • Upload-Verzeichnis wird bei Aktivierung angelegt (falls fehlend).

6. Typische Workflows

6.1 Neue Datei anlegen
  1. Explorer: „Neu“ oder Tab „+“.
  2. Pfad z.B. global/hero.css, Bereich wählen, Status auf aktiv.
  3. CSS schreiben, Zuordnungen optional setzen, speichern.
  4. Vorschau-URL prĂĽfen, Elementansicht zur Kontrolle nutzen.
6.2 Seitenbezogenes CSS
  1. „Seiten-CSS erstellen“ klicken, gewünschte Seite wählen.
  2. Datei wird erzeugt (page/{slug}-{id}.css) + Zuordnung gesetzt.
  3. Inhalt bearbeiten, speichern; Reihenfolge bei Bedarf anpassen.
6.3 Header-spezifisches CSS
  1. Neue Datei header/nav.css, Bereich header, Status aktiv, Sortierung 10.
  2. Navigation und Logo-Stile definieren, gern mit CSS-Variablen aus global.
  3. Vorschau-URL auf Seite mit Navigation, Elementansicht auf .site-header setzen.
  4. PrĂĽfen, ob Sticky/Breakpoint korrekt greifen; ggf. zweite Datei header/mobile.css mit Sortierung 20.
6.4 Footer-spezifisches CSS
  1. Neue Datei footer/base.css, Bereich footer, Status aktiv, Sortierung 10.
  2. Spalten-Layout, Farben, Abstände; Widgets/Legal-Links stylen.
  3. Vorschau-URL auf Seite mit Footer-Inhalt, Elementansicht auf .site-footer.
  4. Bei variierenden Footern (Landingpages) optional zweite Datei mit Zuordnung page:{id}.
6.5 globales CSS (fĂĽr alle Seiten)
  1. Datei anlegen
    • Im Explorer „Neu“ oder Tab „+“.
    • Pfad z.B. global/site.css (Endung .css).
    • Bereich: global, Status: aktiv, Sortierung: z.B. 10.
  2. CSS schreiben
    • Im Editor deine Regeln einfĂĽgen.
    • Snippets nutzen, falls sinnvoll.
  3. Speichern
    • Button oder Ctrl/Cmd + S.
    • Tab-Stern (*) verschwindet.
  4. Vorschau prĂĽfen
    • Vorschau-URL auf die Startseite (oder Staging-Domain) setzen.
    • In der Seitenansicht kontrollieren; bei Bedarf Elementansicht nutzen.
  5. Optional feintunen
    • Weitere globale Dateien mit höherer Sortierung (20/30) fĂĽr Overrides.
    • Wenn etwas nur fĂĽr bestimmte Seiten gelten soll, statt global einen passenden Bereich + Zuordnungen wählen.

Damit wird die Datei global/site.css bei jedem Aufruf geladen, bevor Bereich-spezifische oder zugeordnete Dateien greifen.
Für globales CSS brauchst du keine Zuordnungen – der Bereich global wirkt automatisch auf allen Seiten. Wenn du nichts siehst, prüfe bitte kurz:

1. Gespeichert? Nach dem Einfügen im Editor wirklich auf „Speichern“ klicken (oben die Status-Meldung „Gespeichert.“ sollte erscheinen).
2. Status aktiv + Bereich global: In der Tabelle muss Status = active, Bereich = global stehen. Sortierung ruhig auf 10 setzen (0 geht auch).
3. Datei existiert und enthält dein CSS: Auf dem Server unter wp-content/uploads/lsc-custom-css/global/site.css sollte die Datei liegen und deine Regeln enthalten.
4. Frontend-Ladevorgang prüfen: Im Browser DevTools → Network oder Sources nach „lsc-custom-css“ oder global/site.css filtern. Wird die Datei geladen?

Wenn ja, aber Styles greifen nicht: ggf. von Theme/Builder überstimmt → Selektorspezifität erhöhen oder mit DevTools prüfen, welche Regel gewinnt.
Wenn nein: Schreibrechte im Upload-Ordner prĂĽfen oder erneut speichern.
Cache leeren: Page-Cache/Opcode/Browser-Cache leeren, dann Frontend neu laden.
Richtige Domain: Frontend unter derselben Domain/Protokoll aufrufen, unter der das Plugin läuft (CORS/Mixed-Content vermeiden).

Zuordnungen musst du nur setzen, wenn das CSS nicht global gelten soll (z.B. nur bestimmte Seiten/Posts).

6.6 Bestehende CSS aus Customizer ĂĽbernehmen
  1. Import-Button „Zusätzliches CSS“ ausführen (Recht import nötig).
  2. PrĂĽfen: Datei global/imported-additional-css.css, Status und Sortierung anpassen.

7. Troubleshooting

  • Vorschau zeigt nichts / Fehler in Konsole: sicherstellen, dass Vorschau-URL gleiche Domain/Protokoll nutzt (CORS/Mixed Content); Scripts werden im Vorschau-IFrame entfernt, ggf. Seite ohne JS testen.
  • Selektor nicht gefunden: Pseudo-Elemente sind nicht klickbar; wähle das Basiselement oder klicke im Picker auf ein sichtbares Element.
  • Dateien erscheinen nicht im Baum: „Aktualisieren“ klicken; Tab allein legt keine Datei an – erst Speichern.

8. TastaturkĂĽrzel (Monaco-Editor)

  • Speichern: Ctrl/Cmd + S
  • Suchen: Ctrl/Cmd + F
  • Ersetzen: Ctrl/Cmd + H
  • Mehrfachcursor: Alt+Klick oder Ctrl/Cmd + Alt + Pfeile

9. Deinstallation

  1. In Einstellungen wählen, ob nur Tabellen oder auch Upload-Verzeichnis gelöscht werden sollen.
  2. Plugin unter Plugins deaktivieren und „Löschen“ wählen.
  3. Bei „Tabellen + Upload“ werden alle Daten entfernt; sonst bleiben Dateien/Metadaten bestehen.

10. Hinweise fĂĽr produktiven Einsatz

  • Bereiche und Zuordnungen sparsam halten, klare Namenskonventionen fĂĽr Pfade (global/, page/slug-id.css).
  • Sortierung konsistent verwenden (z.B. 10er-Schritte).
  • Revisionen regelmäßig prĂĽfen; vor größeren Ă„nderungen Revision notieren.
  • Vorschau-URL auf die Ziel-Domain/Staging setzen, um CORS-Probleme zu vermeiden.

11. Haftungsausschluss (Beta)

Das Plugin befindet sich in einer Beta-Phase.
Wir übernehmen keine Gewährleistung für Funktion, Verfügbarkeit oder Eignung für einen bestimmten Zweck.
Die Nutzung erfolgt auf eigene Verantwortung.
Vor produktivem Einsatz sind eigene Tests und Backups obligatorisch.
Eine Haftung für Datenverlust, Folgeschäden oder Ausfälle ist ausgeschlossen, soweit gesetzlich zulässig.
Vor dem Einsatz in Produktivumgebungen raten wir eindringlich ab.