WordPress-Tipp: Welche Vorteile bietet ein Child-Thema

Artikel 11 des Blueflexx-WebDesign-Blog (zur Übersicht)


Tech-Writer Thomas

Tech-Writer am 23.12.2024



Gesamt: 149
Dieses Jahr: 121
Diesen Monat: 35
Diese Woche: 25
Heute: 4


Ein Child-Thema ist ein leistungsstarkes Werkzeug in der Welt von WordPress. Es handelt sich um ein Thema, das die Funktionalitäten und das Design eines bestehenden Themes – des sogenannten Parent-Thema – übernimmt und erweitert. Aber warum sollte man ein Child-Thema verwenden? In diesem Blog-Beitrag werfen wir einen Blick auf die Vorteile, die ein Child-Thema bietet und wie dieses eingebunden wird.


Copyright und Lizenz: Von "BlueFlexx-WebDesign" mit KI-Hilfe erstellte Grafik zum Child-Thema WordPress-Tipp

Vorteile des WordPress Child-Thema

Sicheres Anpassen des Designs und der Funktionalität

Einer der größten Vorteile eines Child-Thema ist die Möglichkeit, Anpassungen sicher vorzunehmen, ohne das Original-Theme zu ändern. Da das Parent-Thema unangetastet bleibt, können Updates problemlos durchgeführt werden, ohne dass individuelle Anpassungen verloren gehen.

Einfache Aktualisierungen des Parent-Thema

WordPress-Themes werden regelmäßig aktualisiert, um Sicherheitslücken zu schließen und neue Funktionen hinzuzufügen. Wenn Anpassungen direkt im Parent-Theme vorgenommen werden, gehen diese bei einem Update verloren. Ein Child-Thema hingegen sorgt dafür, dass alle individuellen Änderungen bestehen bleiben, während das Parent-Theme auf dem neuesten Stand bleibt.

Flexibilität bei der Entwicklung

Mit einem Child-Thema können Sie gezielt nur die Dateien anpassen, die Sie ändern möchten. Das reduziert den Aufwand und minimiert potenzielle Fehlerquellen. Beispielsweise können Sie nur die CSS-Datei oder eine spezifische Template-Datei wie header.php überschreiben, ohne das gesamte Theme anfassen zu müssen.

Lern- und Experimentiermöglichkeiten

Für Entwickler und Designer, die ihre WordPress-Kenntnisse erweitern möchten, bietet ein Child-Thema eine ideale Spielwiese. Da Sie mit einem bestehenden Framework arbeiten, können Sie experimentieren, ohne von Grund auf neu beginnen zu müssen. Gleichzeitig bleibt das Risiko gering, da das Parent-Thema als Backup dient.

Saubere und organisierte Struktur

Die Verwendung eines Child-Thema sorgt für eine saubere Trennung zwischen den Basis-Funktionalitäten des Themas und den spezifischen Anpassungen. Das macht es einfacher, den Code zu pflegen und Änderungen überblickbar zu halten.

Wie erstellt man ein Child-Thema?

Ein WordPress Child-Thema zu erstellen, ist einfacher, als viele denken. Es erfordert lediglich einen neuen Ordner in Ihrem WordPress-Theme-Verzeichnis. In unserem Fall hat es den Namen twentytwentyfive-child, weil es von diesem Thema abgeleitet ist. Bei der Namensgebung ist man jedoch frei. 

WordPress Child-Thema Ordner

Copyright und Lizenz: Selbst erstelltes Screenshot eines WordPress Child-Thema Ordner

In diesem Ordern werden die Dateien style.css (Stylesheet-Datei) und functions.php (PHP-Skript) angelegt, um entsprechende individuelle Änderungen und Ergänzungen vornehmen zu können. Die Datei screenshot.png ist optional und wird in WordPress unter Design > Themes als Vorschaubild angezeigt.

Style.css Datei

