CSS: Customizer oder Style­sheet?

Wer sich mit der Gestaltung von HTML-Co­de auf Internetseiten beschäftigt hat, ist sicher längst auf den Begriff CSS gestoßen. Das Akronym steht für Cascading Style Sheets. CSS ist eine Lay­out-Spra­che zur Steuerung der Webseitengestaltung und neben HTML und JavaScript eine der Kernsprachen des World Wide Webs. Sie entstand wegen einer gewünschten Trennung von Inhalt und Gestaltung Ende der Neunzigerjahre. Die Inhalte, die im HTML-Co­de vorliegen, werden durch Gestaltungsanweisungen dargestellt, die als CSS-Stil­de­fi­ni­tio­nen Darstellungshinweise an den Internetbrowser geben.

In einigen meiner Beiträge in diesem Kompendium ist die Rede von CSS-Co­de, der in CSS-Da­tei­en eingetippt oder im Word­Press-Me­nü unter Design > Customizer > Zusätzliches CSS eingetragen werden soll. Man könnte nun die Frage stellen, was besser ist und ob es überhaupt einen Unterschied macht, ob man CSS per Customizer oder per Stylesheet in einer CSS-Da­tei auf seiner Website unterbringt.

CSS per Customizer

Der gesamte CSS-Co­de, den Du per Customizer eingibst, wird auf allen HTML-Sei­ten Deines Auftritts direkt im Kopfbereich eingebunden. Er steht dort zwischen den Tags <style id="wp-custom-css"> und </style>. Du und auch alle Besucher Deiner Webseiten könnt Euch diesen Code direkt ansehen, wenn Ihr mit der rechten Maustaste auf eine leere Stelle der angezeigten Seite klickt und dann Seitenquelltext anzeigen auswählt.

Diese unmittelbare Öffentlichkeit des Codes hat Vor- und Nachteile. Zum einen kannst Du befreundete Gestalter bitten, einmal rasch nachzusehen, was Du falsch machst, wenn es Darstellungsprobleme gibt. Zum anderen gibst Du dadurch all Deine Tricks und Kniffe sofort und ohne Umwege an alle Interessierten weiter. Du musst selbst entscheiden, ob Du das willst.

Auch bestehen dabei zwei technische Einschränkungen:

• Der CSS-Code ist für alle Webseiten Deiner Internetpräsenz stets gleich. Du kannst keine unterschiedlichen Gestaltungsanweisungen für verschiedene Seiten angeben.
• Du kannst per Customizer tatsächlich nur reinen CSS-Code eingeben. Es ist nicht möglich, hier Gestaltungscode dynamisch erzeugen zu lassen. (Was das bedeutet, verstehst Du, sobald Du die Alternative der Style­sheet-Da­tei gelesen hast.)

CSS per Stylesheet-Dateien

Auf Deiner Internetpräsenz gibt es mehrere CSS-Da­tei­en, die Theme-ab­hän­gig von Deinen Seiten eingebunden werden. Die beiden wichtigsten sind die Datei style.css Deines Originalthemes sowie eine zweite Datei style.css, die Du über ein Child-The­me anlegst. Was ein Child-The­me ist und wie man es einrichtet, habe ich in einem separaten Beitrag beschrieben.

Hinzu kommen weitere CSS-Da­tei­en, die zum Beispiel von Plugins angelegt werden. Oder die Du selbst manuell hinzufügst, wie ich es etwa im Beitrag über zusätzliche Social-Media-Menüsymbole erklärt habe.

Die beiden Dateien style.css werden ohne weiteres Zutun automatisch in Deine Webseiten eingebunden. Alles, was Du in diese Dateien eintippst, gilt also für alle Deine Webseiten. (Allerdings empfehle ich, keinesfalls die style.css Deines Originalthemes zu verändern! Denn erstens kann sie bei Updates des Themes überschrieben werden. Und zweitens zerschießt Du Deine Webseiten, sobald Du dort fehlerhaften Code eingibst. Keine gute Idee also.)

