WordPress Theme anpassen zusätzliches CSS und Browser Entwicklertools
WPC - Dein WordPress Blog

WordPress Theme anpassen Teil 2: Eigenes CSS & Browser Entwicklertools

Mit den Browser Entwicklertools und eigenem CSS (Custom CSS) kannst du jedes WordPress Theme nach deinen Wünschen anpassen.

Video Tutorial: WordPress Theme Customizer „Custom CSS“

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

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:

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:

WordPress Theme anpassen - Schritt 1: Elemente untersuchen mit Browser Entwicklertools
WordPress Theme anpassen – Schritt 1: Elemente untersuchen mit Browser Entwicklertools

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.

CSS Code in Browser Entwicklertools testen
CSS Code in Browser Entwicklertools testen

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.

WordPress Theme anpassen mit eigenem CSS in der Customizer Option "zusätzliches CSS"
WordPress Theme anpassen mit eigenem CSS in der Customizer Option „zusätzliches CSS“

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.

Eigenes CSS im Customizer funktioniert nicht - !important Deklaration verwenden
Eigenes CSS im Customizer funktioniert nicht – !important Deklaration verwenden

Die Rangfolge der Selektoren / CSS Anweisungen:

  1. !important Deklaration
  2. Inline Styles, d.h. direkt im HTML
  3. ID Selector wie z.B. #abschnitt
  4. Class Selector wie z. B. .modul
  5. 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.

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.

Artikel Empfehlung: WordPress Theme anpassen Teil 3: Eigene Shortcodes erstellen mit Plugin Post Snippets

ZUM ARTIKEL

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.

Vielen Dank fürs Teilen dieser Seite

4 Kommentare zu „WordPress Theme anpassen Teil 2: Eigenes CSS & Browser Entwicklertools“

  1. T

    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

    1. D

      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

  2. D

    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

    1. D

      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

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Table of Contents

QUIZ: Teste dein WordPress Wissen!

0%

Wann erschien die erste Version von WordPress?

Correct! Wrong!

Die erste Version von WordPress erschien am 27.03.2003. Damit ist WordPress älter als Facebook und Twitter.

Welches der genannten Optionen ist kein WordPress Page-Builder?

Correct! Wrong!

Gravity Forms ist eins der beliebtesten Premium Formular Plugins.

In welcher Datei befinden sich die Sicherheitsschlüssel?

Correct! Wrong!

In der wp-config.php Datei.

Wie werden WordPress Themes wie Genesis und Beans noch genannt?

Correct! Wrong!

Ein Theme Framework ist ein vorprogrammiertes Set an Funktionen und Features, um die (Child) Theme Entwicklung zu beschleunigen.

Um den Adminbereich aufzurufen, muss die eigene Domain wie folgt erweitert werden:

Correct! Wrong!

Um beispielsweise von der Domain https://wpconsultant.de den Adminbereich aufzurufen, muss die Domain wie folgt ergänzt werden: https://wpconsultant.de/wp-admin. Möglich ist auch die URL-Endung https://deine-domain.de/wp-login.php

Welche Dateien braucht ein WordPress Theme mindestens, um zu funktionieren?

Correct! Wrong!

Damit ein WordPress Theme richtig funktioniert, benötigt es mindestens 2 Dateien: index.php und style.css. Die index.php Datei ist das Standard Template für das Theme und im Header der style.css Datei werden die notwendigen Informationen über das Theme eingetragen wie z. B. Name, Autor etc.

Was ist kein typischer Anwendungsfall für eine WordPress Multisite?

Correct! Wrong!

Um eine Landing Page zu erstellen, benötigt man nicht die Multisite Installation. Dafür reicht entweder ein wenig HTML und CSS oder eins der vielen Landing Page Plugins. Mein Tipp: Mit dem kostenlosen Plugin Elementor kannst du professionelle Landing Pages schnell erstellen. Hier erfährst du mehr über WordPress Multisite - Anwendung & Installation.

Welche Sprache spricht die WordPress Software nicht?