Mithilfe der Datei style.css kann das Erscheinungsbild der Webseite angepasst werden. Wer sich mit dem Thema CSS auskennt, kann hier individuelle Formatierungen oder auch Animationen hinterlegen, die vom Thema übernommen werden. Dabei werden natürlich alle Formatierungen von dem übergeordneten Thema übernommen, sofern sie hier nicht überschrieben werden. Hier ein einfaches Beispiel für den Anfang:

/*======================================
Theme Name: Twentytwentythree Chield Theme
Theme URI:
Description: Ein Child Theme für Twenty Twenty-Five
Version: 1.0
Author: Thomas K
Author URI: https://www.blueflexx.com
Template: twentytwentyfive
License: GNU General Public License v2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html
======================================*/

/* You can start adding your own styles here. Use !important to overwrite styles if needed. */

/* Formatierung Bilder */
.abgerundet img {
 border-top-left-radius:100px;
 border-bottom-right-radius:100px;
 object-fit:cover
}

Es ist wichtig, dass das richtige übergeordnete Thema unter Template angegeben wird. In diesem Fall verweist die CSS-Datei auf das Thema "twentytwentyfive"

Als Beispiel für eine Formatierung wurde die Klasse "abgerundet" hinzugefügt (z. B. <img class="abgerundet" src="PFAD/NAME.ERWEITERUNG" />). Damit  wird das Bild oben links und unten rechts abgerundet. 

Functions.php Datei

Zusätzlich benötigen Sie eine functions.php, um die Stylesheets und Skripte von dem übergeordneten Thema (Parent-Theme) zu laden und weitere Funktionen hinzuzufügen. Mit der functions.php können Sie beispielsweise benutzerdefinierte Widgets, Menüs oder neue Funktionen für Ihre Website erstellen und bestehende Funktionen des Parent-Thema erweitern.  Hier ist ein kleines Beispiel aufgeführt:

<?php
/**
 * TwentyTwentyFive Chield functions and definitions
 *
 * @package Blueflexx
 *
 */

/***  Skripte und Stile in die Warteschlange stellen. */
function blueflexx_child_scripts() {
	// Enqueue Parent Stylesheet
	wp_enqueue_style( 'blueflexx-parent-stylesheet', get_stylesheet_directory_uri() . '/style.css' );
} // theme_coder_child_scripts

add_action( 'wp_enqueue_scripts', 'blueflexx_child_scripts' );

/* Shortcode zur Ausgabe des aktuellen Jahres */
function jahr_shortcode() {
  $jahr = date('Y');
  return $jahr;
}
add_shortcode('jahr', 'jahr_shortcode');

?>

Die PHP-Datei ist entscheidend für das Hinzufügen von benutzerdefiniertem Code. Wichtig ist, dass die Stylesheet-Datei über die WordPress-Funktion add_action hinzugefügt wird. Dabei wird als 2. Parameter die Funktion zum Laden der style.css angegeben.

Als zusätzliches Beispiel enthält die Datei eine Funktion, die das aktuelle Jahr als Shortcode einbindet. In diesem Fall ersetzt WordPress der String [jahr] immer automatisch durch das aktuelle Jahr ersetzt.

Fazit

Ein Child-Thema bietet eine sichere, flexible und effiziente Möglichkeit, WordPress-Themes individuell anzupassen. Es schützt Ihre Arbeit vor Verlusten durch Updates und erleichtert die Pflege und Weiterentwicklung Ihres Designs. Egal, ob Sie ein Anfänger oder ein erfahrener Entwickler sind – die Nutzung eines Child-Themes lohnt sich in den meisten Fällen. Wir als BlueFlex-WebDesign nutzen immer ein Chield-Thema. Meistens wird dabei auf ein Standart-Thema von WordPress referenziert. Dies hat den Vorteil, dass diese kostenlos sind und regelmäßig aktualisiert werden. Damit erhält man die größte Sicherheit für die Zukunft und muss weniger Sorgen haben, dass das Thema nicht mehr an Änderungen angepasst werden oder kostenpflichtige PlugIns benötigt. Wenn wir Ihr Interesse geweckt haben, würden wir uns über einen Kontakt sehr freuen.

Werbung