Wordpress - Child Themes

Links

https://codex.wordpress.org/Child_Themes
https://die-netzialisten.de/wordpress/stylesheets-mit-enqueue_script-einbinden/

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

Reihenfolge garantieren

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.

Caching Probleme umgehen

      wp_enqueue_style( 'scheme-custom',
      get_stylesheet_directory_uri() . '/css/scheme-custom.css',
        $deps,
        wp_get_theme()->get('Version') // Bust Cache to ensure loading
        );

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')
    );
}

Optionen aus Parent Theme nachträglich übertragen

Wenn schon Einstellungen in den Optionen des Elternthemes gemacht wurden, kann man diese relativ einfach übertragen. Die Optionen werden in der Datenbank in der Tabelle wp_options gespeichert. Jedes Theme bekommt einen Eintrag der mit theme_mods_ beginnt und mit dem Namen des Themes aufhört. So findest du den Eintrag.

SELECT * FROM  `wp_options` WHERE option_name =  "theme_mods_themename"

Mit phpmyadmin einfach die Optionen aus dem Elterntheme Eintrag kopieren und in das Child Theme eintragen.

Beispiele / Tipps und Tricks

wp_enqueue_style( 'child-style',

       get_stylesheet_directory_uri() . '/style.css',
       array( $parent_style ),
       wp_get_theme()->get('Version')
   );