Was ist ein WordPress-Child-Theme?

Ein WordPress-Child-Theme ist ein untergeordnetes Theme, das die Funktionalität und das Design eines übergeordneten Themes, auch Parent-Theme genannt, erbt.

Beziehung zwischen Child-Themes und Parent-Themes

• Child-Theme: Nutzt die Dateien des Parent-Themes.
• Parent-Theme: Enthält die Basisfunktionen und das grundlegende Design.

Warum solltest du ein Child-Theme verwenden?

Ein Child-Theme bietet dir einige entscheidende Vorteile:

• Schutz vor Verlust von Änderungen bei Updates: Stell dir vor, du hast stundenlang an der Anpassung deines Themes gearbeitet und plötzlich kommt ein Update. Ohne Child-Theme sind all deine Änderungen weg! Mit einem Child-Theme bleiben deine Anpassungen sicher, auch wenn das Parent-Theme aktualisiert wird.
• Möglichkeiten zur individuellen Anpassung deiner Website: Ein Child-Theme gibt dir die Freiheit, das Design und die Funktionen deiner Website nach deinen Wünschen zu gestalten. Du kannst CSS-Stile ändern, neue Funktionen hinzufügen oder bestehende Template-Dateien überschreiben. So sieht deine Seite genau so aus, wie du es willst.

Was du wissen musst, bevor du ein Child-Theme erstellst

Um ein erfolgreiches WordPress-Child-Theme zu erstellen, solltest du über Grundkenntnisse in Webentwicklung verfügen. Hier sind einige wichtige Punkte:

• HTML: Verstehen der Struktur von Webseiten.
• CSS: Anpassung des Designs und Layouts.
• PHP: Dynamische Funktionen und Interaktionen.

Installation eines WordPress-Themes

1. WordPress installieren: Stelle sicher, dass WordPress auf deinem Server läuft.
2. Parent-Theme auswählen: Wähle ein geeignetes Theme als Basis für dein Child-Theme.

Auswahl eines geeigneten Code-Editors

Ein guter Code-Editor kann dir das Leben erheblich erleichtern. Beispiele:

• Visual Studio Code: Beliebt wegen seiner vielen Erweiterungen.
• Sublime Text: Leichtgewichtig und schnell.

Erstellung eines WordPress-Child-Themes Schritt-für-Schritt-Anleitung

1. Erstellen des Child-Theme-Verzeichnisses im Theme-Ordner

Zuerst musst du ein neues Verzeichnis für dein Child-Theme anlegen. Dies geschieht im wp-content/themes Ordner deiner WordPress-Installation.

FTP-Zugang oder Dateimanager nutzen:

1. Verbinde dich mit deinem Webserver über FTP (z.B. mit FileZilla) oder nutze den Dateimanager deines Webhosters.
2. Navigiere zum Verzeichnis wp-content/themes.

Neues Verzeichnis erstellen:

1. Erstelle einen neuen Ordner und benenne ihn nach deinem Child-Theme, z.B. mein-child-theme.

/wp-content/themes/mein-child-theme/

2. Anlegen der style.css-Datei mit dem erforderlichen Code für das Child-Theme

Jedes WordPress-Child-Theme benötigt eine style.css Datei. Diese Datei enthält die Informationen über dein Child-Theme und auch die CSS-Anpassungen.

Neue Datei erstellen:

1. Erstelle eine neue Datei namens style.css im Verzeichnis deines Child-Themes (mein-child-theme).

Kopfzeile hinzufügen:

1. Öffne die style.css Datei in deinem bevorzugten Code-Editor (z.B. Visual Studio Code) und füge diesen Code hinzu:

/* Theme Name: Mein Child Theme
Theme URI: https://example.com/mein-child-theme
Description: Ein Child Theme von Parent Theme
Author: Dein Name 
Author URI: https://example.com
Template: parent-theme
Version: 1.0.0 */
/* Hier kommen deine CSS-Anpassungen */

Die wichtigste Zeile ist Template, da sie angibt, was das Parent-Theme ist.

3. Erstellen der functions.php-Datei und Erklärung des Codes zum Laden von Parent-Stilen

Die functions.php Datei hilft beim Laden der Stylesheets und anderer Funktionen vom Parent-Theme.

1. Erstelle eine Datei namens functions.php im Verzeichnis deines Child-Themes.
2. Öffne die functions.php Datei in deinem Code-Editor und füge folgenden Code hinzu:

