Die Zeiten ändern sich.
Dieser Beitrag scheint älter als 15 Jahre zu sein – eine lange Zeit im Internet. Der Inhalt ist vielleicht veraltet.
Ein Großteil der WordPress-Nutzer im Netz nutzen eines der sehr vielen freien Themes und passen dies an die eigenen Bedürfnisse an. Oft aus dem Aspekt heraus, etwas individuelles nach Außen zu tragen. Nicht immer ist das Know-How umfassend beim Administrator des Blog vorhanden.
Mit dieser Aussage will ich keinen Leser am Ändern bremsen, aber ich möchte gern eine andere Lösung zeigen. Eine Lösung, mit der man bei Problemen und Updates des ehemaligen Themes keine Probleme bekommt. Der eine oder andere verstrickt sich in der Struktur des Stylesheets, was recht verständlich ist. Jeder Entwickler hat eine andere Herangehensweise und die Idee im Kopf realisiert jeder anders. Die Dokumentation des Stylesheets fällt im Normalfall recht mager aus, was aber ebenso verständlich ist.
Um nun eine bestehendes Theme an die eigenen Bedürfnisse anzupassen, soll die folgende Lösung dienen. Mit Hilfe einer zusätzlichen Stylesheet-Datei werden weitere Styleangaben zum Layout hinzu definiert. Mit Hilfe von einer einfachen Anweisung im bestehenden Theme wird diese CSS-Datei geladen. In der Regel sollte dies in die header.php. Existiert diese Datei nicht, dann ist die index.php zu ändern. Im weiteren ordnen wir dem body-Tag eine Klasse zu, mit dem wir alle Styleangaben ansprechen.
Als erstes erstellen wir eine weitere CSS-Datei und laden sie in das Theme, welches modifiziert werden soll. Achtet darauf, dass sie nicht style.css heißt, denn diese Datei wird von WordPress gesondert behandelt. Hierbei empfehle ich als Dateiname custom.css. Der Begriff Custom soll im Beispiel als Schlüssel dienen, fungiert also als Dateinamen und class-Attribut.
Der Inhalt der custom.css könnte folgendermaßen aussehen.
/*
Custom Theme Name: meine Erweiterung zum Theme default
Custom Theme URI: http://meine_url
Cutom Description: Alles anders! auf Basis des Themes default
Custom Version: 1.0
Custom Author: ich
Custom Author URI: http://meine_url
Last Date: 14.08.2007 12:51:53
*/
Natürlich ist es nicht erforderlich, dass alle diese Daten im Kommentar der Datei hinterlegt sind. Wichtig ist, dass die bekannten WordPress-Schlüssel-Wörter einer Styledatei nicht verwendet werden. Darum habe ich alle nochmals im Beispiel angeben und mit dem Begriff Custom erweitert.
Nachdem die Datei nun ebenfalls im Theme-Ordner hinterlegt ist, müssen die wenigen Änderungen im bestehenden Theme vorgenommen werden, damit die Datei auch geladen und ausgeführt wird.
Dazu bearbeiten wir die Template-Datei header.php des bestehenden Themes. Suche nach den Angaben zum Laden der aktuellen Style-Datei und erweitere um folgenden Code, der die custom.css im Theme-Ordner lädt.
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/custom.css" type="text/css" media="screen" />
Wird nun das Blog geladen, so wird gleichzeitig die Datei custom.css im aktuell verwendeten Theme mit geladen. Damit aber nicht genug, denn wir müssen noch die Klasse vergeben. Dazu arbeiten wir wieder in der header.php und ändern den body-Tag.
<body class="custom" >
Nach dem nun alle Veränderungen im bestehenden Theme statt gefunden haben und die Datei auch gespeichert wurde, ist die Klasse custom ansprechbar, die über den kompletten body wirkt.
Sollten in Zukunft Veränderungen im Theme eingespielt werden, sei es aus Updategründen oder anderen, dann muss die header.php jeweils wieder angepasst werden. Im Vergleich zu der Anpassung einer Stylesheet-Datei sollte das jedoch sehr wenig Aufwand darstellen.
Nun können wir erste Veränderungen am Design vornehmen ohne das bestehende Stylesheet direkt in der Datei zu zerstören.
Dazu soll ein kleines Beispiel dienen. Öffne die custom.css im Editor von WordPress, so sparen wir uns das Kopieren via FTP. Suche ein Styleanweisung aus dem bestehenden Theme und kopiere sie in die custom.css. Bevor das ganze gespeichert wird, erweitern wir die Kopie um unsere Klasse custom. Im nachfolgenden Beispiel wird die ID content kopiert und um die Klasse custom erweitert. Die Schriftgröße habe ich absichtlich extrem vergrößert und die Farbe auf Blau geändert. So sollten die Veränderungen schnell ersichtlich sein ;-).
.custom #content {
font-size: 3em;
color: blue;
}
In diese Datei kommen nun alle Anpassungen, die du am Theme vornehmen willst. Gibt es Probleme, dann kannst du immer wieder der Originalzustand herstellen und begutachten.
Update
Diese Lösung wurde schon einmal bei Perasonified vorgestellt, leider war sie mir nicht bekannt und ich möchte nun nochmal auf diesen Beitrag verweisen, da wesentlich umfangreicher ist und außerdem zusätzlich einige Downloads anbietet.
Hallo,
danke für die leicht verständliche Erklärung!
in deinen letzten Codeschnipsel hat siczh ein kleiner aber gemeiner Tippfehler eingeschlichen, es müsste heißen:
.custom #content {also mit „s“
Gruß staudi
Vielen Dank staudi für den Hinweis, habe es direkt korrigiert.