what you see …

Parent-/Child-Themes (Tutorial)

in

In einem WordPress-Theme sind es primär die Dateien "style.css", "functions.php" und "theme.json", in welchen Änderungen im Erscheinungsbild (Farben, Schriften, Auszeichnungen usw.) einer Webseite gemacht werden können. Die Versuchung ist gross, hier kleinere oder grössere Modifikationen zu machen. Aber es gibt ein Problem: Beim nächsten Update des Themas sind alle Änderungen verloren und müssen wieder neu eingefügt werden.

WordPress bietet jedoch eine sehr elegante und einfache Lösung, dieses Problem zu lösen: Child-Themes. Wie funktionieren Child-Themes? Grundsätzlich ganz einfach: Es wird zusammen mit dem Parent-Theme geladen und überschreibt und/oder ergänzt Anweisungen im Parent-Theme. Ein Child-Theme enthält demzufolge nur die benutzerspezifischen Änderungen. Der Rest wird unverändert vom Parent-Theme übernommen.

Die folgende Anleitung zeigt, wie einfach die Erstellung eines Child-Themes mit den zugehörigen Dateien in der Praxis ist.

Child-Theme

style.css

Annahme: Sie verwenden das WordPress-Theme «Twenty Twentyfive». Selbstverständlich haben Sie einen FTP-Zugriff auf Ihr WordPress-Verzeichnis.

  1. Erstellen Sie im Verzeichnis Ihrer Webseite unter "wp-content/themes" ein neues Verzeichnis "twentytwentyfive-child".
  2. Wechseln Sie in dieses neue Verzeichnis.
  3. Erstellen Sie in diesem Verzeichnis eine neue Datei "style.css".
  4. Öffnen Sie diese Datei "style.css" mit einem beliebigen einfachen Texteditor und fügen Sie Folgendes ein:
/*
 * Theme Name: Twenty-Twentyfive-Child
 * Template:   twentytwentyfive * weitere Informationen (optional)*/
/* Ab hier folgt später benutzerspezifisches CSS. */

Wichtig: Der Name zum Template muss zwingend und genau dem Verzeichnisnamen des Parent-Themes entsprechen.

Speichern und schliessen Sie die Datei.

Optional sollten Sie noch ein passendes Bild mit den Abmessungen 1200 × 900 Pixel unter dem Namen "screenshot.png" in das gleiche Verzeichnis hochladen. Das erleichtert Ihnen die Übersicht auf der Theme-Seite.

Sie sehen nun im WordPress-Dashboard unter "Design/Themes" das Child-Theme "twentytwentyfive-child" und können es auch aktivieren. Keine Angst, noch passiert nichts.

functions.php

Wirksam wird es erst, wenn wir WordPress erlauben, dieses Child-Theme in den WordPress-Loop (Queue) aufzunehmen.

Dazu gehen Sie folgendermassen vor:

  1. Erstellen Sie im gleichen Verzeichnis wie oben eine neue Datei "functions.php".
  2. Öffnen Sie diese Datei "functions.php" mit einem beliebigen einfachen Texteditor und fügen Sie Folgendes ein:

Minimale Form (geeignet für allgemeine Aufgaben):

<?php
/**
 * Twenty Twenty-Five Child functions and definitions
**/

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly.
}

function child_styles() { wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css' );
}

add_action( 'wp_enqueue_scripts', 'child_styles' );

/* Ab hier folgen benutzerspezifische Programme und Funktionen /*

So, fertig. Das Child-Theme ist jetzt das aktive Theme.

In der Style-Datei "style.css" finden alle benutzerspezifischen Theme-Modifikationen Platz (CSS-Anweisungen), während die PHP-Datei "functions.php" vor allem Code-Schnipsel in Form von Programmen und Funktionen enthält (PHP; Java-Scripts usw.).

Schlagwörter:

Weitere Beiträge