Custom CSS Plugins im Test – wo und wie liefern sie dein CSS aus

Custom CSS Plugins- Testergebnisse
Custom CSS Plugins- Testergebnisse

Custom CSS Plugins sind beliebt. Sie ermöglichen dir das Aussehen deines Themes zu ändern ohne ein Child-Theme dafür zu erstellen. Die Auswahl an Plugins dafür ist groß und wird sicher immer größer. Ich nahm mir daher die Zeit und testete 11 Plugins die das ermöglichen.

Ich habe die Plugins auf Funktionalität geprüft und ob sie sichtbare php-Fehler liefern. Fand ich einen solchen Fehler oder auch nur eine php-Notiz informierte ich wie immer den Plugin Autor.

Meine Testdomain braucht nach diesem Testmarathon eine neue Datenbank. Custom fields und eine unendliche Zahl an Options Einträgen sind nun dort vorhanden, weil ich kein einziges Plugin fand, dass man auch wirklich deinistallieren und nicht nur deaktivieren kann.

Testkriterien waren

  • CSS per Theme
    Kannst du das CSS pro Theme speichern oder gilt es generell für alle Themes.
  • exportieren
    Kannst du das erstellte benutzerdefinierte CSS exportieren, also speichern und anderorts verwenden.
  • inline CSS
    Wird das CSS performt als inline-CSS im html-Header ausgeliefert oder als extra Datei, die einen zusätzlichen http-Request erzeugt.
  • im Customizer
    Kannst du deine Änderungen in einer Live-Vorschau also im Customizer sehen und nutzen?
  • Erweiterungen
    Kannst du mit dem Plugin mehr als nur CSS einfügen? Ist es auch für eine Multisite geeignet?

In einer Tabelle fasst ich alle Ergebnisse meiner 11-Tests kürzest zusammen: Testergebnis Tabelle

Folgende Custom CSS Plugins habe ich getestet:

Interessiert dich nur ein bestimmtes Plugin kannst du gleich dahin springen…


Screen vom AccessPress Plugin

AccessPress Custom CSS

AccessPress Custom CSS von Access Keys.

Wo kannst du dein CSS einfügen:
Dashboard ==> Einstellungen ==> AccessPress Custom CSS

Das CSS erscheint als letzte CSS Datei. Eingefügt wird es mit einer eigenen Datei und @import. Dies verlangsamt die Auslieferung, weil die zusätzliche CSS-Datei einen http-Request erzeugt.

Screen vom Custom CSS Freshface

Custom CSS von FRESHFACE

Custom CSS von FRESHFACE

Wo kannst du dein CSS einfügen:
Dashboard ==> Design ==> Custom Code

Exportieren und somit auch importieren kannst du unter:
Dashboard => Werkzeuge => Daten exportieren => exportieren => Custom Code.
Importieren unter Dashboard => Werkzeuge => Daten importieren

Screen der Einstellungen

Dieses Plugin bietet neben dem Einfügen von benutzerdefiniertem CSS auch das Einfügen von LESS, JS, Tracking Code und PHP. Und dies nach von dir bestimmbaren Regeln wo dies eingefügt werden sollte.

In der kostenfreien Version kannst du nur eine der vielen Möglichkeiten nutzen.

Wenn du dein Theme wechselst kannst du das CSS //deinen Code des einen Themes herunterladen und somit sichern und CSS/Code für das neue Theme speichern.

Screen Whole Site and Page and Posts

Custom CSS – Whole Site and Per Post

Custom CSS – Whole Site and Per Post von html5andblog und apritchard2751

Wo kannst du dein CSS einfügen:
Dashboard => Custom CSS und unter jedem Beitrag oder jeder Seite.

Dort kannst du auswählen, ob du deine externe CSS Datei als Link einfügen magst oder ob du die CSS Angaben in einen Editor schreibst und dann als inline CSS ausgibst. Letzteres garantiert eine schnellere Auslieferung.

Schreibst du CSS für einzelne Beiträge erscheint diese Angabe auch tatsächlich nur bei diesem Beitrag und sonst nirgendwo.

Das Plugin nutzt custom fields /benutzerdefinierte Felder für die Speicherung pro Beitrag /Seite.

In der Version 1.2 des Plugins erscheint beim Erstellen eines neuen Beitrages eine php-Notiz, diese habe ich den Plugin Autoren gemeldet.

Screen Customizer Custom CSS

Customizer Custom CSS

Customizer Custom CSS von Bijay Yadav

Wo kannst du dein CSS einfügen:
Dashboard => Design => Anpassen

Du siehst in der Live-Vorschau sofort, ob dein CSS greift und wie es dann aussieht. Benutzerdefiniertes CSS wird wirklich nur pro Theme gespeichert. Performte Ausgabe als inline CSS.

Screen Modular Custom CSS

Modular Custom CSS

Modular Custom CSS von Nick Halsey

