WordPress: So binden Sie eigene CSS-Anweisungen ein

Individuelle Stylesheets in WordPress nutzen...

Werbung
Das Content Management System WordPress bietet viel Potenzial für ambitionierte Selbermacher. Wir zeigen Ihnen die besten Tipps, wie Sie die Funktionen von WordPress optimal nutzen können.
Das Content Management System WordPress bietet viel Potenzial für ambitionierte Selbermacher. Wir zeigen Ihnen die besten Tipps, wie Sie die Funktionen von WordPress optimal nutzen können.
☆ Dieser Artikel ist Teil unserer WordPress-Trickkiste – hier finden Sie Tipps, Tricks und Tutorials zum populären Content Management System WordPress… ☆

Bei CSS („Cascading Style Sheets“) handelt es sich um eine Stylesheet-Sprache, mit deren Hilfe Sie das Erscheinungsbild von Websites festlegen können. Zusammen mit HTML und JavaScript zählt sie zu den drei wichtigsten Kernsprachen des World Wide Web.

Verallgemeinernd gesagt ist CSS also so etwas wie ein riesengroßer Schminkkoffer der Webentwicklung – das Makeup für die digitalen Inhalte Ihrer Website. 🙂

WordPress und Cascading Style Sheets

Der größte Vorteil von CSS liegt in der Trennung von Layout und Inhalt. Insofern eignet sich CSS hervorragend für die Nutzung mit datenbankbasierenden Content Management Systemen wie WordPress.

Jedes WordPress-Theme bringt seine eigene Layoutdatei mit – oft schlicht style.css genannt.

Um Änderungen am Layout eines Themes vorzunehmen, genügt es, eigene CSS-Anweisungen einzufügen. Da bei der Abarbeitung von CSS die Reihenfolge ausschlaggebend ist, können auf diese Weise einfach vorhandene Einstellungen überschrieben und durch eigene ersetzt werden.

Das funktioniert, da WordPress bei der Generierung einer Webseite nutzereigenes CSS automatisch zum Schluss ausführt (genauer gesagt, nach den Style-Anweisungen des Themes).

CSS über den Customizer eingeben

Für ambitionierte Laien die einfachste Möglichkeit (sprich, ohne viel kaputtmachen zu können) besteht darin, den Customizer von WordPress zu nutzen:

Öffnen Sie das Menü „Design“ und klicken dann auf „Customizer“.

In der linken Sidebar befindet sich unten der Reiter „Zusätzliches CSS“. In diesem Bereich lassen sich über einen Quelltexteditor die gewünschten Ergänzungen direkt über den Webbrowser vornehmen.

Nützliche Funktionen des Webeditors im Customizer

  • Auto-Vervollständigung und Vorschlagsfunktion
  • Farbcodierte Syntaxhervorhebung
  • Fehlerprüfung (schützt unter anderem vor Vertippern)

CSS direkt im (Child-)Theme anpassen

Über das Admin-Frontend im Webbrowser

Im Menü „Design“ unter „Theme-Editor“ können die Dateien des aktiven Themes bearbeitet werden.

Hier geht es ähnlich komfortabel zu wie im Customizer. Sogar mit einer kleinen Verbesserung: Das Eingabefeld für den Editor ist layoutbedingt um einiges größer.

Zusätzlich haben Sie hier nicht nur Zugriff auf die themeeigene CSS-Datei, sondern auch auf alle anderen Dateien des Themes. Diese Methode eignet sich daher eher für erfahrene Nutzer, da das Risiko des versehentlichen Überschreibens essentieller Bestandteile des Layouts gegeben ist.

Wichtig: Ein späteres Update des Themes würde alle Anpassungen wieder zunichte machen. Sie sollten daher ein Child-Theme nutzen, wenn Sie Stylesheet-Änderungen auf diese Weise vornehmen möchten.

Direkt auf Shellebene

Eine weitere Alternative (für Nerds) besteht darin, die Dateien des Themes direkt auf Shellebene mit einem geeigneten Editor (z.B. pico oder vi unter Linux) zu bearbeiten.

Die Dateien befinden sich im Verzeichnis ./wp-content/themes/ Ihrer WordPress-Installation.

Tipps beim Programmieren mit CSS

Anpassungen des Stylesheets (egal ob über den Theme-Editor, den Customizer oder über die Kommandozeile) wirken sich umgehend auf das Erscheinungsbild der Website aus:

  • Führen Sie mehrere Änderungen immer nur nacheinander und etappenweise durch. Nach jedem Schritt das erwartete Resultat im Webbrowser prüfen.
  • Deaktivieren Sie vorhandene Cache-Plugins, da diese unter Umständen veraltete Daten aus dem Zwischenspeicher liefern und so die Darstellung verfälschen können.
  • Gleiches gilt für den Webbrowser: Prüfen Sie die Website falls möglich in einer separaten Browserinstanz oder im Inkognito-Modus (sofern verfügbar).

Viele Webbrowser bieten Add-Ons bzw. Plugins für Web-Entwickler an, mit deren Hilfe Sie unterschiedliche Endgeräte (Bildschirmgrößen) simulieren können, um responsive Layouts zu testen. Auch bei der Fehlersuche sind diese Tools sehr hilfreich.


Autor: Tobias Eichner | Datum der Veröffentlichung: April 2021
Wichtig: Bitte beachten Sie die Nutzungsbedingungen und rechtlichen Hinweise für diesen Beitrag!