Kinderthema

Ein Child-Theme in WordPress ist ein „Unter-Theme“, das das Styling und die Funktionalität eines anderen Themes, des sogenannten Parent-Themes, erbt und Ihnen gleichzeitig ermöglicht, Anpassungen sicher vorzunehmen, ohne die Dateien des ursprünglichen Themes zu verändern.

Um ein Child-Theme zu erstellen, legen Sie im Verzeichnis wp-content/themes einen Ordner an. Dieser Ordner sollte eine benutzerdefinierte style.css-Datei und eine functions.php-Datei enthalten. Das Stylesheet des Child-Themes wird nach dem des Parent-Themes geladen, sodass Ihr benutzerdefiniertes CSS Vorrang hat und sichergestellt ist, dass Aktualisierungen des Parent-Themes Ihre Änderungen nicht überschreiben.

Ein Child-Theme ist eine Reihe von Anweisungen, die das Original-Theme überlagern. So können Sie das Haupt-Theme (z. B. Twenty Seventeen, Twenty Nineteen oder Twenty Twenty-One) aktualisieren, ohne Ihre individuellen Anpassungen zu verlieren. Wir erklären Ihnen die wichtigsten Konzepte, die Schritte zur Erstellung eines Child-Themes und bewährte Methoden für die Theme-Entwicklung.

Worin besteht der Unterschied zwischen den Eltern- und Kindthemen?

Ein Parent-Theme ist ein vollständiges WordPress-Theme mit allen notwendigen Dateien und Stilen. Es verfügt über einen eigenen Ordner und eine style.css-Datei mit Metadaten. Nach der Aktivierung dient es als aktives Theme für Ihre Website und stellt Layouts und Stile bereit.

Ein Child-Theme erbt Funktionen und Stile vom Parent-Theme. Indem im Stylesheet-Header des Child-Themes auf den Parent-Ordner verwiesen wird, lädt WordPress die style.css des Parent-Themes vor dem CSS des Child-Themes. Dadurch können Sie Template-Dateien hinzufügen oder überschreiben und zusätzliches CSS einbinden, ohne die style.css des Parent-Themes zu verändern.

Vorteile der Verwendung eines Kinderthemas

Die Verwendung eines Child-Themes bietet mehrere praktische Vorteile, insbesondere bei der Pflege oder Erweiterung eines komplexen benutzerdefinierten Themes:

• Sichere Updates : Durch das Aktualisieren der Dateien des übergeordneten Themes werden Ihre benutzerdefinierten Änderungen im Verzeichnis des untergeordneten Themes nicht überschrieben. Sie können Sicherheitsupdates und Funktionserweiterungen bedenkenlos im übergeordneten Theme installieren, ohne das Erscheinungsbild Ihrer Website zu beeinträchtigen.

• Saubere Code-Trennung : Sämtlicher benutzerdefinierter Code, von CSS-Anpassungen bis hin zu PHP-Code-Snippets, befindet sich im Child-Theme. Diese Trennung erleichtert das Nachverfolgen, Debuggen und gegebenenfalls Entfernen Ihrer Änderungen, anstatt den Code des Parent-Themes durchsuchen zu müssen.

• Schnellere Theme-Entwicklung : Ein Child-Theme-Ersteller oder ein Child-Theme-Konfigurator-Plugin (wie der offizielle Child-Theme-Konfigurator) kann in Sekundenschnelle ein neues Child-Theme erstellen. So verbringen Sie weniger Zeit mit der Einrichtung von Ordnern und können sich stattdessen auf Design und Funktionalität konzentrieren.

• Wiederverwendbarkeit : Sobald Sie ein neues Child-Theme für eine Website erstellt haben, können Sie es als ZIP-Datei verpacken und auf andere WordPress-Installationen hochladen, wodurch Sie Zeit bei wiederkehrenden Aufgaben der Theme-Entwicklung sparen.

• Lernplattform : Für angehende Theme-Entwickler bieten Child-Themes eine einfache Möglichkeit, mit Template-Dateien, Action-Hooks und Filtern zu experimentieren, ohne eine Live-Website zu riskieren.

Funktionen eines Kindthemas

Ein Child-Theme in WordPress ist für die sichere und skalierbare Anpassung einer Website unerlässlich. Zu seinen Hauptfunktionen gehören:

• Übernahme von Stilen und Layouts des übergeordneten Themes : Es lädt und erweitert das Stylesheet und die Struktur des übergeordneten Themes, wobei alle ursprünglichen Designelemente und Layouts erhalten bleiben.

• Individuelles Styling und Template-Überschreibung : Entwickler können Stile, Header, Footer und mehr über die CSS-Datei des Child-Themes und kopierte Template-Dateien überschreiben.

