Custom CSS für WordPress

Schluss mit dem CSS-Kuddelmuddel im Customizer

LSC Custom CSS bringt Ordnung, Geschwindigkeit und Sicherheit in Deine Styles:
  • Dateibasiert statt endloser Textblock: Echte Ordner, klare Pfade, pro Bereich (Header, Footer, Seite) eigene Dateien – genau dort, wo Du sie brauchst.
  • Finden statt scrollen: Tabs, Suche, Snippets, Revisionen. Du springst direkt zur Stelle und verlierst nie mehr den Überblick.
  • Sauber ausliefern: Nur aktive, zugeordnete Dateien werden geladen.
    Sortierung pro Bereich, kein Theme-Lock-in, updatesicher.
  • Live prüfen: Integrierte Vorschau mit Elementansicht. Änderungen testen, bevor sie live gehen.
  • Sicher & rollenbasiert: Capabilities, Nonces, Pfad-Schutz – Admin bleibt Herr der Rechte.
  • Importfähig: Hol Dir das „Zusätzliches CSS“ aus dem Customizer in eine saubere Datei, ohne das Original anzutasten.

Warum wir das gebaut haben?
Weil wir die gleichen Schmerzen hatten: ellenlange Customizer-Blöcke, keine Suche, wachsende Risiken bei jedem Hotfix.
Wir wollten ein CSS-System, das zu professioneller Wartung passt – transparent, strukturiert, schnell anpassbar.

Genau das liefert dir unser Custom CSS.

Features im Überblick

CSS Files via Explorer verwalten

  • Struktur statt Chaos: Klarer Baum nach Bereichen (global/header/footer/page/…), sofort sichtbar, wo welches CSS liegt.
  • Schneller Zugriff: Per Klick öffnen, per Suche filtern – kein Scrollen durch endlose Customizer-Blöcke.
  • Kontext-Aktionen am Ort: Neu, Umbenennen, Löschen, Sortieren direkt im Baum; keine extra Menüs nötig.
  • Drag-and-Drop-Sortierung: Reihenfolge pro Bereich in Sekunden angepasst, ohne Codezeilen zu verschieben.
  • Status auf einen Blick: Aktive Dateien als ●, inaktive als ◯ – sofort erkennbar, was wirklich lädt.
  • Bereichsspezifische Sicherheit: Nur .css, keine gefährlichen Pfade; alles bleibt im Arbeitsverzeichnis.
  • Team- und Wartungsfreundlich: Eindeutige Pfade, nachvollziehbare Struktur – ideal für mehrere Editor:innen.
  • Vorbereitung auf Deployments: Saubere Datei- und Bereichstrennung erleichtert Tests, Staging und Rollbacks.

Zuordnungen

  • Punktgenau steuern: typ:id pro Zeile (page:12, post:34, category:5, tag:7, custom_post_type:99).
  • Bereich ohne IDs = wirkt überall in diesem Bereich (z.B. alle Pages).
  • Modal-Suche: Finde Seiten/Posts/Taxonomien per AJAX, übernehme Auswahl ohne manuelles Tippen.
  • Mehrere Zuordnungen pro Datei möglich – ideal für thematisch verwandte Seiten.
  • Beste Praxis: wenige, klar benannte Dateien + gezielte Zuordnungen statt viele Duplikate.
  • Wechselbare Zuordnungen: Anpassen ohne Codeänderung, sofort wirksam nach Speichern.

Bereiche im Detail

  • Global: Deine Basis-Styles und Tokens – einmal definiert, überall konsistent.
  • Header: Above-the-Fold-Power – Navigation, Branding und kritische Layouts früh laden.
  • Footer: Ruhezone für rechtliche Links, Kontakt, Newsletter – spät laden, sauber getrennt.
  • Page/Post: Präzise Zielgruppen-Styles für einzelne Seiten/Beiträge ohne globales Rauschen.
  • Category/Tag: Themenwelten gestalten – ein Look pro Taxonomie, ohne den Rest anzufassen.
  • Custom Post Type: Maßgeschneiderte Layouts für spezielle Inhaltstypen.
  • Sortierung pro Bereich: Feinreihenfolge in 10er-Schritten, jederzeit erweiterbar.
  • Zuordnungen: Bereich + Objekt-IDs kombinieren – maximale Kontrolle bei minimaler Streuung.

