Das Childtheme

Auf Grundlage eines Themes erstellen wir im Kurs ein sog. Childtheme, in dem alle Änderung an der “elterlichen” Vorlage gesichert werden.

Parent- und Childtheme

Das Parent wird das Theme bezeichnet, auf dessen Grundlage Du das Childtheme entwickelst.
Eigenschaften wie die Aufteilung der Seite und Position der Navigation, sowie Features wie an einem Gitter ausgerichteten Vorschaubilder sollte das Parenttheme auf jeden Fall mitbringen.

Da WordPress stetig weiterentwickelt wird, werden auch Themes aktualisiert um kompatibel zu bleiben.
Möchtest Du ein Theme modifizieren, empfiehlt es sich ein sog. Child Theme anzulegen. Bei einem Theme-Update gehen sonst die Änderungen verloren.

Anpassungen lassen sich im Stylesheet des Childthemes, der Datei style.css, abspeichern (z.B. Farben, Schriften, Größe und/oder Sichtbarkeit bestimmter Elemente und Präsentation von Bildern z. B. in einem Slider).

Bei einer Aktualisierung des Parent bleiben diese Anpassungen erhalten.

Child Theme anlegen

1. Erstelle einen neuen Ordner im Verzeichnis ‘themes’ und bezeichne ihn eindeutig und ohne Leerzeichen (z.B. twentyfifteen-child).

Deine wordpress Installation/wp-content/themes/themename-child

2. Füge diesem Verzeichnis eine neue Datei hinzu und nenne sie style.css. In diese Datei schreibst Du folgenden Code und passe die Angaben an:

/* 
Theme Name:   Der Name Deines Child Theme, z.B. Themename Child 
Description:  Beschreibung 
Author:       Dein Name 
Author URI:   http://www.beispiel.de 
Template:     Name des Patent-Theme-Verzeichnisses, z.B. themename 
Version:      1.0.0 
License:      GNU General Public License v2 or later 
License URI:  http://www.gnu.org/licenses/gpl-2.0.html 
Tags:         Schlagworte zu Deinem Child Theme 
Text Domain:  z.B. themename-child */ 

3. Füge eine weitere Datei hinzu und nenne Sie functions.php. Hier kopierst Du folgenden Code rein:

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
 
    $parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.
 
    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 ),
        wp_get_theme()->get('Version')
    );
}

4. Optional kannst Du ein Vorschaubild für Dein Child Theme benutzen. Sobald Deine Website fertig bebaut ist, mache einen Screenshot mit der Größe 300 x 225 px, nenne ihn screenshot.png und lade ihn ins Verzeichnis Deines Child Themes hoch.

Mehr Information zum Child Theme findest Du unter https://developer.wordpress.org/themes/advanced-topics/child-themes/