Inhalt
Wieso Du unbedingt ein Child Theme einsetzen solltest
Bei der Untersuchung bestehender WordPress Websites stelle ich immer wieder fest, dass die wenigsten ein Child Theme verwenden. Natürlich kann man das auch nachträglich erstellen, nur sollte man dann vor der Umstellung auf das Child Theme die Theme Einstellungen sichern, denn diese werden wieder auf die Standardeinstellungen des Parent Themes zurückgesetzt, wenn man das Child Theme aktiviert.
Die meisten Themes bieten in den Theme Optionen eine Exportfunktion für die Einstellungen. Man erhält dann eine textbasierte Datei im JSON-, XML- oder TXT-Format, die man in den Theme Optionen des Child Themes wieder importieren kann. Die Theme Einstellungen des Child Themes sind identisch mit denen des Parent Themes.
Was ist ein Child Theme?
Ein WordPress Child Theme ist ein Theme Ordner, der wie ein normales Theme in den WordPress “themes” Ordner geladen wird. Ein Child Theme benötigt mindestens drei Dateien, um verwendet werden zu können
- functions.php
- screenshot.jpg (oder png)
- style.css
Die functions.php ist eine Textdatei, die mindestens das öffnende PHP-Tag beinhalten muss <?php. Der Screenshot kann ein beliebiges Bild der Größe 410x308px sein. Es darf auch größer sein, nur die Proportionen sollten beibehalten werden. Allerdings muss es nicht größer sein, da es nicht größer angezeigt wird. Es dient lediglich als Vorschaubild im Bereich “Themes” Eures WordPress Backends (Design -> Themes). Ich füge da meistens nur mein Logo ein und einen kurzen Text mit einem Hinweis auf das Parent Theme.
Die Datei style.css ist das wesentliche Element Eures Child Themes. Im Header dieser Datei stehen die Informationen über Euer Theme. Der wichtigste Eintrag ist “Template:” Dieser Wert sollte der exakten Schreibweise Eures Parent Theme Ordners entsprechen. Auf dieser Website nutze ich das Divi Theme. Der Theme Ordner für das Divi Theme ist mit einem großen D geschrieben und deswegen muss der Eintrag für ein Child Theme von Divi wie folgt lauten:
Template: Divi
Dann braucht Ihr eigentlich nur noch einen Namen für “Theme Name” vergeben – diesen könnt Ihr frei wählen, er muss nicht unbedingt “Divi Child Theme” lauten – und die “Description”. Alle anderen Zeilen sind optional, sollten aber der Vollständigkeit halber auch angepasst werden. Der komplette Header der style.css sieht dann so aus:
/* Theme Name: WordPress Director Theme URI: https://www.drei-kubik.com Description: Divi Child Theme Author: WordPress Director Author URI: https://www.drei-kubik.com Template: Divi Version: 1.0.0 Tags: two-columns, responsive, light-weight Text Domain: WordPress Director Child Theme */
Unter diesem auskommentierten Block könnt Ihr nach belieben eigene CSS-Befehle notieren, die sich dann auf alle ausgewählten Elemente auf Eurer Website auswirken.
Es können auch noch weitere Dateien und Unterordner hinzugefügt werden. Ich füge meinen Child Themes immer noch einen Unterordner “js” hinzu, wo ich eine leere Javascript Datei namens “custom.js” ablege, in der ich einige hilfreiche Javascript- und jQuery-Funktionen notiere, die dann im Frontend abrufbereit sind. Alle zusätzlich hinzugefügten CSS- und JS-Dateien müssen natürlich noch geladen werden. Dies könnt Ihr entweder im <head> Bereich oder direkt vor dem Ende des </body> Bereichs machen. Die Dateien ladet Ihr am besten über eine PHP Funktion in Eurer functions.php in Euer Child Theme. Das ist die offiziell von WordPress empfohlene Methode, weitere CSS- und JS-Dateien einzubinden.
Gründe für ein Child-Theme
Der wichtigste Grund für mich ein Child Theme einzusetzen, ist die Möglichkeit vorhandene Templates aus dem Parent Theme modifizieren zu können, ohne dass diese Modifikationen bei einem Theme Update des Parent Themes wieder verloren gehen. Ihr könnt gewünschte Templates aus dem Parent Theme Verzeichnis kopieren und an gleicher Stelle mit demselben Dateinamen in Eurem Child Theme Verzeichnis einfügen. Diese könnt Ihr dann nach Belieben modifizieren, ohne Eure Original Theme Dateien zu verändern. Und wenn Ihr wieder ein Original Template Eures Parent Themes verwenden wollt, dann müsst Ihr die Kopie aus Eurem Child Theme Ordner einfach wieder löschen.
Wenn Ihr ein Child Theme einsetzt, dann prüft WordPress immer zuerst im Child Theme Folder, ob sich darin ein benötigtes Template befindet. Wenn dies der Fall ist, wird dieser Version Vorrang gegeben. Liegt ein benötigtes Template nicht darin, wird das gleichnamige Template aus dem Parent Theme Folder geladen. Zwei wichtige Templates sind die Dateien header.php und footer.php. Diese lege ich schon fast obligatorisch als Kopie in meinem Child Theme Ordner ab, weil ich darin immer noch ein bisschen Code hinzufügen muss. Z.B. den Code Snippet für Google Analytics, Google ReCaptcha und weitere Referenzen.
Wer sich ein bisschen mit HTML und PHP auskennt, der kann auch die HTML-Struktur der Templates ändern. Die Datei page.php wird z.B. als Template für den Aufbau einer statischen Seite (Post Type: page) verwendet und die Datei single.php ist für die Darstellung eines vollständigen Blogartikels zuständig. Weitere Template Dateien von WordPress könnt Ihr hier kennenlernen: https://developer.wordpress.org/themes/basics/template-files/
In Euren Child Theme Templates könnt Ihr auch PHP-Code hinzufügen. Ich bin zwar auch kein Entwickler, aber die “Template Tags” von WordPress erlauben einem auf sehr einfache Art und Weise auf viele nützliche WordPress Objekte und Funktionen zuzugreifen. Ihr könntet zum Beispiel ein “Custom Page Template” erstellen, das Ihr für Seiten verwendet, auf dem Inhalte nur für eingeloggte Nutzer zur Verfügung gestellt werden. Die Darstellung bestimmter Inhalte könnt Ihr dann an die Bedingung knüpfen, ob ein Nutzer eingeloggt ist.
Beispiel für den einfachen Einsatz von Template Tags in Templates oder Seitentemplates
Da im folgenden Beispiel PHP-Code für die Funktion und HTML-Code für die Darstellung von Inhalten verwendet wird, muss der PHP-Code in PHP-Tags eingefügt werden. Innerhalb der PHP-Tags darf kein HTML-Code stehen. Ihr müsst das PHP-Tag schließen, bevor Ihr HTML-Code verwendet und wieder öffnen, wenn Ihr die PHP-Funktion weiter schreiben wollt.
<?php
if ( is_user_logged_in() ) {
?>
<p>Lade Dir mein geheimes PDF herunter:</p>
<input type=”submit” class=”btn button”>DOWNLOAD PDF</input>
<?php
} else {
?>
<p>Du musst eingeloggt sein, um diesen Inhalt zu sehen.</p>
<?php
}
?>Eigene JavaScript- und CSS-Dateien über die functions.php einbinden
WordPress stellt dafür zwei Funktionen zur Verfügung
Um eigene CSS-Dateien zu laden, verwendet Ihr die Funktion wp_enqueue_style() und um eigene JS-Dateien zu laden die wp_enqueue_script() Funktion. In den Klammern werden natürlich noch Parameter erwartet, die ich Euch kurz anhand des folgenden PHP-Scripts erläutern möchte:
add_action( 'wp_enqueue_scripts', 'load_scripts', 50 );
function load_scripts() {
if ( is_rtl() ) {
wp_enqueue_style( 'child-theme-css-rtl', get_stylesheet_directory_uri().'/style_rtl.css', '' );
}
wp_enqueue_style( 'parent-theme-css', get_template_directory_uri().'/style.css', '' );
wp_enqueue_style( 'child-theme-css', get_stylesheet_directory_uri().'/style.css', '' );
wp_enqueue_script( 'child-theme-js', get_stylesheet_directory_uri() .'/js/custom.js', '', true, false );
/* set the last false to true, if you want your custom.js to be loaded in the footer */
}Mit der WordPress Core Funktion “add_action” teilt Ihr WordPress mit, an welcher Stelle im WordPress Programm Code (‚wp_enqueue_scripts‘) welche Funktion (‚load_scripts‘) mit welcher Priorität (50) ausgeführt werden soll. Die Priorität ist optional. Solltet Ihr keine Priorität angeben, wird der WordPress Standard von 10 zugrunde gelegt.
Die load_scripts() Funktion beginnt mit einer bedingten Anweisung. Nur wenn Ihr Eure WordPress Website in einer RTL-Sprache erstellt (“Right To Left”, wie z.B. Arabisch), dann wird mithilfe der WordPress Funktion wp_enqueue_style() eine spezielle CSS-Datei für diese RTL-Sprache geladen.
Durch get_stylesheet_directory_uri() wird auf das Child Theme Verzeichnis verwiesen und daraus die Datei style_rtl.css im Header Eurer Website geladen. Mit get_template_directory_uri() verweist Ihr auf das Parent Theme Verzeichnis.
Nun werden noch drei weitere Dateien ohne Bedingung geladen: Die Datei style.css aus Eurem Parent Theme Folder, die obligatorische style.css aus Eurem Child Theme Folder und meine hinzugefügte JS-Datei für eigene Javascript und jQuery Funktionen. Wie Ihr sicherlich bemerkt habt, wird die Javascript Datei mithilfe der WordPress Funktion wp_enqueue_script() geladen, die bis zu fünf “Arguments” erwartet. Wie bei der Funktion zum Laden der CSS Dateien kommt zuerst der “Handle” (Bezeichner), gefolgt von dem Pfad zur Datei (Source), danach folgen zwei Boolsche Werte, die entweder “true” oder “false” annehmen können. Der erste Boolsche Wert vergibt Eurer Datei eine Versionskennung (wenn “true”), der zweite fragt nach, ob die Javascript Datei im Footer Eurer HTML-Struktur (vor dem schließenden </body> Tag) geladen werden soll. Ist dieser Wert auf “false”, wird die Javascript Datei im <head> Bereich geladen.
Beitragsbild: Isaac Del Toro (gefunden auf Unsplash)
0 Comments