<?php
/**
* Child theme stylesheet einbinden
*/
function child_theme_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-theme-css', get_stylesheet_directory_uri() .'/style.css' , array('parent-style'));}
add_action( 'wp_enqueue_scripts', 'child_theme_styles' );
?>

Dieser Code lädt zuerst das Stylesheet des Parent-Themes (parent-style) und dann das Stylesheet des Child-Themes (child-style). So kannst du sicherstellen, dass alle CSS-Regeln aus dem Parent-Theme übernommen werden, bevor deine eigenen Anpassungen angewendet werden.

Mit diesen Schritten hast du ein funktionierendes Child-Theme erstellt, das sowohl die Stile als auch die Funktionen des Parent-Themes erbt.

Du kannst nun beginnen, dein Child-Theme anzupassen und zu erweitern!

4. WordPress Child theme aktivieren

Sobald der Ordner für das Child Theme erstellt und alle notwendigen Dateien darin abgelegt sind, kannst du das Theme aktivieren. Das geht genauso wie bei allen anderen WordPress Themes.

Unter Design > Themes kannst du jetzt dein neues Child Theme einschalten.

Sollte beim Aktivieren eine Fehlermeldung auftreten, überprüfe am besten die Einträge in der style.css.

Anpassungen und Erweiterungen nach Aktivierung des Child-Themes

Jetzt kommt der spaßige Teil: die Anpassungen! Mit deinem aktivierten Child-Theme kannst du benutzerdefiniertes CSS hinzufügen und das Aussehen deiner Website verändern, ohne die Originaldateien des Parent-Themes zu berühren.

Beispiele für CSS-Anpassungen

Farben ändern:

/* Hintergrundfarbe der Kopfzeile ändern */ 
header { 
background-color: #3498db; 
}

Schriftarten anpassen:

/* Schriftart und Größe der Überschriften ändern */ 
h1, h2, h3 { 
font-family: 'Arial', sans-serif; 
font-size: 24px; 
}

Abstände modifizieren:

/* Margin und Padding für Absätze anpassen */ 
p { 
margin: 20px 0; 
padding: 10px; 
}

Font ersetzen

Für die Überschriften der Artikel im Child-Theme möchte ich zum Beispiel Roboto verwenden. Daher integriere ich die Schriftart einfach über die functions.php:

function load_google_fonts() {
wp_register_style('googleFonts', 'http://fonts.googleapis.com/css?family=Roboto');
wp_enqueue_style( 'googleFonts');
}
add_action('wp_print_styles', 'load_google_fonts');

Tipps zur Implementierung

• Code sauber halten: Achte darauf, dass dein CSS gut strukturiert und kommentiert ist, damit du es später leichter anpassen kannst.
• Browser-Entwicklertools nutzen: Teste deine Änderungen mit den Entwicklertools deines Browsers, um sicherzustellen, dass alles wie gewünscht aussieht.
• Regelmäßige Backups: Mach regelmäßig Sicherungskopien deiner Dateien, falls mal etwas schiefgeht.

Alternativen zu WordPress Child Themes

Wenn du nur geringfügige Änderungen am Design vornehmen möchtest, musst du nicht unbedingt ein WordPress Child Theme erstellen. Es gibt praktische Alternativen wie das Simple Custom CSS Plugin, mit dem du die Styles deines Themes ganz einfach überschreiben kannst.

Eine weitere Möglichkeit ist der Customizer. Damit kannst du dein CSS direkt in WordPress einfügen.

Falls du das Theme Divi benutzt, kannst du CSS auch direkt unter “Theme Optionen > Standard > Eigenes CSS” oder ein paar Code-Schnipsel unter “Theme Optionen > Integration” hinzufügen.

Fazit:

Ein WordPress Child Theme zu nutzen, bringt viele Vorteile mit sich. Du kannst das Design und die Funktionen deines Themes nach Belieben anpassen, ohne das Original-Theme zu verändern. Falls ein Fehler auftritt, kannst du jederzeit zum Parent-Theme zurückkehren. Deine Änderungen bleiben auch bei Updates des Haupt-Themes erhalten. So profitierst du von Verbesserungen durch Updates, während deine eigenen Anpassungen bestehen bleiben.

Ein Child Theme ist nicht nur für die Standard-Themes von WordPress geeignet. Auch bei Premium-Themes wie Divi kannst du es verwenden. Als Kunde von Designers Inn findest du unsere Child Themes in deinem Mitgliederbereich.