• Hinzufügen oder Ändern von Funktionen : Die functions.php-Datei in einem Child-Theme ermöglicht es Ihnen, PHP-Code zu schreiben oder zu ändern, um das Verhalten von WordPress zu ändern, ohne die Kernlogik des Themes zu berühren.

• Trennung von benutzerdefiniertem Code und Theme-Updates : Anpassungen bleiben von Updates des übergeordneten Themes isoliert, sodass Sie Sicherheits- und Leistungsverbesserungen beibehalten können, ohne Änderungen zu verlieren.

• Vereinfachung von Theme-Tests und Prototyping : Ideal zum Experimentieren mit Layout- oder Funktionsänderungen auf einer WordPress-Website, ohne die Stabilität zu beeinträchtigen.

Erstellen eines Child-Themes (Schritt für Schritt)

Sie können ein Child-Theme manuell erstellen oder ein Plugin zur Konfiguration von Child-Themes verwenden. Im Folgenden wird die manuelle Vorgehensweise beschrieben, die Ihnen die volle Kontrolle über den Ordner und die Dateien des Child-Themes ermöglicht.

• Erstellen Sie das Child-Theme-Verzeichnis : Navigieren Sie in Ihrer WordPress-Installation zu wp-content/themes. Erstellen Sie dort einen neuen Ordner, beispielsweise twentyone-child, wenn Sie das Theme „Twenty Twenty-One“ als übergeordnetes Theme verwenden. Dieses Child-Theme-Verzeichnis dient als Container für alle Ihre benutzerdefinierten Templates und Assets.

• Stylesheet (style.css) hinzufügen : Erstellen Sie im Ordner des Child-Themes eine Datei namens style.css. Fügen Sie oben folgenden Header ein:

/*
Theme Name: Twenty Twenty-One Child
Theme URI: https://example.com/twentyone-child
Description: A child theme for the Twenty Twenty-One theme
Author: Your Name
Template: twentytwentyone
Version: 1.0.0
*/

Ändern Sie den Themennamen, die Vorlage und andere Felder so, dass sie mit dem Namen Ihres Child-Themes und dem Ordner Ihres Parent-Themes übereinstimmen.

• Stile für Eltern- und Kind-Theme einbinden : Erstellen Sie eine functions.php-Datei im Ordner des Child-Themes. Verwenden Sie diesen einfachen Codeausschnitt, um die Stile korrekt zu laden:

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')
);
}
add_action( 'wp_enqueue_scripts', 'my_child_enqueue_styles' );

Dadurch wird sichergestellt, dass zuerst das Stylesheet des übergeordneten Themes geladen wird, gefolgt von jeglichem benutzerdefinierten CSS im untergeordneten Theme.

• Aktivieren Sie Ihr Child-Theme : Komprimieren Sie den Ordner Ihres Child-Themes (falls Sie ihn über das Dashboard hochladen) oder aktualisieren Sie einfach den Bereich „Themes“ unter „Design“. Suchen Sie Ihr neues Child-Theme, klicken Sie auf „Aktivieren“ und überprüfen Sie, ob Ihre Website mit dem Design des Parent-Themes und den Änderungen Ihres Child-Themes korrekt geladen wird.

Child-Theme-Dateien verstehen

Ein voll funktionsfähiges Child-Theme umfasst typischerweise:

• style.css : Enthält die Header-Metadaten des Child-Themes und alle benutzerdefinierten CSS-Anweisungen.

• functions.php : Diese Datei enthält den oben stehenden Enqueuing-Code sowie alle zusätzlichen PHP-Datei-Snippets, Hooks oder Filter zur Erweiterung der Funktionalität.

• Vorlagendateien (optional): Kopieren Sie eine beliebige Vorlage des übergeordneten Themes, z. B. header.php, single.php oder page.php, in den Ordner Ihres Child-Themes, um sie zu überschreiben. WordPress verwendet dann Ihre Version anstelle der Vorlage des übergeordneten Themes.

• screenshot.png (optional): Im Themes-Dashboard wird ein Vorschaubild mit einer Größe von 1200×900 px angezeigt.

• assets/ (optional): Ein Unterordner für themenspezifische Bilder, JavaScript oder andere Ressourcen.

Alle anderen Dateien des übergeordneten Themes, die nicht überschrieben werden, bleiben erhalten, sodass Ihr Child-Theme alles vom übergeordneten Theme „erbt“, einschließlich Menüs, Widgets und Theme-Optionen.

Anfängerfreundliche Optionen zur Anpassung von WordPress ohne Child-Theme

