Wer sich mit der Gestaltung von HTML-Code 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 Layout-Sprache 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-Code vorliegen, werden durch Gestaltungsanweisungen dargestellt, die als CSS-Stildefinitionen Darstellungshinweise an den Internetbrowser geben.
In einigen meiner Beiträge in diesem Kompendium ist die Rede von CSS-Code, der in CSS-Dateien eingetippt oder im WordPress-Menü 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-Datei auf seiner Website unterbringt.
CSS per Customizer
Der gesamte CSS-Code, den Du per Customizer eingibst, wird auf allen HTML-Seiten 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 Stylesheet-Datei gelesen hast.)
CSS per Stylesheet-Dateien
Auf Deiner Internetpräsenz gibt es mehrere CSS-Dateien, die Theme-abhängig 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-Theme anlegst. Was ein Child-Theme ist und wie man es einrichtet, habe ich in einem separaten Beitrag beschrieben.
Hinzu kommen weitere CSS-Dateien, 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-Dateien 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-Programm verbindest Du Dich mit dem Webserver, auf dem Deine WordPress-Installation gespeichert ist. Dort wechselst Du in das Verzeichnis, in dem das Original-Theme 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-Code 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-Datei anpassen. Falls Du eine bestimmte CSS-Datei nur auf einer ganz besonderen Seite und auf allen anderen Seiten nicht einbinden willst, müsstest Du noch mit Hilfe von PHP-Code 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-Programm auf Deinen Webserver. Allerdings nicht zurück in das Verzeichnis im Original-Theme. Dort würden Deine Änderungen mit dem nächsten Theme-Update wieder überschrieben.
Deshalb lädst Du die geänderte header.php in das Verzeichnis Deines „Child-Themes“. 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-Dateien auch dynamisch generierte Gestaltungselemente zu erzeugen. Du könntest beispielsweise eine Datei meincss.css.php anlegen und darin CSS-Code nicht fix eintippen, sondern durch bedingte PHP-Anweisungen bei jedem Seitenaufruf erzeugen lassen. Solche dynamischen CSS-Dateien 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-Error-Phase 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.