Zusätzliche CSS-Da­tei­en musst Du immer im Headerbereich Deiner Webseiten einbinden. Dazu benötigst Du die Datei mit dem Namen header.php. Diese Datei musst Du vom Webserver herunterladen, anpassen und wieder hochladen.

Mit einem FTP-Pro­gramm verbindest Du Dich mit dem Webserver, auf dem Deine Word­­Press-In­stal­la­tion gespeichert ist. Dort wechselst Du in das Verzeichnis, in dem das Ori­gi­nal-The­me liegt, das Du ausgesucht hast. Also zum Beispiel Twenty Twenty. Dieses Verzeichnis findest Du unter wp-content/themes/twentytwenty. (Oder eben dem Namen Deines Themes.)

In diesem Verzeichnis findest Du die Datei header.php. Jetzt überträgst Du diese Datei auf Deinen PC und öffnest sie mit einem Texteditor. Ziemlich am Ende dieser Datei, nämlich oberhalb der Zeile </head> fügst Du folgenden HTML-Co­de ein:

<link rel="stylesheet" href="https://wordpress.fassbar.de/wp-content/themes/twentytwenty-child/meincss.css" type="text/css" media="all" />
</head>

Natürlich musst Du den Dateipfad und den Namen Deiner eigenen CSS-Da­tei anpassen. Falls Du eine bestimmte CSS-Da­tei nur auf einer ganz besonderen Seite und auf allen anderen Seiten nicht einbinden willst, müsstest Du noch mit Hilfe von PHP-Co­de eine Bedingung voranstellen. Also etwa so:

<?php
if ( substr_count( $_SERVER["REQUEST_URI"], "/spezialseite" ) > 0 )
	echo( "<link rel=\"stylesheet\" href=\"https://wordpress.fassbar.de/wp-content/themes/twentytwenty-child/spezial.css\" type=\"text/css\" media=\"all\" />\n" );
?>
</head>

Sobald Du alle Änderungen in die header.php eingebaut hast, lädst Du die Datei wieder mit dem FTP-Pro­gramm auf Deinen Webserver. Allerdings nicht zurück in das Verzeichnis im Ori­gi­nal-The­me. Dort würden Deine Änderungen mit dem nächsten The­me-Up­date wieder überschrieben.
Deshalb lädst Du die geänderte header.php in das Verzeichnis Deines „Child-The­mes“. Was das ist und wie man es anlegt, habe ich in einem anderen Beitrag beschrieben.

Zu all dem hinzu kommt noch die Möglichkeit, über weitere eigene CSS-Da­tei­en auch dynamisch generierte Gestaltungselemente zu erzeugen. Du könntest beispielsweise eine Datei meincss.css.php anlegen und darin CSS-Co­de nicht fix eintippen, sondern durch bedingte PHP-An­wei­sun­gen bei jedem Seitenaufruf erzeugen lassen. Solche dynamischen CSS-Da­tei­en verlängern zwar die Ladezeiten Deiner Webseiten, können aber für bestimmte Anwendungsfälle trotzdem sinnvoll sein. Wie genau dynamisch erzeugtes CSS funktioniert, erkläre ich in einem separaten Beitrag.

---

Kehren wir noch einmal zurück zur Ausgangsfrage: CSS lieber per Customizer oder per CSS-Datei?

Ich persönlich halte es so, dass ich während der Entwicklung – also beim Ausprobieren von Gestaltungselementen – über den Customizer arbeite. Das geht schneller und ich kann mir bei vertrackten Problemen einfacher von anderen helfen lassen. Sobald aber diese Trial-and-Er­ror-Pha­se abgeschlossen ist, schiebe ich den gesamten über den Customizer erfassten Code in die Datei style.css meines Child-Themes und lade diese in das entsprechende Serververzeichnis.