Video Tutorial: WordPress Theme Customizer „Custom CSS“
In diesem Video Tutorial oder der Schritt-für-Schritt Anleitung unten erfährst du, wie du jedes beliebige WordPress Theme ganz einfach selbst anpassen kannst, auch wenn die entsprechenden Optionen von dem Theme-Entwickler nicht vorgesehen wurden.
Willkommen zum zweiten Teil unserer Artikelreihe „WordPress Theme anpassen wie ein Profi“. Im ersten Teil der Serie hast du erfahren, wie du eine WordPress Seite mit den vom Theme Entwickler zur Verfügung gestellten Optionen individualisieren kannst. Doch manchmal reichen diese Optionen leider nicht aus. In so einem Fall kannst du mit Hilfe von Browser Entwicklertools und zusätzlichem CSS Code dein WordPress Theme weiter anpassen.
Inhaltsverzeichnis der Artikelserie:
- Teil 1 – Theme Optionen & Theme Customizer
- Teil 2 – Eigenes CSS und Browser Entwicklertools
- Teil 3 – Eigene Shortcodes erstellen mit Plugin Post Snippets
- Teil 4 – WordPress Child Theme erstellen mit Plugin
- Teil 5 – WordPress Template Dateien bearbeiten
- Teil 6 – WordPress Page Template erstellen
- Teil 7 – WordPress Hooks verstehen und anwenden
Um Design Änderungen an deiner WordPress Seite durchzuführen, die nicht durch die Theme Optionen vorgesehen waren, benötigst du nur ein wenig CSS Kenntnisse. Damit kannst du jedes Element auf deiner Website nach Belieben anpassen. Welches Element du bearbeiten musst, verraten dir die Browser Entwicklertools. Genau darüber handelt dieser Artikel: Mit den Developer Tools eines Browsers das richtige Element finden und über die Customizer Option „zusätzliches CSS“ ein paar Zeilen CSS Code eintragen, um die gewünschte Änderung umzusetzen.
Was sind Browser Entwicklertools?
Die Browser Entwicklertools sind Werkzeuge, die Webentwicklern helfen, Websites zu debuggen, d. h. Probleme auf einer Website zu beheben. Mit den Tools lassen sich z. B. die Performance bzw. die Ladezeiten einzelner Website Komponenten messen oder Javascript- und Auszeichnungsfehler aufdecken. Sie sind bei allen modernen Browsern wie Google Chrome, Firefox, Edge, Safari oder Opera bereits integriert. Bei manchen Browsern, wie z. B. bei Safari muss das „Entwickler“ Menü allerdings erst über Einstellungen > Erweitert aktiviert werden.
WordPress Theme anpassen mit eigenem CSS in 3 Schritten
1. Website Elemente untersuchen mit den Browser Entwicklertools
Zunächst muss man das richtige Element auf der Website, genauer gesagt den richtigen Selektor auswählen. Das geht am einfachsten, indem man mit der Maus über das Element fährt, welches bearbeitet werden soll, rechte Maustaste klickt und danach im Menü den Punkt „Inspect Element“ bzw. „Elemente untersuchen“ auswählt. Hier am Beispiel eines Buttons im Browser Firefox:
2. CSS Code gleich in den Browser Developer Tools testen – Button Farbe ändern
Man kann nun einfach bei den „CSS-Rules“ auf der rechten Seite der Entwicklertools die CSS Anweisungen testen. Wir bleiben bei dem Beispiel mit dem Button und wollen nun mit ein wenig CSS die Button Farbe ändern. Der Hintergrund soll schwarz und die Schrift weiß sein.
Der Vorteil dieser Methode ist, dass die Änderungen sofort sichtbar sind und man direkt überprüfen kann, ob die Anpassung auch den eigenen Vorstellungen entspricht.
Die Option „This Element“ in den Firefox Developer Tools wendet die CSS Anweisungen nur für das ausgewählte Element an, nicht jedoch für alle Elemente des selben Typs.
3. CSS Code kopieren und in die Option „zusätzliches CSS“ im Theme Customizer einsetzen
Nachdem du das richtige Element auf der Website identifiziert hast, den CSS Code getestet und überprüft hast, dass er das gewünschte Ergebnis liefert, kannst du den neuen CSS Code einfach kopieren und in die Option „zusätzliches CSS“ im Customizer einsetzen. Achte darauf, dass du den richtigen Selektor auswählst!
Diese Customizer Option hat den großen Vorteil, dass bei einem Theme Update deine Änderungen am Design nicht verloren gehen. Aufgrund der Übersichtlichkeit empfehle ich dir aber trotzdem, bei vielen Änderungen ein Child Theme anzulegen.
Möglicher Fehler: CSS Code funktioniert in den Browser Entwicklertools aber nicht im Customizer
In manchen Fällen kann es vorkommen, dass der zusätzliche CSS Quellcode zwar in den Browser Developer Tools funktioniert, jedoch nicht mehr, nachdem er kopiert und in den Customizer unter „zusätzliches CSS“ eingefügt wurde. Der Grund für dieses Problem ist höchstwahrscheinlich die „CSS Specificity“ – ich nehme an man kann das mit CSS Spezifizierung/Genauigkeit übersetzen. Gemeint ist damit, dass die CSS Anweisungen einer festgelegten Hierarchie folgen. Welche CSS Anweisung vom Browser interpretiert wird, ist zum einen von der Reihenfolge der Selektoren im Quellcode abhängig, aber auch wie spezifisch die CSS Anweisung formuliert ist. Weitere Information zu „CSS Specificity“ findest du in dem unten referenzierten Beitrag.
Als Lösung gibt es zwei Möglichkeiten:
1. Das Element genauer ansprechen / spezifizieren
Im oberen Beispiel haben wir bereits einen sehr genauen Selektor ausgewählt (.blog-entry.large-entry .blog-entry-readmore a). Hätte ich an dieser Stelle nur die Klasse „.blog-entry-readmore“ und den „a-Tag“-Selektor bzw. nur den „a-Tag“-Selektor verwendet, wäre der CSS-Code möglicherweise von einer anderen CSS Anweisung überschrieben worden oder hätte selbst anderen CSS Code überschrieben. Deshalb ist es wichtig, ein Element so genau wie möglich anzusprechen, allerdings auch nur soweit es sinnvoll ist.
2. Den Zusatz „!important“ verwenden
Falls der erste Lösungsvorschlag nicht geklappt hat, kannst du versuchen, hinter die CSS Anweisung ein „!important“ hinzuzufügen. Diese Option sollte jedoch so selten wie möglich verwendet werden.
Die Rangfolge der Selektoren / CSS Anweisungen:
- !important Deklaration
- Inline Styles, d.h. direkt im HTML
- ID Selector wie z.B. #abschnitt
- Class Selector wie z. B. .modul
- Tag Selector wie z. B. h1, ul, li etc.
Wie du der oberen Liste entnehmen kannst, übertrifft die „!important“ Deklaration alle anderen Selektoren. Da diese Deklaration nur sehr schwer wieder überschrieben werden kann, solltest du diese Anweisung nur in Ausnahmefällen verwenden.
„Zusätzliches CSS“ im Customizer wird nur auf das aktivierte Theme angewendet
Erwähnenswert ist noch, dass die Option „zusätzliches CSS“ im Customizer zwar eine Standard Funktion von WordPress ist, diese jedoch theme-spezifisch ist. Das heißt, solltest du das Theme wechseln, werden auch deine persönlichen CSS Styles bei dem neu-aktivierten Theme nicht mehr zur Verfügung stehen. Das macht durchaus Sinn, da sich die eigenen CSS Styles doch meistens auf das aktuell aktivierte Theme beziehen.
Es kann aber auch Fälle geben, bei denen man den eigenen CSS Code aus der Customizer Option auch für ein anderes Theme übernehmen möchte. Dies könnte beispielsweise bei einem Theme Framework der Fall sein. Auch für diesen Anwendungsfall empfehle ich dir ein Child Theme mit eigener style.css Datei zu verwenden.
Solltest du bereits ein neues Theme aktiviert haben und deinen alten CSS Code noch benötigen, bevor du die letzten beiden Absätze gelesen hast, kann ich dich beruhigen. Aktiviere einfach das alte Theme wieder und du findest deine CSS Styles immer noch in der Customizer Option.
CSS lernen – Hilfreiche Ressourcen
Wie du sehen kannst, benötigt man für diese Art von WordPress Theme Anpassung ein wenig CSS Kenntnisse. Der Einstieg ins CSS ist zwar sehr einfach, es kann aber auch sehr schnell sehr kompliziert werden. Mit den folgenden Quellen kannst du dir relativ einfach und kostenlos Grundkenntnisse in CSS aneignen und bestimmte Anweisungen schnell nachschlagen.
- CSS lernen auf css-lernen.net (Deutsch)
- CSS Wiki auf selfhtml (Deutsch)
- Interaktiv HTML und CSS lernen auf codecadamy (Englisch)
- CSS Workshop auf css4you.de (Deutsch)
- CSS Tricks auf css-tricks.com – Hier findest du auch einen guten Artikel über CSS Specificity (Englisch)
Darüber hinaus schadet es auch nicht, wenn man als WordPress User sich die WordPress CSS Coding Standards zumindest mal angesehen hat.
Ausblick auf Teil 3
Möchtest du bestimmte Styles immer wieder auf verschiedene Website Elemente anwenden oder wiederkehrende Inhalte wie z. B. Textbausteine, Buttons etc. auf deiner Seite verwenden? Dann wird es Zeit für den nächsten Teil unserer Artikelserie: Shortcodes erstellen und Inhalte wiederholt anwenden.
[stay id=“2124″]
Offene Fragen zu WordPress Theme anpassen mit eigenem CSS?
Hat dir dieser Artikel geholfen, dein WordPress Theme anzupassen? Oder sind noch Fragen unbeantwortet geblieben? Ich freue mich über deinen Kommentar.
4 Antworten
Hallo Daniel,
hier habe ich endlich einen ersten Ansatz gefunden, das WordPress-Theme so zu verändern, dass es meinen Vorstellungen entspricht. Den Eintrag für den Style habe ich im Developer-Tool von Firefox auch gefunden. Wie aber identifiziere ich den richtigen Selektor?
Danke im Voraus und viele Grüße
Dirk
Hallo Dirk,
in der Regel reicht es aus, wenn man den CSS Selektor kopiert, den man in den Browser Entwicklertools sieht (siehe Schritt 3 im Artikel). Da sich die CSS Anweisungen aber gerne mal auch überschreiben, ist manchmal ein wenig Trial & Error erforderlich, um den richtigen Selektor auszuwählen. Wenn es gar nicht anders geht, dann würde ich schon mit !important arbeiten.
Schöne Grüße, Danijel
Hi,
das ist ein super Tip mit der Entwicklerumgebung bei Firefox. Ich konnte so meine Webseite anpassen, wie ich es will, indem ich im linken Bereich den Code geändert habe! Allerdings hab ich keine Möglichkeit den Code zu speichern. Gibt es da eine Möglichkeit?
Danke
PS: Webseite ist noch offline
Hallo Tobias,
vielen dank für den Kommentar und das positive Feedback!
Die Entwicklerumgebung bei Firefox und bei anderen Browsern dienen nur dazu, Sachen auszuprobieren. Es gibt da keine Möglichkeit die Änderungen zu speichern. Sobald die Seite neu geladen wird, sind die Änderungen auch wieder weg. Die Änderungen musst du dann direkt auf deiner Website machen, z. B. im Customizer unter „Zusätzliches CSS“.
Schöne Grüße,
Danijel