Wo kannst du dein CSS einfügen:
Dashboard => Design => Anpassen

Live-Vorschau, weil du dein CSS im Customizer einfügen kannst und außerdem kannst du CSS pro Theme oder „gültig für alle Themes// Plugins“ angeben. Performte Ausgabe durch inline CSS.

Screen My custom styles

My Custom Styles

My Custom Styles von Arthur „Berserkr“ Gareginyan

Wo kannst du dein CSS einfügen:
Dashboard => Design => Custom Styles

Der zuerst einzeilige Editor erzeugt durch einen Klick auf die Entertaste weitere Zeilen und so kannst du bequemer dein CSS einfügen.

Das Plugin bietet was es verspricht in einfacher Form. Auslieferung als inline-CSS im HTML-Header.

Screenshot vom Royal CSS Plugin

Royal Custom CSS for Page and Post

Royal Custom CSS for Page and Post von royaltechbd

Wo kannst du dein CSS einfügen:
Wenn du einen Beitrag /Seite schreibst unterhalb des Textfeldes.

Das Plugin nutzt custom fields /benutzerdefinierte Felder für die Ausgabe.

Es bietet kein globales CSS an.
Deine pro Beitrag oder pro Seite gespeicherten CSS Angaben sind in jedem Theme sichtbar.

Simple CSS Screen

Simple CSS

Simple CSS von Tom Usborne

Wo kannst du dein CSS einfügen:
Dashboard => Design => Simple CSS und Dashboard => Design => Anpassen

Nutzt du den Customizer für das Gestalten via CSS kannst du deine Änderungne in der Live-Vorschau sehen.

Simple Custom CSS Screen

Simple Custom CSS

Simple Custom CSS von John Regan und Danny van Kooten

Wo kannst du dein CSS einfügen:
Dashboard => Design => Custom CSS

Diese Plugin ist auch multisite-fähig. Diese Möglichkeit habe ich nicht getestet.

Theme Junkie Custom CSS Screen

TJ Custom CSS

TJ Custom CSS von ThemeJunkie

Wo kannst du dein CSS einfügen:
Dashboard => Design => Custom CSS

Screen des WP Add Custom CSS Plugins

WP Add Custom CSS

WP Add Custom CSS von Daniele De Santis

Wo kannst du dein CSS einfügen:
Dashboard => ADD Custom CSS

Dein benutzerdefiniertes CSS wird als Link in den html-Header eingebunden. Dies ist ein zusätzlicher http-Request und daher verlangsamt dies deine Site.

In dieser Tabelle findest du den Link zum Plugin und meine Testergebnisse in kompakter Form wiederholt.

PluginCSS per Themeexportiereninline CSSim CustomizerErweiterungen
AccessPress Custom CSSneinneinneinneinnein
Custom CSSauswählbarjaauswählbarneinBezahlversion
Custom CSS – Whole Site and Per PostneinneinauswählbarneinCSS pro Beitrag oder Seite
Customizer Custom CSSjaneinjajanein
Modular Custom CSSja und generellneinjajanein
My Custom Stylesneinneinjaneinnein
Royal Custom CSS for Page and Postneinneinjaneinnein
Simple CSSneinneinjajanein
Simple Custom CSSneinneinjaneinMultisite
TJ Custom CSSneinneinjajanein
WP Add Custom CSSneinneinneinneinnein

Und nun bist du dran :-)

Nutzt auch du ein solches Plugin?
Wenn ja wieso, wenn nein wieso nicht?
Welches bevorzugst du?
Was magst ergänzen?

.. und nun freue ich mich über ein +1 :-)
4

4 Beiträge zu “Custom CSS Plugins im Test – wo und wie liefern sie dein CSS aus

  1. Kommentar Autor
    Bego Mario Garde
    Kommentar

    Schöne Zusammenstellung, Monika.

    Übrigens hat JetPack auch ein Modul, um eigene CSS-Regeln hinzuzufügen. Das Modul unterstützt die Syntax von LESS und SASS, Syntaxhighlighting und – auch schick! – Revisionen. Außerdem lässt sich das Modul im Developer Mode nutzen, wenn man sich nicht mit WordPress.com verbinden möchte.

  2. Kommentar Autor
    Monika
    Kommentar

    Danke @Frank für deine Ergänzung. Wird in meinem nächsten Schwung noch mitgetestet, denn ich warte noch, ob einige ihre Plugins fehlerfrei hinbekommen. :-)

    @Bego Mario
    Ja ich weiß, dass Jetpack sowas anbietet und finde es gut, dass du darauf hingewiesen hast.

    Ich selbst bin ein bisschen stur und promote es nicht, das machen die von wp.com schon gut genug …

  3. Kommentar Autor
    Frank
    Kommentar

    Gern, Hinweise und Beanstandungen nehme ich gern auf. Das Plugin wird aber nicht auf wp.org erscheinen, ich ersticker eh schon im Support und daher aktiv auf github nutzbar.