Live-Vorschau

  • Zwei Modi: Seitenansicht (ganze Seite) und Elementansicht (isoliertes Element).
  • Vorschau-URL frei wählbar; Standard = Website-Adresse (oder eigener Default aus den Einstellungen).
  • „Element wählen“ startet den Picker im IFrame: Klick auf ein Element setzt den Selektor und schaltet automatisch auf Elementansicht.
  • „Selektor folgt Cursor“ liest den Selektor der aktuellen CSS-Regel im Editor; Overlay markiert das Ziel in der Seitenansicht, Elementansicht nutzt denselben Selektor.
  • Pseudo-Elemente (::before/::after) können nicht als eigener Knoten gerendert werden – Basis-Element wird gezeigt, Hinweis erscheint.
  • Skripte im Vorschau-IFrame werden entfernt, um Konsolenfehler zu vermeiden; dynamische Funktionen der Zielseite können deshalb fehlen.
  • „Vorschau neu laden“ lädt die URL neu; „Vorschau extern“ öffnet die aktuelle URL in neuem Tab.
  • CSS wird live injiziert (Debounce ca. 400 ms), ohne speichern zu müssen.

Import „Zusätzliches CSS“

  • Ein Klick statt Copy-Paste: Holt den Inhalt aus dem WP-Customizer-Feld „Zusätzliches CSS“ in eine eigene Datei.
  • Ziel-Datei: global/imported-additional-css.css (Status/Sortierung kannst du danach anpassen).
  • Das Original im Customizer bleibt unverändert – sicherer Migration-Pfad ohne Risiko.
  • Protokollierung über die Admin-Meldungen (Import erfolgreich / fehlgeschlagen).
  • Voraussetzung: Recht import in den Rollen-/Rechte-Einstellungen.
  • Best Practice: Nach dem Import prüfen, aufräumen, ggf. in thematische Dateien splitten (z.B. global/typography.css, global/layout.css).

Revisionen

  • Automatische Sicherung bei jedem Speichern – keine manuelle Aktion nötig.
  • Revisionen-Liste pro Datei: Zeitstempel und Benutzer jederzeit einsehbar.
  • Wiederherstellen mit einem Klick; beim Restore entsteht eine neue Revision (kein Datenverlust).
  • Ideal für Experimentieren: Änderungen testen, bei Bedarf sofort zurückspringen.
  • Empfehlung: Vor größeren Umbauten kurz speichern, damit ein klarer Wiederherstellungspunkt entsteht.
  • Hinweis: Diff-Anzeige ist im MVP einfach gehalten; verlass dich auf Zeitstempel/Benutzer und inhaltliche Prüfung.

Sortierung & Lade-Reihenfolge

  • Pro Datei ein Sortierwert: kleinere Zahl = früher geladen (empfohlen 10er-Schritte: 10, 20, 30).
  • Reihenfolge je Bereich: global vor header, vor footer, vor spezifischen Zuordnungen (page/post/category/tag/CPT).
  • Feine Overrides: Höhere Sortierwerte für spätere Überschreibungen innerhalb desselben Bereichs.
  • Klare Strategie: Basis in global niedrig halten, Bereich-spezifische Dateien etwas höher, punktuelle Fixes am höchsten.
  • Drag-and-Drop im Explorer unterstützt die Reihenfolgeverwaltung (Sortierwerte werden dabei angepasst).
  • Performance: Weniger, aber gut sortierte Dateien statt vieler unkoordinierter Fragmente – schnelleres Laden und weniger Konflikte.

Header- und Footer-CSS

  • Header: Für Above-the-Fold-Styles, Navigation, Branding und Sticky-Fixes. Pfadbeispiele: header/nav.css, header/critical-hero.css, Sortierung 10/20.
  • Footer: Für Spalten-Layout, rechtliche Links, Newsletter-Blöcke. Pfadbeispiele: footer/base.css, Sortierung 10/20.
  • Bereich setzen (header/footer), Status auf aktiv, Sortierung in 10er-Schritten.
  • Zuordnungen meist leer lassen, damit es siteweit wirkt; Spezialvarianten bei Bedarf mit Zuordnung (z.B. bestimmte Landingpages).
  • Vorschau: URL auf repräsentative Seite, Elementansicht auf .site-header bzw. .site-footer setzen.
  • Performance: Kritische Header-Styles klein halten; nicht-kritische oder selten genutzte Styles in den Footer auslagern.
  • Saubere Trennung: Keine globalen Overrides im Footer platzieren – Header/Global klar halten, Footer für späte Anpassungen nutzen.

Sicherheit

  • Nonces und Capabilities schützen alle Aktionen (Speichern, Löschen, Import, Vorschau).
  • Pfad- und Dateityp-Restriktion: nur .css, kein .., nur innerhalb des Arbeitsverzeichnisses /wp-content/uploads/lsc-custom-css/.
  • Upload-Verzeichnis wird bei Aktivierung angelegt; keine Schreibrechte → klare Fehlermeldung.
  • Rollenbasiert: Nur freigeschaltete Nutzer dürfen sehen/bearbeiten/löschen/importieren/Einstellungen ändern.
  • Skript-Entfernung in der Vorschau reduziert Drittanbieter-Fehler und Angriffsfläche.
  • Kein Theme-Lock-in: Styles bleiben erhalten, auch wenn Themes oder Page-Builder wechseln.
  • Empfehlung: Regelmäßig Revisionen prüfen und Backups erstellen, bevor größere Änderungen ausgerollt werden.

