Wordpress - Child Themes

Links

https://codex.wordpress.org/Child_Themes

Bessere Anleitung

Quelle: https://die-netzialisten.de/wordpress/anleitung-childtheme-anlegen-update/ (2017-03)

Zusammenfassung

Zusammenfassung Um ein Childtheme anzulegen, sind folgende Schritte notwendig:

• Ein neues Verzeichnis für das Childtheme anlegen und benennen (Name frei wählbar).
• Das Verzeichnis muss auf derselben Ebene liegen wie das Verzeichnis des Elternthemes.
• Im Childtheme-Verzeichnis eine leere Datei anlegen und diese Datei style.css nennen.
• In die style.css die Zeilen für den CSS-Header (siehe Beispiel für eine Childtheme CSS-Datei) einfügen. Dabei darauf achten, dass hinter „Template“ exakt der Name (slug) des Verzeichnisses des Elternthemes steht.
• Eine leere Datei anlegen und diese functions.php nennen.
• Im Childtheme die Datei functions.php anlegen und dort den Code eintragen, der für die Einbindung/Verknüpfung der CSS-Dateien aus Eltern- und Childtheme sorgt (siehe

Das CSS des Elternthemes mit dem Childtheme verknüpfen).

• Jetzt ist das Childtheme einsatzfähig und im Backend auswählbar.
• Wer Lust hat, legt noch einen Screenshot (screenshot.png) ins Childtheme-Verzeichnis. Dann sieht es im Backend in der Themeauswahl hübscher aus.

themes Ordner:

Beispiel

style.css

/*
Theme Name: Das neue Childtheme
Description: Ein schönes Childtheme
Author: Kirsten Schelper
Author URI: http://www.schelperdesign.net
Template: Name_des_Parent-Theme-Ordners
Version: 1.0
Tags:
*/

functions.php In dieser Datei binden wir das Stylesheet der Childthemes ein und zwar so, dass es nach der style.css des Parent-Themes geladen wird. Wäre die Reihenfolge anders herum, würden wir unsere Änderungen im Childtheme nicht sehen, weil das CSS vom Childtheme vom Parent-Theme überschrieben würde.

function twentyfifteen_child_styles() {
wp_deregister_style( 'twentyfifteen-style');
wp_register_style('twentyfifteen-style', get_template_directory_uri(). '/style.css');
wp_enqueue_style('twentyfifteen-style', get_template_directory_uri(). '/style.css');
wp_enqueue_style( 'childtheme-style', get_stylesheet_directory_uri().'/style.css', array('twentyfifteen-style') );
}
add_action( 'wp_enqueue_scripts', 'twentyfifteen_child_styles' );

Hinweise

Bei manchen Themes, die mit mehreren CSS-Dateien arbeiten, kann es nämlich nötig sein, zuvor die CSS-Dateien des Eltern-Themes zu deregistrieren und noch einmal neu zu registrieren. So stellt man sicher, dass die Reihenfolge stimmt, in der die Styles geladen werden – Eltern-Theme zuerst, erst danach die vom Childtheme. In der oben gezeigten Funktion wird zuerst das CSS des Eltern-Themes geladen. Das erreicht man dadurch, dass man dem Child-CSS eine dependency (Abhängigkeit) zuweist, nämlich das Parent-CSS. Im Codebeispiel ist das der Teil, der in dem array steht:

array('twentyfifteen-style') Was genau in dem array stehen muss, ist natürlich von Theme zu Theme verschiedenen. Bei Twentyfifteen heisst der handle, mit dem die Styles eingebunden werden, ‚twentyfifteen-style‘. Zu finden ist diese Information in der functions.php von Twentyfifteen in Zeile 209.

Minimales Child Theme

• Ordner mit Template Name erstellen (recommended: meinTemplateName-child)
• Mindestens style.css und functions.php anlegen
• Header für style.css

/*
 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:     name_of_parent_template_folder
 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
*/

• Enqeue Parent and Child Theme Styles

functions.php

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_uri(), array( 'parent-style' ) );
}

Styles im Stylesheet einbinden

Einfache Möglichkeit wenn das Parent Stylesheet nur eine style.css Datei benutzt:

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

}

Bei mehreren Stylesheets im Eltern Theme:

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