Ärgerlich: Alle am WordPress-Theme vorgenommenen Änderungen sind nach dem Update des Themes über die Wupper. Abhilfe schafft ein Child-Theme.
Inhaltsverzeichnis
Was für das Anlegen eines Child-Themes benötigt wird
Um ein Child-Theme anzulegen, sind folgende Vorraussetzungen nötig:
- Zugriff per FTP auf den Webserver
- Ein FTP-Programm
- Ein Editor wie Visual Studio Code
Der Sinn und Zweck eines Child-Themes ist es, eigene Änderungen die im Style-Sheet des Themes vorgenommen wurden, vor den Updates des eigentlichen Themes zu schützen. Denn bei einem Update werden diese Änderungen durch das Einspielen der Originale wieder überschrieben und es geht wieder von vorne los.
Die Alternative zu einem Childtheme wäre eine Sicherungskopie der veränderten Dateien auf dem eigenen Computer, um diese dann einfach wieder zu überspielen. Werden aber Änderungen im Theme vorgenommen, die zwingend eine aktuelle Version erfordern, diese aber durch die Funktionen einer alten Version ersetzt werden, kann das auch nach hinten losgehen.
Ein Child-Theme ist also immer die bessere Alternative.
Wie funktioniert so ein Childtheme technisch?
Alle Themes einer WordPress-Installation liegen auf dem Webserver im Ordner wp-content/themes und dann im jeweils entsprechenden Unterordner. Alle notwendigen und zum Theme gehörenden Dateien liegen in diesem Unterordner. Ein Child-Theme klemmt sich zwischen WordPress und das Original-Theme, indem es mit einem bestimmten Eintrag in der style.css (Beispiel folgt gleich) auf das Original verweist. Befindet sich im aktivierten Child-Theme eine modifizierte Datei des Originals, wird auch diese verwendet.
Befindet sich die gerade angeforderte Datei nicht dort, wird die Originaldatei des „echten“ Themes verwendet.
Inhalt eines Theme-Ordners
Damit das funktioniert, muss sich also wenigstens die Datei style.css im Ordner des Child-Themes mit dem folgenden Code im Ordner des Child-Themes befinden.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/* Theme Name: Uku Child Theme URI: Description: Uku Child Theme Author: Your Name Author URI: http://www.deinedomain.com/ Template: name-des-eltern-theme-ordners Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: Uku Child Theme */ |
Die Angaben hinter Theme Name und Theme Description sollten dem verwendeten Theme angepasst werden, ebenso natürlich die Author-URI. Am wichtigsten ist allerdings Angabe hinter Template. Hier muss der Name des Ordners des Originalthemes hinter stehen.
Diese Codezeilen sorgen unter anderem dafür, dass das Child-Theme auch im Theme-Menü von WordPress auftaucht.
Schritt 1: Die Datei style.css erstellen
Jetzt kommt der, oben bereits ewähnte, Editor Visual Studio Code ins Spiel. Das Programm ist von Microsoft, kostenlos und bietet allerhand Erweiterungen und Funktionen. Für unsere Bedürfnisse ist die Grundinstallation allerdings vollkommen ausreichend.
Wer keine zusätzliche Software installieren will, kommt auch mit dem Editor klar der direkt bei Windows mitgeliefert wird. Dieser bietet allerdings keine Funktionen wie Syntax Highlighting, also eine farbige Darstellung für eine bessere Lesbarkeit des Quellcodes.
Grundsätzlich bietet sich für die Bearbeitung auch jedes andere Programm wie Notepad++ an. Alles Geschmackssache, die hier gezeigten Schritte lassen sich auch mit jeder anderen Software herstellen.
Um zu beginnen, wird also zuerst mal eine leere Datei benötigt. Diese lässt sich über Datei -> Neu erstellen. Es öffnet sich ein leeres Textfenster mit blinkendem Cursor in der oberen linken Ecke. Hier kann nun der Code eingegeben werden, doch zuerst speichern wir die Datei erstmal in der lokalen WordPress-Installation ab (sofern vorhanden, sonst tut es auch ein anderer Ordner).
Dazu muss im Ordner wp-content/themes ein weiterer Ordner angelegt werden. Damit dieser eindeutig als Ort des Child-Themes erkennbar ist, empfiehlt es sich den Originalnamen des Themes zu verwenden und das Wort „child-“ davor oder danach zu setzen.
In diesem Ordner muss die eben erstellte, aber noch leere Datei als style.css gespeichert werden.
Ist die Datei gespeichert, erkennt Visual Studio Code anhand der Dateiendung .css das Dateiformat und aktiviert das entsprechende Syntax-Highlighting.
Jetzt kann der oben dargestellte Code eingefügt und die Datei mit STRG+S abgespeichert werden. Die Tastenkombination erspart den umständlichen Weg über das Menü.
Schritt 2: Die functions.php erstellen
Wer sich schon mal ein wenig mit den Themes von WordPress auseinandergesetzt hat, dem wird die Datei functions.php kein Unbekannter sein. Was auch immer das verwendete Theme so an Möglichkeiten bietet, in den meisten Fällen hat hier diese Datei Ihre Finger im Spiel.
Kurz: ohne die functions.php geht nichts – darum wird sie auch für das Child-Theme benötigt.
Dafür muss in Visual Studio Code eine neue Datei erstellt werden. Dieses wird allerdings keine css-Datei, sondern eine php-Datei.
Die leere Datei also direkt wieder abspeichern, ebenfalls im Ordner des Child-Themes nur unter dem Namen functions.php.
Gespeichert? Super, dann einfach folgenden Code in die functions.php einfügen und wieder abspeichern.
|
1 2 3 4 5 6 |
function child_theme_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'child-theme-css', get_stylesheet_directory_uri() .'/style.css' , array('parent-style')); } add_action( 'wp_enqueue_scripts', 'child_theme_styles' ); |
3. Childtheme auf den Server laden
Damit das Child-Theme funktioniert, muss der angelegte Ordner mit den enthaltenen Dateien auf den Server geladen werden.
Dazu ist entweder ein FTP-Programm (FTP = File Transfer Protocol) erforderlich, viele Webhoster bieten aber auch im Kundenmenü einen FTP-Service direkt im Browser an.
Ich sehe oft Filezilla als Empfehlung für ein FTP-Programm. Dem kann ich nicht entsprechen, da ich durch Filezilla einmal mächtige Probleme hatte. Möglicherweise ist das Problem heute behoben, testen möchte ich es aber nicht: Das Programm hat alle Passwörter im Klartext gespeichert und irgendjemand hat sich diese erhaschen können.
Ich selbst nutze seit ewigen Zeiten PSFtp. Das Programm wird schon ewig nicht mehr weiterentwickelt, gibt es also eigentlich nicht mehr, funktioniert aber selbst unter Windows 10 noch einwandfrei.
Ordner auf dem Webspace
Um eine Verbindung zum Webserver über FTP herzustellen, sind neben der Adresse auch ein Benutzername und ein Kennwort erforderlich. Diese Zugangsdaten finden sich beim Webhoster im Kundenmenü, möglicherweise muss dort auch erst ein entsprechender Zugang erstellt werden.
Steht die FTP-Verbindung, muss der Ordner mit dem Childtheme in die WordPress-Installation und den Unterordern wp-content/themes/ geladen werden. Dazu einfach im FTP-Programm den entsprechenden Ordner auf dem Webserver suchen und den Ordner einfach per Drag&Drop hinschieben. Hat alles funktioniert, sollte das Childtheme im Bereich Themes von WordPress auftauchen.
Das Child-Theme in der Übersicht
Wenn statt einer Grafik nur ein graues Kästchen beim Childtheme erscheint, liegt das an der fehlenden screenshot.png Datei im Ordner. Wer es also schön haben möchte, kann sich einen Screenshot seiner Webseite als screenshot.png auch noch in den Ordner der Childthemes laden. Nötig ist das, vor allem für den eigenen Gebrauch, eher weniger.
Änderungen nur noch am Childtheme vornehmen
Mit dem Childtheme lassen sich aber nicht nur Änderungen am CSS-Code der Webseite durchführen. Sollen in den einzelnen Theme-Dateien Änderungen durchgeführt werden, kopiert diese vom Original in euren lokalen Childtheme-Ordner, nehmt die Änderungen vor und ladet die Dateien wieder auf den Server, diesmal aber in den Childtheme-Ordner.
So bleiben die Änderungen auch bei (ungewollten oder versehentlichen) Updates des Themes bestehen.
Pingback:WordPress und DSGVO: IP-Adresse bei Kommentaren entfernen
Pingback:Datenschutz-Checkbox für WordPress-Kommentare manuell einbauen
Pingback:Wordpress schneller machen - Ladezeit optimieren für mehr PageSpeed (2/2)