Einfach dein CSS auch in anderen Seiten verwenden

  • Einfache Auswahlmöglichkeit
  • Kein manuelles kopieren mehr
  • Einmal bauen, mehrfach nutzen: Ein Style-Set für ähnliche Seiten spart Schreibarbeit und Zeit.
  • Konsistente Markenwirkung: Einheitliches Styling über Landingpages, Blogposts und Kategorien hinweg.
  • Schnelle Rollouts: Änderungen zentral anpassen, sofort auf vielen Seiten wirksam.
  • Fehlerminimierung: Weniger Copy-Paste, weniger Tippfehler, weniger „vergessene“ Stellen.
  • Leanes CSS: Keine Dubletten pro Seite, geringere Dateigröße, schnellere Ladezeiten.
  • Bessere Wartbarkeit: Klare Zuordnungstabellen statt verstreuter Customizer-Schnipsel.
  • Testfreundlich: Auf einer Seite testen, auf mehreren sicher ausrollen.
  • Flexibel segmentieren: Spezielle Styles pro Bereich (Header/Footer/Category) ohne globalen Wildwuchs.
  • Zukunftssicher: Themes wechseln, CSS bleibt strukturiert und portierbar.
  • Team-ready: Klare Verantwortlichkeiten – ein Style-Paket, mehrere Seitenbetreiber profitieren.

Editor & Tabs

  • Monaco-Power im Backend: Syntax-Highlighting, Wordwrap, Multi-Cursor, Suchen/Ersetzen – wie im Code-Editor gewohnt.
  • Mehrere Dateien parallel: Tabs öffnen, per Klick wechseln, „+“ für neue Datei, Stern (*) zeigt ungespeicherte Änderungen.
  • Klare Metadaten daneben: Pfad, Bereich, Status, Sortierung und Zuordnungen direkt am Formular – kein Kontextwechsel nötig.
  • Snippets auf Abruf: Kommentar, Media Query, Flex, Grid, Button – ein Klick fügt sauberen Code ein.
  • Speichern wie gewohnt: Button oder Ctrl/Cmd + S, Warnung bei unsaved changes schützt vor Verlust.
  • Tab-Zustand pro Datei: Vorschau-URL und Selektor werden je Tab gemerkt – kein erneutes Eingeben beim Wechsel.

Einfache Installation

  • Lade das Plugin als ZIP hoch (Plugins > Installieren > Plugin hochladen) und aktiviere es – fertig.
  • Alternativ per FTP/SCP ins Verzeichnis /wp-content/plugins/lsc_custom_css/ kopieren und im Backend aktivieren.
  • Keine Theme-Abhängigkeit: Funktioniert themeunabhängig, bleibt bei Theme-Wechseln erhalten.
  • Das benötigte Arbeitsverzeichnis unter /wp-content/uploads/lsc-custom-css/ wird automatisch angelegt.
  • Updates unkompliziert: ZIP erneut hochladen/ersetzen, Einstellungen und Dateien bleiben bestehen.

Rollen & Rechte

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

  • Feingranular: Weise exakt zu, wer sehen, bearbeiten, löschen, importieren oder Einstellungen anpassen darf.
  • Admin bleibt Chef: Standardmäßig volle Kontrolle, andere Rollen nur mit bewusst gesetzten Caps.
  • Sicher arbeiten im Team: Reduziere versehentliche Änderungen, indem du Edit-/Delete-Rechte nur an Power-User gibst.
  • Compliance-freundlich: Trenne Zuständigkeiten (Redaktion vs. Technik), ohne zusätzliche Plugins.
  • Zukunftssicher: Rechte bleiben beim Theme-Wechsel erhalten und lassen sich jederzeit erweitern oder einschränken.

Allgemeine Einstellungen

  • Standard-Vorschau-URL festlegen: Sofort richtige Domain/Stage nutzen, weniger CORS/Mixed-Content-Stress.
  • Uninstall-Verhalten steuern: Wähle, ob Tabellen und/oder Upload-Verzeichnis beim Entfernen gelöscht werden.
  • Rechte zentral setzen: Caps je Rolle anpassen, ohne Code, ohne Zusatzplugin.
  • Sicherer Rahmen: Pfad- und Dateityp-Restriktionen bleiben aktiv, egal welche Einstellungen du änderst.
  • Update-resistent: Einstellungen bleiben bei Plugin-Updates erhalten – einmal konfigurieren, dauerhaft profitieren.

LSC Custom CSS – Ordnung ins Stylesheet. Schnell. Sauber. Sicher.

Jetzt Anfragen
Handbuch