WordPress CSS anpassen – wie geht das updatesicher?

von

am

|

geschätzte Lesezeit:

3 Minuten

Disclaimer: Dieser Beitrag ist älter als zwei Jahre. Es könnte also sein, dass auch sein Inhalt in Teilen bereits veraltet ist.

CSS oder Bettdecke, beide verändern das Aussehen
Nahezu CSS-artig, so eine Bettdecke

Auch alte WordPress Hasen haben irgendwann mal diesen Anfängerfehler gemacht: Nichts Böses ahnend, haben sie die CSS-Definitionen für Ihr WordPress Theme modifiziert. Lief alles wunderbar. Doch dann kam eines Tages ein Update für das Theme. Natürlich haben sie es installiert, das macht man so. Doch SCHWUPP! waren mit dem Theme Update alle CSS-Änderungen, die sie vorgenommen hatten, weg. Einfach verschwunden. Gar unwiderruflich, wenn es keine Sicherung gab. Nun, manche Dinge muss man einfach schmerzlich erfahren, um bestimmte Fehler nicht noch einmal zu machen. Und um zu lernen, wie man das mit dem WordPress CSS Anpassen richtig macht.

CSS-Kenntnisse erforderlich

Wer Änderungen am Aussehen der eigenen Website vornehmen möchte, und seien sie noch so klein, muss grundlegende CSS-Kenntnisse haben. Daran geht kein Weg vorbei. Sicherlich, einiges lässt sich mit Plugins regeln. Auf die Möglichkeit, so die Schriftarten anzupassen, sind wir schon einmal eingegangen. Soll es neben der Schriftart aber auch der Schriftfarbe an den Kragen gehen, ist es extrem hilfreich, wenn Sie wissen, wie Sie diese ansprechen und modifizieren können.

So sei Ihnen an dieser Stelle unser CSS-Grundlagen Kurs ans Herz gelegt. Vielleicht sind Sie aber auch ein/e Autodidakt/in, dann probieren Sie doch mal die Angebote von SELFHTML oder W3SCHOOLS aus.

Drei Möglichkeiten, Ihr WordPress CSS anzupassen

Sie würden gerne kleine Änderungen am Aussehen Ihrer WordPress Website vornehmen und haben zumindest rudimentäre CSS-Kenntnisse? Dann gibt es insgesamt drei mögliche Vorgehen:

  1. Ihr Theme sieht benutzerdefiniertes CSS vor. Gute Themes stellen diese Möglichkeit updatesicher zur Verfügung, sprich: Ihre Eingaben sind auch nach der Aktualisierung des Themes noch vorhanden.
    Allerdings: Die Updatesicherheit sollten Sie getestet haben, bevor Sie sich zu viel Arbeit machen und dann doch alles futsch ist. Vorsicht ist besser als… Sie wissen schon.
  2. Wenn Sie tatsächlich nur einige wenige CSS-Änderungen vornehmen wollen, die aber auf jeden Fall updatesicher sein sollen, installieren Sie das WordPress Plugin Simple Custom CSS.
  3. Profis erstellen sich ein sogenanntes Child-Theme, also eine eigene Version des installierten Themes, das die volle Funktionalität des dann sogenannten Parent-Themes nutzt, und bearbeiten dann die style.css. Wie das funktioniert, haben wir schon mal in unserem Blogbeitrag zu Child-Themes erklärt.
    Allerdings ist dieses Vorgehen für jemanden, der tatsächlich nur die Definitionen für eine Handvoll Elemente ändern möchte, eher überdimensioniert.

WordPress Plugin Simple Custom CSS

Simple Custom CSS ist eine gute Option für all jene, die nur ein paar Kleinigkeiten am Erscheinungsbild Ihrer Website ändern möchten. Nach der Installation sorgt das Plugin für einen weiteren Menüeintrag unter Design -> Benutzerdefiniertes CSS. Die Bearbeitungsseite zeigt tatsächlich nur ein sehr schlichtes Eingabefeld, in das Sie nun Ihre CSS-Definitionen eingeben:

WordPress Plugin Simple Custom CSS - Eingabefeld
WordPress Plugin Simple Custom CSS bietet updatesicheres WordPress CSS Anpassen

Ob Sie nun Elemente wie Absätze (p), Auflistungen (ul), Aufzählungen (ol), Listeneinträge (li) und Zitate (blockquote) einzeln (und gegebenenfalls auch unterschiedlich) definieren wollen oder wie im Beispiel für alle innerhalb eines Befehls dieselbe Schriftart (font-family) und Schriftfarbe (color) angeben, sei ganz Ihnen überlassen. Das Plugin hilft Ihnen jedenfalls nicht dabei, diese Befehle zu schreiben. Es stellt Ihnen nur die Funktion zur Verfügung, die von Ihnen hier gemachten Angaben updatesicher zu speichern und für die Darstellung im Frontend vorzuhalten.

Schritt für Schritt können Sie sich so vortasten und Ihr WordPress CSS anpassen. Überprüfen Sie dabei Ihre Definitionen immer wieder, indem Sie auf den Button Aktualisieren klicken und sich das Ergebnis im Frontend Ihrer Website anschauen. Sollte Ihnen nicht gefallen, was Sie dort zu sehen bekommen, so können Sie Ihre Angaben direkt wieder ändern oder ganz löschen. Ihrem Theme als solches (und damit Ihrer Website) können Sie so jedenfalls nicht dauerhaft schaden. Auch kann das Plugin natürlich keine Änderungen in den zugrunde liegenden PHP-Dateien vornehmen, dort also zum Beispiel keine neuen Klassen und IDs vergeben.

Element untersuchen – oder: PRÜFEN

Element untersuchen - oder Prüfen
Google Chrome nennt Element untersuchen neuerdings PRÜFEN

Um herauszufinden, wie das Element, das Sie modifizieren möchten, nun genau angesprochen werden möchte, bietet sich die Funktion Ihres Browsers Element untersuchen (die bei Google Chrome seit einiger Zeit allerdings PRÜFEN… heißt) an, unter anderem über die Funktionstaste 12 zu aktivieren.

Simple Custom CSS ist uns auf jeden Fall ein »gefällt uns!« wert.


Beitragsbild: Britta Kretschmer

Schreibe einen Kommentar

Die im Rahmen der Kommentare angegebenen Daten werden von mir dauerhaft gespeichert. Cookies speichere ich nicht. Für weitere Informationen siehe bitte meine Datenschutzerklärung.

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