Für Nutzer, die ihre WordPress-Website personalisieren möchten, aber keine fortgeschrittenen Theme-Anpassungen benötigen, gibt es einfachere Alternativen zur Verwendung eines Child-Themes. Diese Methoden eignen sich ideal für Anfänger, die Stil, Layout oder Funktionalität anpassen möchten, ohne Kerndateien zu bearbeiten oder eine separate Theme-Struktur zu erstellen.

Hier sind die gängigsten, anfängerfreundlichen Anpassungsmethoden:

• Theme-Anpassung (Design > Anpassen): Die meisten modernen WordPress-Themes bieten umfangreiche Einstellungen im integrierten Customizer, mit denen Sie Farben, Schriftarten, Logos und Homepage-Layouts anpassen können, ohne den Code bearbeiten zu müssen.

• Zusätzliches CSS-Panel: In diesem Feld im Customizer können Sie benutzerdefinierte CSS-Code-Schnipsel eingeben, die das Design des Themes überschreiben. Änderungen werden sofort angewendet und mit Ihren Theme-Einstellungen gespeichert.

• Benutzerdefinierte CSS-Plugins: Plugins wie Simple Custom CSS oder WP Add Custom CSS bieten eine sichere, eigenständige Möglichkeit, CSS-Regeln hinzuzufügen, selbst wenn Sie später Ihr Theme ändern.

• Websitespezifische Plugins: Anstatt Ihre Theme-Dateien zu bearbeiten, können Sie ein schlankes, websitespezifisches Plugin für grundlegende Funktionen wie Shortcodes, benutzerdefinierte Beitragstypen oder kleinere PHP-Anpassungen erstellen.

• Page Builder (z. B. Elementor, Beaver Builder): Diese Drag-and-Drop-Tools bieten visuelle Kontrolle über Seitenlayouts und Design und ermöglichen so eine einfache Anpassung, ohne dass eine einzige Zeile Code geschrieben werden muss.

Diese Methoden eignen sich perfekt für Nutzer, die Flexibilität wünschen, ohne sich mit der komplexen Verwaltung eines Child-Theme-Ordners oder der manuellen Bearbeitung von Dateien auseinandersetzen zu müssen. Sie gewährleisten, dass Änderungen (in den meisten Fällen) auch nach Theme-Updates erhalten bleiben und erfordern weder FTP-Zugriff noch Erfahrung in der Theme-Entwicklung.

Häufige Fehlerquellen und deren Behebung

Selbst erfahrenen Theme-Entwicklern können bei der Arbeit mit Child-Themes Fehler unterlaufen. Hier sind einige schnelle Überprüfungen:

• Falscher Vorlagenname : Stellen Sie sicher, dass die Vorlagenzeile in Ihrer style.css-Datei exakt mit dem Namen des übergeordneten Themenordners übereinstimmt (Groß-/Kleinschreibung beachten).

• Child-Theme nicht aktiv : Denken Sie nach der Installation daran, das Child-Theme zu aktivieren; andernfalls funktionieren Ihre benutzerdefinierten CSS- und PHP-Dateien nicht.

• CSS-Caching-Probleme : Browser- oder Plugin-Caches können CSS-Änderungen verbergen. Leeren Sie die Caches oder verwenden Sie versionierte Stylesheets in Ihren Enqueue-Aufrufen.

• Fehlende Abhängigkeiten : Wenn Sie eine Funktion des übergeordneten Themes verwenden, stellen Sie sicher, dass die richtige Hook-Priorität verwendet wird, damit der Code des übergeordneten Themes zuerst geladen wird.

Bewährte Verfahren bei der Themenentwicklung

Hier sind einige bewährte Vorgehensweisen für die Entwicklung von WordPress-Themes:

• Funktionalität in Plugins bündeln : Wenn Sie Funktionen hinzufügen, die nicht ausschließlich der Darstellung dienen, wie z. B. benutzerdefinierte Beitragstypen oder Shortcodes, sollten Sie diese als Plugin verpacken, anstatt Ihr Child-Theme damit zu überladen.

• Nutzen Sie einen Child-Theme-Konfigurator : Tools wie das Child-Theme-Configurator-Plugin können die Ordnererstellung, die Header-Einrichtung und die Warteschlangenroutinen automatisieren, was ideal für diejenigen ist, die sich mit der manuellen Bearbeitung von CSS-Datei-Headern oder PHP-Dateien weniger wohlfühlen.

• Versionskontrolle pflegen : Speichern Sie Ihr Child-Theme in Git oder einem anderen Versionskontrollsystem. Kennzeichnen Sie Releases vor größeren Änderungen, um im Fehlerfall problemlos zum vorherigen Zustand zurückkehren zu können.

