WordPress Child Theme erstellen 2017

Bewerte diesen Beitrag

Seit der WordPress Version 4.7 (Vaughan) können benutzerdefinierte Styles ganz bequem im WordPress Customizer unter „Zusätzliches CSS“ eingetragen werden. Ändert dieses Feature etwas an der Art und Weise wie ein WordPress Child Theme ab 2017 erstellt wird?

Sehen wir uns zunächst einmal die verschiedenen Anwendungsfälle für ein WordPress Child Theme an und wie man ein solches Child Theme erstellen kann.

Was ist ein WordPress Child Theme?

Ein Child Theme ist ein Theme, welches die Funktionen und Design-Einstellungen eines anderen WordPress Themes (Parent Theme) nutzt und mit eigenen Styles, Templates und Funktionen ergänzt bzw. angepasst wird.

Wozu brauche ich ein Child Theme?

Ein Child Theme benötige ich, wenn ich Änderungen an einem bestehenden WordPress Theme (Parent Theme) vornehmen und diese auch nach den kommenden Updates behalten möchte.

Diese Änderungen können sein:

  • CSS Styles anzupassen
  • Funktionen hinzuzufügen, die man nicht mit Plugins realisieren kann oder möchte
  • Page Templates und seit WordPress 4.7 auch Post Type Templates hinzuzufügen oder zu ändern
  • Den Demo Inhalt einer Demo Website mit einem Klick zu importieren (der Beitrag „Demo Website erstellen mit One Click Demo Import“ wird bald hier auf wpc veröffentlicht)

Solltest du diese Änderungen direkt im Parent Theme vornehmen, würden sie beim nächsten Update verloren gehen.

WordPress Child Theme erstellen in 3 Schritten:

Auch in 2017 ist die folgende Vorgehensweise bei der Erstellung eines Child Themes aktuell:

Schritt 1: Neuen Child Theme Ordner im Verzeichnis „themes“ erstellen

Erstelle einen neuen Ordner im Verzeichnis wp-content > themes. Den Zugang zu diesem Verzeichnis erhältst du mittels eines FTP-Programms wie Filezilla oder FireFTP (für Firefox User). Der Ordner kann dem Namen deines Child Themes entsprechen, muss er aber nicht. Wichtig ist, dass du nur Kleinbuchstaben verwendest und bei mehreren Wörtern diese mit einem Bindestrich trennst. In diesem Ordner erstellst du die folgenden zwei Dateien: style.css und functions.php.

Schritt 2: Datei style.css erstellen

Erstelle eine Datei namens style.css in einem Texteditor wie Notepad oder Textedit, füge den folgenden Code ein und ersetze ihn mit deinen Daten. Die wichtigste Angabe hier ist „Template“. Hier fügst du den Ordnernamen deines Parent Themes ein.

/*
 Theme Name:    My Child Theme
 Theme URI:     http://webgeckos.com
 Description:   Responsive WordPress Theme for Knirpsy Network based on Layers WP 
 Author:        Danijel Rose
 Author URI:    http://webgeckos.com
 Template:      layerswp
 Version:       1.0.0
 License:       GNU General Public License v2 or later
 License URI:   http://www.gnu.org/licenses/gpl-2.0.html
*/

Wie der Name style.css bereits vermuten lässt, kommen in diese Datei all deine Designanpassungen hinein.

Schritt 3: Datei functions.php erstellen

Kopiere nun den folgenden Code, füge ihn in eine zweite Datei ein und nenne diese Datei functions.php.

<?php
// Action Hook, um die eigenen Styles zu integrieren
add_action( 'wp_enqueue_scripts', 'geckos_styles' );

function geckos_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( 'parent-style' ));
}

Der Name der Datei ist auch in diesem Fall selbsterklärend. Hier kommen alle zusätzlichen Funktionen hinein, die du für dein Child Theme benötigst.

Schritt 4: Screenshot.png erstellen (optional)

Ich persönlich würde an deiner Stelle diesen Schritt weglassen, falls niemand sonst dein Child Theme benutzen wird außer du selbst. Für den Fall, dass du ein WordPress Multisite Projekt betreibst, wo deine User einen eigenen Blog mit Hilfe deines Child Themes anlegen können oder wenn du sogar dein Child Theme zum Verkauf anbieten möchtest, dann empfiehlt es sich auf jeden Fall ein Bild namens screenshot.png in deinen Child Theme Ordner zu kopieren.

Es kann sich dabei um ein beliebiges Bild handeln wie z. B. ein Logo oder um einen wirklichen Screenshot deines Themes. Dafür müsstest du aber zuerst eine Demo Website erstellen (hier nochmals der Hinweis auf den Beitrag „Demo Website erstellen mit One Click Demo Import“). Von der Demo Website kannst du anschließend einen Screenshot aufnehmen (für alle Mac User: Shift-command-4). Achte darauf, dass die Abmessungen des Bildes 1200 x 900 Pixel betragen und der Name der Datei exakt screenshot.png lautet.

Das wars! Nun musst du nur noch unter Design > Themes dein Child Theme aktivieren.

Was ändert sich nun ab WordPress 4.7 an der Art und Weise wie ein Child Theme erstellt wird?

Die Möglichkeit eigene Styles direkt in den WordPress Customizer einzutragen sorgt dafür, dass zumindest kleinere Child Themes, die nur ein paar Zeilen eigenen CSS-Code in der style.css-Datei enthalten, nicht mehr erstellt werden müssen. Da jedoch die meisten Premium WordPress Themes, wie auch unsere eigenen (WebGeckos WordPress Themes) dieses Feature bereits vorher schon integriert hatten, kann es gut möglich sein, dass sich an der Vorgehensweise nicht viel ändert.

Bei allen anderen oben genannten Anwendungsfällen kommt man ohnehin nicht daran vorbei, ein WordPress Child Theme zu erstellen.

Bewerte diesen Beitrag

Das könnte Dich auch interessieren...

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.