Seit WordPress 4.7 gibt es direkt im WordPress-Customizer die Option, zusätzliches CSS einzufügen (unter Design/Customizer/Zusätzliches CSS). Diese Funktion bietet eine leichte Möglichkeit, das CSS des Themes oder eines Plugins zu überschreiben oder zu ergänzen.

Die passenden CSS-Styles zu finden, ist aber natürlich nicht immer ganz leicht. Daher möchte ich eine kleine Einführung zum Thema CSS-Anpassungen in WordPress geben, um es Einsteigern leichter zu machen, diese WordPress-Funktion zu verwenden.

1. Wann ist es sinnvoll, zusätzliches CSS zu nutzen?

Als erstes stellt sich natürlich die Frage, wann und warum sollte man eigenes CSS überhaupt einsetzen? Aus meiner Erfahrung würde ich sagen es lohnt sich, wenn man Kleinigkeiten anpassen möchte, die leicht mit CSS umsetzbar sind, aber nicht als standardmäßige Themefunktion in den Themeanpassungen angeboten werden.

Das könnten kleinere Farbanpassungen (z.B. von Hintergründen) sein. Auch das Verbergen von gewissen Elementen mit Hilfe von CSS (display: none) ist sehr beliebt, auch wenn es natürlich nicht unbedingt die aller eleganteste Option ist. Da man aber für Kleinigkeiten auch nicht gleich die Thema-Dateien selbst anpassen möchte, ist es auf alle Fälle eine Lösung.

Insgesamt solltest du darauf achten, es mit eigenem CSS nicht unnötig zu übertreiben. Wenn eine Anpassung vermeidbar ist, solltest du lieber bei der Standardlösung des Themes bleiben, um den CSS-Code möglichst sauber und unkompliziert zu halten.

2. Wie findet man das nötigte CSS für eine Anpassung

Wenn du das CSS an manchen Stellen doch anpassen möchtest, ist es am einfachsten die Browser-Funktion “Untersuchen” zu verwenden, um die richtigen CSS-Styles für deine Anpassung zu finden.

Wie im Bild demonstriert, musst du im Chrome- oder Firefox-Browser die rechte Maustaste klicken und dann den Menüpunkt “Untersuchen” (bzw. Elemente untersuchen im Firefox) auswählen. Im Safari-Browser nennt sich die Funktion “Element-Information”. Wenn du den Punkt im Safari-Browser nicht findest, musst du unter Safari/Einstellungen/Erweitert erst noch den Punkt “Menü Entwickler in der Menüleiste anzeigen” anwählen.

Jetzt kannst du die HTML Elemente im Untersuchen-Panel anklicken und du bekommst rechts im gleichen Fenster die CSS-Styles für jedes Element angezeigt.

Wenn CSS-Styles durchgestrichen sind, bedeutet das, das diese bereits vom Theme-eigenen CSS überschrieben sind. Das ist zum Beispiel der Fall, wenn ein Element auf mobilen Geräten anders Aussicht, wie auf größeren Bildschirmen. Oft ist das der Fall bei mehrspaltigen Elementen.

3. !important nutzen

Du musst also darauf achten, dass dein eigenes CSS das dominante CSS ist und nicht vom Theme-eigenen CSS überschrieben wird. Meist ist das leicht möglich, da das zusätzliche CSS von WordPress vor dem Stylesheet des Themes geladen wird. Es kann aber vorkommen, dass du die !important Funktion von CSS nutzen musst. Mit !important kannst du markieren, dass ein bestimmter Stil der wichtigste CSS-Stil ist und vor anderen Stil für das Element genutzt werden soll. Ein Bespiel ist:

.entry-tags {display: none !important;}

Es ist also wichtig, dass der Hinweis !important immer vor dem Strichpunkt und nach dem CSS-Befehl eingefügt wird. Wenn du einmal Probleme hast, deinen CSS-Befehl tatsächlich im Browser sichtbar zu machen, ist es immer eine gute Idee, es mit !important zu versuchen.

4. Das zusätzliche CSS im Customizer einfügen

Hast du das passende CSS für deine Anpassung gefunden, musst du dieses jetzt noch im WordPress-Customizer einfügen. Du kannst das CSS direkt aus dem Browser kopieren und einfügen, das kann aber oft ein bisschen schwierig sein und es kann leicht passieren, dass man unvollständiges CSS kopiert. Daher würde ich empfehlen, dass CSS erst noch einmal in einen übersichtlichen Text-Editor einzufügen. Mein Lieblingseditor ist der kostenlose, von GitHub entwickelte Atom Editor. So kannst du dein CSS noch einmal prüfen und sicher gehen, dass du auch keine Klammer oder andere Kleinigkeiten vergessen hast.

Jetzt kannst du dein zusätzliches CSS in das WordPress-Customizerfeld “Zusätzliches CSS” einfügen. Bevor du deine Anpassungen speicherst, kannst du in der Vorschauansicht prüfen, ob deine CSS-Stile auch übernommen werden.

Falls du mit anderen an einer Webseite zusammen arbeitest, kannst du mit der neuen Speichern-Option des Customizers (seit WordPress Version 4.9), deine Anpassungen auch erst einmal speichern statt sie gleich zu veröffentlichen. Du kannst deine Anpassungen dann über den von WordPress erstellten Vorschau-Link mit anderen teilen.

Alternativ kannst du deine zusätzliches CSS natürlich auch immer gleich veröffentlichen.

5. Ab wann ist ein Child Theme sinnvoller?

Insgesamt solltest du es mit eigenen CSS-Anpassungen im Customizer meiner Ansicht nach nicht übertreiben. Ab einem gewissen Punkt wird es einfach unübersichtlich und du findest dich in deinen eigenen Anpassungen nicht mehr zurecht. Wenn es also nicht unbedingt notwendig ist, würde ich persönlich immer lieber bei den Theme-eigenen Styles bleiben.

Wenn du wirklich viele CSS-Anpassungen benötigst oder du vielleicht auch noch andere Thema-Dateien anpassen möchtest (das ist wirklich nur zu empfehlen, wenn du dich etwas mit der WordPress Themeentwicklung auskennst), solltest du lieber ein Child-Theme für deine Anpassungen nutzen. Wir haben für unsere Elmastudio-Themes Starter Child-Themes vorbereitet, die du auf den Dokumentationsseiten unserer Themes herunterladen kannst.

Der folgende Blogbeitrag von den Netzialisten ist außerdem eine hilfreiche Informationsquelle: Anleitung Childtheme anlegen (Update)

Dein Feedback

Ich hoffe meine kleine Anleitung zum Thema eigene CSS-Anpassungen von WordPress-Themes ist hilfreich für dich. Hast du noch weitere Tipps, Tricks oder offene Fragen? Dann schreib mir doch einfach einen Kommentar zum Beitrag, ich freue mich schon von dir zu hören.