WordPress Child Theme erstellen – ganz einfach

Wenn man eine WordPress Webseite erstellen möchte, sollte man am besten gleich auch ein  WordPress Child Theme erstellen. Es gibt natürlich eine Fülle fertiger WordPress Themes – und viele kostenpflichtige Premium Themes bieten bereits umfangreiche Anpassungsmöglichkeiten: über diverse Optionen lassen sich häufig ‚ganz einfach‘ Design-Details wie Schriftart und Farben anpassen. Und auch bei kostenlosen Themes lässt sich häufig immerhin die Schriftfarbe oder andere Design-Elemente über eingebaute Optionen ändern. Egal für welches Theme man sich am Ende entscheidet – hier und da möchte man gegebenenfalls Design–Anpssungen machen, sodass das Deisgn den eigenen Wünschen bzw. den Kundenwünschen entspricht und sich vonanderen Webseiten abhebt.

Der einfachste Weg ist sicherlich, direkt in den entsprechenden Templates und Stylesheets Änderungen vorzunehmen. Dies ist allerdings auch der ‚drechigste‘ Weg – ein alter Grundsatz lautet: never hack the core! Beim nächsten Update kann das sonst zu bösen Überraschungen führen: die mühsam eingearbeiteten Anpassungen werden beim Update unter Umständen direkt überschrieben, Design-Anpassungen gehen verloren und dann sieht plötzlch alles wieder genau so aus, wie am Anfang.

Der wirklich einfachste Weg, um schnell individuelle Anpassungen an einem WordPress Theme vorzunehmen ist, ein eigenes Child Theme einzurichten.

WordPress Child Theme erstellen – ganz einfach

Vor einigen Jahren war es noch etwas umständlich, schnell mal ein eigenes WordPress Child Theme zu erstellen. Inzwischen ist das aber sehr viel einfacher geworden. Im Prinzip muss man nur zwei Dateien anlegen – schon kann man mit den eigenen Style-Anweisungen die voreingestellten Theme-Styles überschreiben. Genug der Vorrede – so geht’s:

Wordpress Child Theme Verzeichnis erstellenZunächst legt man im Themes-Verzeichnis ein neues leeren Verzeichnis an. Dieses Verzeichnis wird dann alle Dateien beinhalten, die unser Child Theme benötigt. Das Verzeichnis sollte daher schon so benannt sein, wie das Child Theme heissen soll. In diesem Falle nennen wir das Child Theme einfach mal „Mein Theme“ und das Verzeichnis dementsprechend „mein-theme“.

1) Child Theme Stylesheet style.css einrichten

In dem neuen Verzeichnis legt man dann ein Stylesheet an, das folgenden Code enthalten sollte:

/*
 Theme Name:   Mein Theme
 Theme URI:    http://cpu20.de/mein-theme/
 Description:  Twenty Fifteen Child Theme
 Author:       Vorname Nachname
 Author URI:   http://cpu20.de
 Template:     twentyfifteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  mein-theme
*/

Wozu sind die einzelnen Angaben notwendig? Naja – die meisten Angaben sind nicht wirklich notwenig, damit das Child Theme auch funktioniert. Es ist aber gut, sich an die verabredeten Strukturen zu halten, damit später mal jemand nachvollziehen kann, womit er es hier eigentlich zu tun hat. Ausserdem werden einige der Angaben des sogn. Stylesheet-Headers später im Administrationsbereich von WordPress angezeigt.

Ich habe mir angewöhnt, das Child Theme nach dem jeweiligen Projekt bzw. dem Kunden zu benennen. Damit ist dann allen beteiligten klar, dass es sich hier um Anpassungen handelt, die speziell für diesen Kunden vorgenommen wurden. Das kann aber natürlich jeder so machen, wie er möchte. Kurz ein paar Details zu den Angaben:

  • Theme Name ist der Name des Themes in diesem Falle des Child Themes.
  • Theme URI ist die Web-Adresse, unter der man mehr über dieses Theme erfährt.
  • Unter Description sollte eine kurze Beschreibung des Themes zu finden sein.
  • Der Author ist natürlich der Autor des Child Themes und über die Author URI sollte der Autor zu finden sein.
  • Bei Template muss das Verzeichnis des Parent Themes eingetragen werden, das überschrieben bzw. ergänzt werden soll (wichtig!). In diesem Falle wäre also twentyfifteen das Parent Theme.
  • Version sollte selbsterklärend sein – die Version des Themes.
  • Unter Licence und Licence URI ist die Nutzerlizenz des Themes hinterlegt. In des meisten Fällen sollte das die GNU General Public License sein.
  • Mit Tags lässt sich das Theme beschreiben – das erleichtert ggf. ein späteres Auffinden in Themes-Verzeichnissen.
  • Und die Text Domain ist wiederum wichtig, damit das Theme auch in andere Sprachen übersetzt werden kann. Sie muss eindeutig sein und sollte sich am Namen des Themes orientieren.

Der erste Schritt zum WordPress Child Theme ist gemacht – jetzt müssen wir nur noch Child Theme und Parent Theme miteienander verbinden – und das passiert in der Datei functions.php…

2)  Child Theme functions.php einrichten

Die zweite Datei im Child Theme Verzeichnis ist die functions.php, die wenigstens den Code enthalten muss, der das Child Theme mit dem Parent Theme verbindet. Das Child Theme würde zwar theoretisch auch ohne diese Verbindung funktionieren – es würden aber keine Style-Anweisungen und keine Funktionen des Parent Themes übernommen werden – somit wäre das Child Theme kein Child mehr, sondern ein eigentständiges Theme.

Hier also der Code:

<?php
function theme_enqueue_styles() {

    $parent_style = 'parent-style';

    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 )
    );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
?>

Was dieser Code-Schnippsel macht: zunächst wird das Stylesheet des Parent Themes geladen, dann das Stylesheet des Child Themes. Damit ist gewährleistet, dass zunächst alle Style-Anweisung ‚reguler‘ befolgt werden. Anschliessend werden die individuellen Anpassungen berücksichtigt.

In einem letzten Schritt muss das neue Theme nun noch aktiviert werden. Sobald das Verzeichnis auf den Webserver geladen wurde sollte es im Administrationsbereich unter Design > Themes zu finden sein. Nachdem es aktiviert wurde greifen alle Anpassungen, die man im Stylesheet hinterlegt hat. Ausserdem lassen sich der functions.php nun auch beliebige Funktionen hinzufügen, die das Theme ggf. bereichern können.

Wer möchte, kann nun auch noch ein paar Schritte weiter gehen. Grundsätzlich lässt sich in weinem WordPress Child Theme alles das anpassen, was ein WordPress Theme zu bieten hat. Dazu aber mehr in einem anderen Tutorial. Zunächst würde ich mal empfehlen, einen Screenshot des Child Themes zu hinterlegen. Dazu legt man einfach ein entsprechendes png-Bild im Theme-Verzeichnis an und benennt es screenshot.png – damit sieht das Theme auch im Administrationsbereich dann ‚ordentlich‘ aus.

Schreibe einen Kommentar

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