Correct! Wrong!

Die WordPress Software basiert auf den Sprachen PHP und MySQL. 10% der Software besteht mittlerweile aus Javascript (Tendenz steigend).

Was ist kein typischer Anwendungsfall für ein Child-Theme?

Correct! Wrong!

Eine Kopie der gesamten Website erstellt man z. B. mit dem Plugin Duplicator. Die verschiedenen Anwendungsfälle eines Child Themes und die richtige Erstellung erfährst du in dem Artikel WordPress Child Theme erstellen 2020.

Was ist ein WordPress Loop?

Correct! Wrong!

Eine Funktion, die Daten aus der Datenbank holt und sie verändert, bevor sie im Browser angezeigt werden, nennt man in WordPress einen Filter bzw. einen Filter-Hook. Eine Aktion, die an einer bestimmten Stelle im Programmablauf ausgeführt wird nennt man Action oder Action-Hook. Ein Loop ist ein PHP Code, der vordefinierte Beiträge (oder Custom Post Types) aus der Datenbank holt, um sie auf speziellen Template Dateien innerhalb eines Themes anzuzeigen.

In welchen Ordner (Verzeichnis) werden Medien wie z. B. Bilder hochgeladen?

Correct! Wrong!

In der Regel besteht der uploads-Ordner aus den einzelnen Jahres-Ordnern, die wiederum aus mehreren Monats-Ordnern bestehen.

Welches Feature ist keine Empfehlung für das WordPress Hosting (gemäß wordpress.org)?

Correct! Wrong!

Auf wordpress.org unter Requirements findest du die Empfehlung für das WordPress Hosting. Hier auf WPC findest du auch meine Hosting Empfehlung für 2020.

Welche Einstellungen gehören nicht in die wp-config.php Datei?

Correct! Wrong!

Die Integration von Javascript- und CSS-Dateien in das jeweilige Theme erfolgt in der functions.php Datei und zwar mittels wp_enqueue_scripts bzw. wp_enqueue_style.

Welche Rolle gehört nicht zu den 6 Standard User-Rollen?

Correct! Wrong!

Die 6 User Rollen in WordPress sind: Super Admin, Administrator, Editor, Author, Contributor und Subscriber.

Was kann man unter dem Menüpunkt "Einstellungen" im Adminbereich nicht tun?

Correct! Wrong!

Website Daten exportieren erfolgt unter dem Menüpunkt "Werkzeuge".

WordPress Quiz
Kein Grund zur Sorge!

Schau doch öfters mal hier auf WPC vorbei und melde dich am besten gleich für unseren Newsletter an! Du kannst auch den WPC YouTube Kanal abonnieren mit vielen kostenlosen WordPress und Elementor Tutorials. Und falls es ein bisschen mehr sein darf, gibt es da noch den WordPress Kurs von WPC ;-)
Gar nicht so schlecht!

Du weißt schon einiges über WordPress! Um dein Wissen noch weiter auszubauen, empfehle ich dir die Beiträge hier auf WPC, meinen YouTube Kanal mit vielen kostenlosen WordPress und Elementor Tutorials und natürlich meinen WordPress Kurs von WPC :-)
Wow! Das kann sich sehen lassen!

Herzlichen Glückwunsch! Du bist auf dem besten Weg, ein WordPress Experte zu werden. Bleib am Ball, am besten mit den Beiträgen hier auf WPC, meinem YouTube Kanal mit vielen kostenlosen WordPress und Elementor Tutorials und natürlich meinem WordPress Kurs von WPC :-)
Hast du dich gerade ein wenig gelangweilt? :-)

Aber keine Sorge, bald erscheint hier auf WPC ein Quiz für Fortgeschrittene WordPress User. Am besten du meldest dich gleich für den Newsletter an, damit du es nicht verpasst! ;-) In der Zwischenzeit kannst du ja mal dein Datenschutz-Wissen mit dem DSGVO Quiz testen.

KURS: WordPress schneller lernen!

Related Posts

Ähnliche Beiträge