WordPress Child Theme in 3 Schritten erstellen

Seit der WordPress Version 3.0 besteht die Möglichkeit sogenannte Child Themes anzulegen. Diese sollen kleinere Änderungen an der style.css und anderen Dateien vor Theme-Updates schützen und Anpassungen einfacher machen. In diesem Artikel zeige ich kurz wie genau man ein solches Child Theme anlegt und für seine Zwecke nutzt.

Früher hat man ein Child Theme in WordPress genutzt, indem man die Standard style.css und weitere php Dateien per @import in das Child Theme geladen hat. Nun wurde der WordPress Codex bezüglich der ein wenig angepasst und die Umsetzung ist etwas komplizierter geworden. Um eine bessere Performance und kürzere Ladezeiten zu ermöglichen hat die WordPress Community eine neue Methode Child Themes anzulegen vorgestellt, welche die functions.php nutzt. Während die alte Methode zunächst die gesamte style.css des Parent-Themes geladen hat, werden bei der neuen Methode beide Dateien fast gleichzeitig abgefragt. Doch kommen wir nun zu der eigentlichen Umsetzung des Child Themes.

  1. Child Theme Ordner auf dem Server anlegen

Wie auch schon bei der alten Methode muss man zunächst einen eigenen Themeordner für sein Child Theme anlegen und, welches man anschließend die angepassten Dateien ablegt. Dabei wird im WordPress Codex empfohlen den Ordnernamen des Child Themes genauso zu wählen wie den des Parent-Themes und dabei ein „-child“ anzuhängen.

  1. Style.css erstellen und mit dem Parent-Theme verknüpfen

Als nächstes folgt der zweite Schritt bei dem man eine neue style.css im neuen Ordner anlegt und folgenden Code (angepasst) einfügt:

/*
 Theme Name:   Twenty Fifteen Child
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  Twenty Fifteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 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:  twenty-fifteen-child
*/

Die meisten dieser Angaben sind ziemlich selbsterklärend. Das einzige worauf man unbedingt achten sollte, ist das Template Name. Dieser sollte genauso lauten wie der Theme-Ordner des Parent-Themes.

Die functions.php anlegen und Child Theme aktivieren

Als Letztes muss noch eine functions.php mit dem folgenden Code angelegt werden. Die erstellte PHP Datei legt man inklusive folgendem Code in den oben erstellten Child Theme Ordner.

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}
?>

Nachdem das nun geschehen ist, muss man nur noch das Child Theme im Backend aktivieren und schon kann man die style.css des neuen Ableger-Themes mit neuen Code-Anweisungen befüllen. Auch PHP Dateien eines Template lassen sich in dem Child Theme bearbeiten. Sobald man zum Beispiel die footer.php in den Child Theme Ordner einfügt und abändert greifen die Neuerungen schon.

Ausnahme

Wie bei Allem gibt es auch hier eine Ausnahme. Und zwar betrifft diese alle Templates, die mehr als eine stilleres besitzen. hierfür gibt es im WordPress Codex einen extra Abschnitt, indem ein Array zum Laden der css-Dateien verwendet wird. Hier geht es zur offiziellen Anleitung von WordPress.

 

0 Kommentare

Dein Kommentar

Want to join the discussion?
Feel free to contribute!

Schreibe einen Kommentar

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