In diesem Tutorial erstellen wir auf Basis des WordPress Themes Twentysixteen ein einfaches Child-Theme. Mit Child-Themes lässt sich hervorragend ein Theme optisch anpassen oder auch im Funktionsumfang erweitern.
Dabei wird alles was schon im Child-Theme vorhanden ist auch vom Child-Theme geladen, die übrigen Theme-Teile werden dann vom Parent-Theme geladen.
Was wird für ein Child-Theme mindestens benötigt?
Es wird zuallerst mal mindestens ein Theme-Ordner ( zB twentysixteen-child ) indem sich die Datei style.css befindet benötigt. Diese benötigt natürlich, wie jedes andere Theme auch, einen Stylesheet-Header. Dieser könnte für dieses Beispiel so aussehen.
/* Theme Name: Twenty Sixteen Child Theme URI: https://zoechbauer.name/ein-child-theme-fuer-wordpress-erstellen-am-beispiel-vom-twentysixteen-theme/ Description: Twenty Sixteen Child Theme Author: Zöchbauer Manfred Author URI: https://zoechbauer.name Template: twentysixteen Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: child, theme, .... Text Domain: twenty-sixteen-child */
Die wichtigste Zeile ist hierbei folgende.
Template: twentysixteen
Anhand dieser Zeile weis das Child-Theme wo sich das Parent-Theme befindet. Dies ist allerdings nur die Mindestvoraussetzung für die alte Methode.
Die alte Methode
Sie funktioniert natürlich nach wie vor. Dabei wird in der style.css des Child-Themes die style.css des Parent-Themes per @import_url() geladen – zB:
@import url('../twentysixteen/style.css');Empfohlen wird allerdings schon einige Zeit die neue Methode.
Die neue Methode
Im Vergleich zur alten Methode wird das Parent-Stylesheet nicht mehr per @import_url() geladen sondern über die functions.php. Diese Methode erweitert natürlich auch die Mindestvoraussetzung um die Datei functions.php, welche sich natürlich ebenfalls im Child-Theme-Ordner befinden muss.
Wie funktioniert die neue Methode?
Der Wordpress Codex lässt uns auch zu diesem Thema nicht im Stich – http://codex.wordpress.org/Child_Themes#How_to_Create_a_Child_Theme. Mit get_template_directory_uri() können wir die style.css des Parent-Themes laden, mit get_stylesheet_directory_uri() die style.css des Child-Themes. Dadurch ergibt sich folgender Inhalt für die functions.php des Child-Themes.
<?php
function twentysixteen_child_enqueue_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' ) );
}
add_action( 'wp_enqueue_scripts', 'twentysixteen_child_enqueue_styles' );
?>Wenn wir jetzt in unserer style.css des Child-Themes irgenwelche Styles vornehmen so sehen wir nach dem speichern und neuladen der Webseite, dass wir erfolgreich Child-Theme angelegt haben.
Als kleine Ergänzung möchte ich noch erwähnen: Ein Child-Theme von einem Child-Theme funktioniert, zumindest derzeit, NICHT! Es muss hierfür immer ein Elterntheme (Parent-Theme) verwendet werden!
Ein Child-Theme in der Praxis nutzen
Nur das Stylesheet des Elternthemes zu laden ergibt keinen Sinn. Kommen wir zu einem Praxisbeispiel.
In diesem Beispiel möchte ich die Schriftart Font-Awesome über das Child-Theme laden und Icons davon einbinden. Dazu wird erst mal Font-Awesome heruntergeladen und im Child-Theme-Ordner entpackt (wie bei so vielem steht auch für Font-Awesome ein CDN zur Verfügung, was grundsätzlich vorzuziehen ist, da sich die Ladezeit der eigenen Webseite dadurch, je nach der Geschwindigkeit und Anbindung des eigenen Servers, teilweise erheblich verringern kann).
Die functions.php des Child-Themes ändert sich dadurch natürlich dementsprechend.
function twentysixteen_child_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'font-awesome-child', get_stylesheet_directory_uri() . '/font-awesome-4.5.0/css/font-awesome.min.css', array(), null );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( 'parent-style', 'font-awesome-child' ) );
}
add_action( 'wp_enqueue_scripts', 'twentysixteen_child_enqueue_styles' );Eine CDN-Version
function twentysixteen_child_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'font-awesome-child', '//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css', array(), null );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( 'parent-style', 'font-awesome-child' ) );
}
add_action( 'wp_enqueue_scripts', 'twentysixteen_child_enqueue_styles' );Jetzt werde ich noch einen kleinen Slogan zum Theme hinzufügen. Dazu kopieren wir für dieses Beispiel die header.php vom Twentysixteen Theme in das Child-Theme und bearbeiten sie anschließend.
<?php if ( is_home() || is_front_page() ) { ?>
<div id="mein-slogan">
<p>Das ist der Slogan der Hauptseite<br>
<i class="fa fa-coffee"> Trinken Sie auch so gerne Kaffee wie ich?</i>
</p>
</div>
<?php } ?>Mit diesem Code in der header.php des Child-Themes lassen wir auf der Hauptseite diesen mehr oder weniger geistreichen Slogan anzeigen. Bei der Ansicht von Beiträgen, Seiten, Archiven usw. wird dieser nicht angezeigt. Wie auch immer – es funktioniert! Auch die style.css wurde noch ein bisschen ergänzt.
body {
background-color: yellow;
}#mein-slogan {
font-size: 2em;
text-align: center;
font-weight: bolder;
}#mein-slogan .fa {
font-size: 1.5em;
}Genau nach diesem Schema würde sich alles mögliche zu dem Child-Theme hinzufügen lassen – zusätzliches Menü, Sidebar oder was auch immer.
Der wesentliche Vorteil von einem Child-Theme besteht aber darin, dass man nicht das Theme direkt bearbeitet. Auf diese Weise bleiben dann Änderungen bei einem Theme-Update auch erhalten.
Wer möchte kann sich das Twentysixteen Kaffee-Slogan Child-Theme auch gerne herunterladen, benutzen, oder erweitern. Selbstverständlich auf eigene Gefahr!
Download – twentysixteen-child
Bitte beachten Sie, dass dieser Beitrag bereits vor über einem Jahr geschrieben wurde und unter umständen nicht mehr aktuell ist.