INFOPORTAL BERLIN

Immer wiederkehrende Fragen einfach erklärt

Child Theme

Child-Theme

Die erste Frage – welche sich hierbei immer wieder stellt – was ist ein Child-Theme? Wenn wir es einfach übersetzen dann bedeutet es ein „Kind Thema“. Also, eine Oberfläche für Kindergarten oder Vorschulklasse.

Natürlich nicht! Das Theme, Thema, Motiv oder Design, wird programmtechnisch als „parent-theme“ bezeichnet. Die Entwickler solcher Theme entwickeln diese meist weiter oder beheben eventuell aufgetretene Fehler. Hierzu werden child-theme in WordPressdann Updates herausgebracht um sie auf dem neuesten Stand zu halten. Mit der Installation solcher Updates werden allerdings eigene Anpassungen oder Erweiterungen überschrieben.

Anders gesagt, um dieses zu verhindern wird ein sogenanntes „Child-Theme“ vom „Parent Theme“ angelegt. Wir verwenden hierbei die original Dateien des Eltern-Thema. Eigene Änderungen oder Erweiterungen, welche im Child Ordner bearbeitet wurden, bleiben jedoch beim Update unangetastet. Zudem bietet sich diese Vorgehensweise an, um verschiedene Änderungen auszuprobieren, ohne das aktuelle Theme zu verändern.

Wie erstelle ich ein Child-Theme?

Das Erstellen eines Child Themes ist in wenigen Schritten zu realisieren. Voraussetzung ist der Zugang zu den Dateien beim Provider und ein FTP Programm. Mit diesem werden die Dateien hochgeladen. Ferner benötigen wir natürlich einen Editor für die Bearbeitung der Dateien.

In dem folgenden Beispiel lege ich ein Child Theme des Standard Parent von twentyseventeen an. Den Child Ordner benenne ich „twenty_child“.

Stufe 1:

Im WordPress Installationsverzeichnis müssen wir einen neuen Ordner für unser Theme anlegen. Dazu gehen wir in das Verzeichnis wp-content / themes“ und legen dort das neue Verzeichnis an. Die Benennung dieses Ordners ist unkritisch und kann nach eigenen Vorstellungen vergeben werden. Wir beachten hierbei die Konvention für eine Pfad Bezeichnung.  Also, keine Umlaute und keine Leerzeichen.

Stufe 2:

In dem soeben erstellten Ordner legen wir nun zwei neue Dateien an. Eine benennen wir als „style.css“ und die Zweite als „funktions.php“.

In die Datei „style.css“ kommen die Angaben, wie unser Theme heißt und welches das Parent Theme ist. Alle weiteren Angaben – außer „Theme Name: “und „Template: “– sind Optional.

Inhalt der child_css Datei

Hier die Eintragungen der style.css Datei in meinem Beispiel.

Nach dem Speichern erscheint diese Angabe als weiteres Template in unserem Design Verzeichnis.

Wir bearbeiten nun noch die Datei „functions.php“. Die nachstehende Grafik zeigt die notwendigen Eintragungen.

Inhalt der child_functions Datei

Mit diesen beiden Dateien aktivieren wir das Child-Template bereits im Backend.

Sinnvoll ist es, wenn wir ein passendes Vorschaubild für unser Child mit einfügen. Auch hierbei sind nur zwei einfache Forderungen zu berücksichtigen. Die Bezeichnung muss „screenshot.png“ heißen und das Bild sollte eine Größe von 600 X 450 px haben. Liegt es dann im Ordner unseres Child Themes, wird es automatisch mit angezeigt.

Verwendung des Child

Unser Child Theme wird nun ganz normal unter Design/Themes aktiviert. Sofern wir nichts weiter unternehmen, wird unsere Seite genau so wie das Theme des Parent angezeigt. Möchten wir irgend etwas änder, so kopieren wir die entsprechende Datei vom Parent zum Child. Ich möchte den Header abändern, kopiere die header.php und bearbeite sie. Beim Aktualisieren der Seite werden dann die im Child gespeicherten Dateien ausgeführt und nicht mehr die im Parent.

Programmtechnik

Sehen wir uns doch einmal im Detail an wie es funktioniert. Als Schlüssel – Funktion dient hier die in WordPress vorhandene add_action() Funktion.

add_action( ‚wp_enqueue_scripts‘, ‚theme_enqueue_style )

  • $tag (‚wp_enqueue_scripts‘) = Der Name wie die Aktion heißen soll
  • $function_to_add (‚theme_enqueue_style‘) = hier wird der Name der Funktion angegeben die aufgerufen werden soll

Als Erstes wird die Funktion wp_enqueue_script() ausgeführt. Die Bezeichnung enqueue in dieser Funktion bedeutet so viel wie Warteschlange, einreihen oder auch in Reihe stellen. Wir steuern damit, wann und wo – zum Beispiel auf welchen Seiten – ein Script geladen wird. Eine sehr umfangreiche Dokumentation gibt es HIER.

In der nachfolgenden Funktion wp_enqueu_style() übergeben wir den Pfad der CSS Datei des Parent Theme.

 

Nachricht oder Anfragen an die Administration

Updated: 19. Januar 2018 — 23:00
INFOPORTAL BERLIN © 2017 >> Impressum << - >> Datenschutz << - >> Disclaimer << Frontier Theme