• Dokumentieren Sie Ihre Änderungen : Bewahren Sie eine einfache README.md-Datei in Ihrem Child-Theme-Ordner auf, in der Sie Ihre Anpassungen auflisten, damit Mitarbeiter und Sie selbst in Zukunft Ihre Änderungen verstehen können.

Sollte man ein WordPress-Child-Theme verwenden?

Zu wissen, wann man ein Child-Theme einsetzt und wann nicht, spart Zeit und macht die Website zukunftssicher. Child-Themes sind zwar leistungsstarke Werkzeuge für Entwickler und fortgeschrittene Nutzer, aber nicht für jede Anpassungsaufgabe notwendig.

So treffen Sie die Entscheidung:

Verwenden Sie ein Child-Theme, wenn:

• Sie müssen Vorlagendateien (z. B. single.php, header.php) überschreiben oder erweitern.
• Sie planen, benutzerdefinierte PHP-Funktionen oder Filter-Hooks über functions.php zu schreiben.
• Ihr Theme wird regelmäßig aktualisiert, und Sie möchten die Änderungen beibehalten.
• Sie erstellen eine Kundenwebsite oder eine Testumgebung mit benutzerdefinierter Designlogik.

Vermeiden Sie ein Child-Theme, wenn:

• Sie benötigen lediglich grundlegende visuelle Anpassungen, wie z. B. Änderungen der Farbe oder Schriftart.

• Ihr übergeordnetes Theme unterstützt umfangreiche Anpassungseinstellungen oder die vollständige Bearbeitung der Website.

• Sie bevorzugen die Verwendung von Page-Buildern oder Design-Plugins für Layoutänderungen.

• Sie verwenden ein blockbasiertes Theme (z. B. Twenty Twenty-Four), bei dem Child-Themes aufgrund von Template-Teilen und globalen Stilen weniger relevant sind.

Profi-Tipp: Für alle, die sich noch nicht so gut auskennen, empfiehlt es sich, mit kleineren Änderungen über den Customizer oder ein CSS-Plugin zu beginnen. Sollten Ihre Anforderungen steigen, können Sie jederzeit auf ein Child-Theme umsteigen, ohne Ihre ursprünglichen Anpassungen zu verlieren.

Indem Sie Ihre technischen Kenntnisse und die langfristigen Ziele Ihrer Website gegeneinander abwägen, können Sie mit Zuversicht den richtigen Weg wählen, sei es ein Child-Theme oder eine einfachere Alternative.

Wann man kein Child-Theme verwenden sollte

Kinderthemen sind zwar wirkungsvoll, aber nicht immer die richtige Wahl:

• Kleinere CSS-Anpassungen : Für einige Stiländerungen kann ein Plugin wie „Simple Custom CSS“ ausreichen.

• Komplette Neugestaltung : Es kann übersichtlicher sein, wenn Sie ein völlig neues Layout erstellen, ein individuelles Design von Grund auf neu entwickeln oder mit einem vorgefertigten Design beginnen.

• Performancekritische Websites : Das Laden mehrerer style.css-Dateien und zusätzlicher PHP-Hooks kann den Overhead erhöhen. Überprüfen Sie die Assets Ihres Child-Themes und erwägen Sie, kritisches CSS einzubetten, wenn Geschwindigkeit Priorität hat.

Hochladen und Verteilen Ihres Kinderthemas

Sobald Ihr Kinderthema fertig ist:

• Ordner des Child-Themes zippen : Den Ordner komprimieren (z. B. twentyone-child.zip).

• Hochladen über das Dashboard : Gehen Sie zu Design > Designs > Neu hinzufügen > Design hochladen , wählen Sie Ihre ZIP-Datei aus und klicken Sie auf Jetzt installieren .

• Aktivieren & Testen : Nach der Aktivierung sollten Sie wichtige Seiten aufrufen, um sicherzustellen, dass alles wie erwartet angezeigt wird und funktioniert.

• Teilen Sie es mit anderen Child-Theme erstellt haben WordPress.org veröffentlichen , damit auch andere Website-Betreiber davon profitieren können.

Schlussbetrachtung

Die Verwendung eines Child-Themes ist der sicherste und effektivste Weg, ein WordPress-Theme anzupassen, ohne die Originaldateien zu verändern. So können Sie benutzerdefiniertes CSS hinzufügen, Templates modifizieren und das Parent-Theme sicher aktualisieren, ohne Änderungen zu verlieren. Ob Sie ein neues Child-Theme von Grund auf erstellen oder ein bestehendes optimieren – es ist ein innovativer Ansatz für Anfänger und Entwickler.

Benötigen Sie professionelle Unterstützung bei der Einrichtung Ihres WordPress-Child-Themes? Seahawk bietet professionelle Dienstleistungen, die Ihnen einen reibungslosen Start ermöglichen.