Wie Sie ein WordPress Child Theme erstellen + Tipps zur AnpassungMeta:

Einer der größten Vorteile von WordPress ist die große Auswahl an Themes, aus denen Sie auswählen können. Wenn Sie jedoch vorhaben, das Design oder die Funktionalität Ihres Themes anzupassen, ist es eine gute Idee, ein WordPress Child Theme zu verwenden.

In diesem Artikel erfahren Sie, wie ein WordPress Child Theme funktioniert und wann Sie es verwenden sollten. Außerdem lernen Sie verschiedene Möglichkeiten kennen, ein Child Theme zu erstellen und anzupassen sowie häufige Fehler zu beheben.

Wie funktioniert ein WordPress Child Theme?

Ein Child Theme erstellt ein separates Verzeichnis, das seine eigenen style.css– und functions.php-Dateien enthält. Dies sind die Kernkomponenten, mit denen Sie das Design und die Funktionalität Ihrer Website anpassen können.

Wenn jemand Ihre Website besucht, lädt WordPress zuerst das Child Theme. Alle Anpassungen oder Überschreibungen im Child Theme haben Vorrang. Für alles, was nicht geändert wird, verwendet WordPress die Dateien des Parent Themes.

Sie können beispielsweise ein Child Theme verwenden, um das Farbschema anzupassen, eine eigene Seitenvorlage zu erstellen oder benutzerdefinierte Funktionen hinzuzufügen, ohne das Parent Theme zu verändern.

Diese Konfiguration garantiert, dass Ihre Änderungen bei Theme-Aktualisierungen gesichert sind und bietet ein Sicherheitsnetz. Wenn etwas schief geht, können Sie das Child Theme deaktivieren und sich auf das Parent Theme verlassen, damit Ihre Website reibungslos läuft.

Wann brauchen Sie ein Child Theme?

Die Verwendung eines Child Themes ist nicht immer notwendig, aber sehr empfehlenswert, wenn Sie Folgendes tun möchten:

• Das Design oder die Funktionalität Ihres Themes auf sichere Weise anpassen, ohne das Parent Theme zu beeinträchtigen.
• Schnell ein neues Theme erstellen, indem Sie das Parent Theme als Grundlage verwenden.
• Kleinere Änderungen (wie das Optimieren von CSS oder das Hinzufügen benutzerdefinierter Templates) vereinfachen, ohne sich mit komplexen Kerndateien auseinandersetzen zu müssen.
• Anpassungen davor schützen, dass sie bei Aktualisierungen des Parent Themes überschrieben werden.
• Ein einheitliches Branding beibehalten, indem Sie das Design des Parent Themes übernehmen, während Sie spezifische Anpassungen vornehmen.
• Neue Funktionen testen, ohne Ihre Website zu gefährden.

Wie Sie ein WordPress Child Theme erstellen

Ein WordPress Child Theme erstellen ist einfach. In diesem Abschnitt wird beschrieben, wie Sie es manuell erstellen können, wodurch Sie die volle Kontrolle über die Einrichtung haben und Ihre Website schlank bleibt.

Wenn Sie lieber ein Plugin verwenden möchten, fahren Sie mit dem nächsten Abschnitt fort.

Voraussetzungen

Bevor Sie beginnen, stellen Sie sicher, dass Sie die folgenden Voraussetzungen erfüllen:

• Sie haben ein Parent Theme. Stellen Sie sicher, dass das Parent Theme, das Sie anpassen möchten, auf Ihrer WordPress-Website installiert und aktiv ist. Für dieses Tutorial verwenden wir das Standard-Theme Twenty Twenty-Three.
• Sie haben Zugriff auf Ihre WordPress-Dateien. Sie können entweder den Dateimanager Ihres Webhosters oder einen FTP-Client wie FileZilla verwenden. Der Dateimanager von Hostinger kann über das hPanel aufgerufen werden.
• Website-Backup erstellt. Erstellen Sie ein Backup Ihrer WordPress-Website, bevor Sie Änderungen vornehmen, um versehentlichen Datenverlust zu vermeiden.
• Sie haben eine Staging-Website. Das Einrichten einer WordPress Staging-Umgebung erlaubt es, frei zu experimentieren, ohne zu riskieren, dass die Live-Site kaputt geht. Benutzer des Hostinger WordPress Business-Tarifs und höher können das eingebaute Staging-Tool im hPanel verwenden.

1. Erstellen Sie den Ordner des Child Themes

Zunächst müssen wir den Ordner des Child Themes vorbereiten, in dem alle Assets gespeichert werden. Für dieses Tutorial verwenden wir Hostingers Dateimanager, den Sie über das hPanel-Dashboard aufrufen können.

Im WordPress-Stammverzeichnis (public_html) gehen Sie zu wp-content → themes. Als Nächstes erstellen Sie einen neuen Ordner mit einem Namen, der dem Ihres aktuellen aktiven Themes ähnelt. Dies wird Ihr Child Theme-Ordner sein.

2. Erstellen Sie die Stylesheet-Datei

Die Stylesheet-Datei, allgemein bekannt als style.css, steuert das Design und Layout Ihres WordPress-Themes. Hier definieren Sie auch die Beziehung zum Parent Theme und setzen dessen Stile außer Kraft.

Erstellen Sie eine neue style.css-Datei in Ihrem Child Theme-Ordner und fügen Sie das folgende Code Snippet hinzu.

/*<br>Theme Name: Twenty Twenty-Three Child<br>Theme URI: http://example.com/twenty-twenty-three-child/<br>Description: Twenty Twenty-Three Child Theme<br>Author: Your Name<br>Author URI: http://example.com<br>Template: twentytwentythree<br>Version: 1.0.0<br><em>/ /</em> Add your custom styles here */

Ersetzen Sie den Namen, den URI, die Beschreibung und das Template des Themes durch die Details Ihres eigentlichen Parent Themes und speichern Sie die Änderungen.

3. Erstellen Sie die Datei functions.php und rufen Sie das Stylesheet auf

Die Datei functions.php ist das Rückgrat der Funktionen Ihres Themes. Sie ermöglicht es Ihnen, benutzerdefinierte Funktionen hinzuzufügen oder bestehende Funktionen des Parent Themes zu ändern. Diese Datei ist auch dafür verantwortlich, die Stile und Skripte des Parent Themes in eine Warteschlange zu stellen, um sicherzustellen, dass sie geladen werden und korrekt funktionieren.

Erstellen Sie eine neue functions.php-Datei in Ihrem Child Theme-Ordner und fügen Sie das folgende Code Snippet hinzu, um Stile aus dem Parent Theme zu importieren.

<?php
// Your code to enqueue parent theme styles
function enqueue_parent_styles() {
   wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
?>

Vergessen Sie nicht, die Änderungen in der Datei zu speichern.

4. Aktivieren Sie das Child Theme

Wenn Sie die Dateien style.css und functions.php korrekt erstellt haben, sollte das Child Theme auf Ihrer WordPress-Website erscheinen.

Gehen Sie in Ihrem Admin-Dashboard zu Design → Themes und klicken Sie auf Aktivieren für das Child Theme.

Das war’s – Ihre WordPress-Website läuft jetzt mit einem Child Theme.

Alternative Möglichkeiten zur Erstellung eines Child Themes

Wenn Sie Ihre Website-Dateien nicht manuell bearbeiten möchten, kann ein WordPress-Plugin den Prozess vereinfachen. Je nach Art Ihres Themes gibt es zwei Möglichkeiten, also stellen Sie sicher, dass Sie die richtige wählen.

Um zu überprüfen, ob Sie ein klassisches oder ein Block-Theme verwenden, greifen Sie über den Dateimanager oder einen FTP-Client auf den Ordner Ihres Themes zu und suchen Sie nach einer Datei namens theme.json. Das Twenty Twenty-Three-Theme hat zum Beispiel diese Datei, was bedeutet, dass es ein Block-Theme ist.

Erstellen Sie ein klassisches Child-Theme mit einem Plugin

Wenn Sie ein klassisches Theme verwenden, folgen Sie diesen Schritten, um das Child-Theme mit dem WP Child Theme Generator zu erstellen:

• Installieren und aktivieren Sie das WP Child Theme Generator-Plugin.

• Navigieren Sie in Ihrem Admin-Dashboard zu Appearance → Child Theme Gen.
• Wählen Sie das Parent Theme aus dem Dropdown-Feld aus und passen Sie dann die Details des Child Themes nach Bedarf an. Stellen Sie sicher, dass Sie die Option Create and Activate aktivieren, um den Wechsel zu automatisieren.

• Nachdem Sie auf Create Child Theme geklickt haben, wird das Plugin Sie auf die Seite Themes weiterleiten, wo das aktive Child Theme angezeigt wird.

Beachten Sie, dass dieses Plugin zwar Block-Themes anerkennt, aber nicht optimal mit ihnen zusammenarbeitet. Wenn Ihr Parent Theme ein Block-Theme ist, empfehlen wir stattdessen die nächste Methode.

Erstellen Sie ein Child Block-Theme mit einem Plugin

Für diese Methode verwenden wir ein anderes kostenloses Plugin namens Create Block Theme. Dieses Plugin unterstützt die theme.json-Konfiguration, was es ideal für die Erstellung von Child Themes aus Block-Themes macht. So geht’s:

• Installieren und aktivieren Sie das Plugin Create BlockTheme.

• Gehen Sie zu Design → Create Block Theme in Ihrem WordPress-Dashboard.
• Das Plugin bietet mehrere Optionen für die Arbeit mit Ihrem aktiven Theme. Wählen Sie zunächst Create a Child of „[Name Ihres Themes]”.

• Geben Sie den Namen, die Beschreibung und den Autor des Child Themes ein. Klicken Sie auf Create Child Theme, sobald Sie fertig sind.

• Wenn der Vorgang erfolgreich war, zeigt das Plugin eine Bestätigungsmeldung an und führt Sie zum Site-Editor. Unter Design → Themes können Sie überprüfen, ob Sie jetzt ein Child Theme verwenden.

Wie Sie das Child Theme anpassen

Nun, da Sie ein Child Theme haben, ist es an der Zeit, es anzupassen. Diese Anpassungsmethoden erfordern etwas Code, daher können Kenntnisse in CSS die Sache erleichtern.

Wenn Sie lieber keinen Code bearbeiten möchten, schauen Sie sich unsere Top-Picks für die besten WordPress Seiten-Baukasten-Plugins an, um den Designprozess zu vereinfachen. Sie können auch den WordPress Gutenberg-Block-Editor verwenden, um benutzerdefinierte Blöcke und wiederverwendbare Templates ohne Codierung zu erstellen.

Das CSS anpassen

Wenn Sie größere Änderungen an den Styles Ihres Child Themes planen, sollten Sie die Datei style.css direkt bearbeiten. So haben Sie Ihr gesamtes CSS an einem Ort und können es leicht verwalten und bei Bedarf exportieren. Außerdem können Sie externe Tools wie Code-Editoren für Funktionen wie Syntaxhervorhebung und Versionskontrolle verwenden.

Auf der anderen Seite ist der Theme File Editor von WordPress praktischer für schnelle Änderungen. Mit ihm können Sie Themedateien direkt von Ihrem Dashboard aus bearbeiten, was für Benutzer ohne FTP- oder Dateimanager-Zugang ideal ist.

Gehen Sie zu Tools oder Design und suchen Sie den Theme File Editor. Öffnen Sie das Stylesheet in der rechten Seitenleiste und klicken Sie auf Datei aktualisieren, nachdem Sie es angepasst haben.

Wenn Sie es vorziehen, eine Live-Vorschau Ihrer Änderungen zu sehen, bevor Sie sie anwenden, benutzen Sie den Theme Customizer für klassische Themes oder den Site Editor für blockbasiertes Full Site Editing. Beide sind unter Design erreichbar – suchen Sie nach Anpassen oder Editor.

Eine weitere Möglichkeit, benutzerdefiniertes CSS zu Ihrem Child Theme hinzuzufügen, ist die Verwendung eines Code-Manager-Plugins wie WPCode. Diese Methode eignet sich hervorragend, um den Code ohne mühsames Kopieren und Einfügen wieder anzuwenden.

Wir behandeln jede Methode im Detail im WordPress benutzerdefiniertes CSS-Tutorial – schauen Sie es sich an, um mehr zu erfahren.

Wenn es um das Styling geht, gibt es eine Menge CSS-Regeln, mit denen Sie das Aussehen Ihres Child Themes verändern können. Kombinieren Sie sie und passen Sie sie nach Bedarf an, um das gewünschte Design zu erstellen.

Mit diesem Code Snippet können Sie beispielsweise die Hintergrundfarbe ändern:

body {
background-color: #f3f3f3; /* Replace #f3f3f3 with your chosen color code */
}

Um die Farbe der Seitenleiste anzupassen, verwenden Sie den folgenden CSS-Code:

.sidebar {
background-color: #dddddd; /* Replace #dddddd with your desired color */
}

Und hier sehen Sie, wie Sie die Schriftarten für Ihre gesamte Website aktualisieren können:

body {
   font-family: 'Arial', sans-serif; /* Update to your chosen font */
   font-size: 16px; /* Set your desired size */
   color: #333333; /* Choose the color */
}

Benutzerdefinierte Code Snippets zu functions.php hinzufügen

Diese Methode funktioniert nur bei klassischen Themes oder Hybrid-Themes, die klassische und Block-Elemente mischen.

Um die Funktionen Ihrer Website anzupassen, fügen Sie einfach bestehende PHP-Funktionen in der Datei functions.php Ihres Child Themes hinzu oder passen Sie sie an. Genau wie das Bearbeiten von style.css können Sie dies über den Dateimanager oder einen FTP-Client, den Theme File Editor oder sogar ein Code Manager-Plugin tun.

Die Art der Anpassungen, die Sie mit PHP-Funktionen vornehmen können, variiert.

In diesem Code Snippet werden beispielsweise die Funktionen add_action() und enqueue_custom_styles() kombiniert, um ein benutzerdefiniertes Stylesheet einzureihen:

function enqueue_custom_styles() {
wp_enqueue_style('custom-style', get_stylesheet_directory_uri() . '/css/custom-style.css');
}
add_action('wp_enqueue_scripts', 'enqueue_custom_styles');

Mit custom_dashboard_greeting() können Sie eine benutzerdefinierte Begrüßungsnachricht in Ihr WordPress Admin-Dashboard einfügen:

function custom_dashboard_greeting() {
   echo "Welcome to your site! Have a great day.";
}
add_action('admin_notices', 'custom_dashboard_greeting');

Bei so vielen Funktionskombinationen, die Sie ausprobieren können, überlassen wir es Ihnen, sich auszutoben und kreativ zu werden. Um Ihnen dabei zu helfen, finden Sie hier einige Tipps, um Ihre Ergebnisse zu verbessern und PHP-Anpassungen reibungsloser zu gestalten:

• Dokumentieren Sie Ihren Code mit Kommentaren. Verwenden Sie /* */ für mehrzeilige Kommentare oder // für einzeilige Kommentare, um zu erklären, was Ihr angepasster Code tut.
• Gruppieren und beschriften Sie Ihre Anpassungen. Organisieren Sie Ihre Funktionen mit Hilfe von Kommentaren in Abschnitte, um zukünftige Anpassungen und die Fehlersuche zu erleichtern.
• Vermeiden Sie Hardcoding. Anstatt Funktionen, Einstellungen oder Inhalte in Theme-Dateien oder Templates einzubetten, verwenden Sie add_action() oder add_filter(), um benutzerdefinierte Funktionen mit WordPress-Hooks einzubinden.

Template-Dateien ändern oder hinzufügen

Diese Methode ist ideal, wenn Sie das Layout, die Struktur oder den Inhalt bestimmter Teile Ihrer Website anpassen möchten und verhindern wollen, dass Theme-Updates Ihre Änderungen überschreiben.

Greifen Sie zunächst mit dem Dateimanager oder einem FTP-Client auf den Ordner Ihres Parent Themes zu und öffnen Sie den Ordner templates. Suchen Sie die Datei, die für die Funktionalität oder das Design verantwortlich ist, die Sie ändern möchten, und kopieren Sie sie in das Child Theme.

WordPress verwendet eine bestimmte Templatehierarchie, um Dateien auf der Grundlage ihrer Position und Benennung zu finden und zu laden. Behalten Sie daher immer die Verzeichnisstruktur bei, um sicherzustellen, dass Ihre Änderungen funktionieren.

Wenn sich zum Beispiel die Datei page.html im Ordner templates des Parent Themes befindet, müssen Sie den Ordner templates in Ihrem Child Theme erstellen und die Datei dorthin kopieren.

Sobald Sie die Basisdatei im Verzeichnis des Child Themes haben, nehmen Sie Ihre Änderungen vor.

Wenn Sie ein neues Seiten-Template erstellen wollen, kopieren Sie die Datei page.html aus dem templates-Ordner des Parent Themes in den templates-Ordner Ihres Child Themes und benennen Sie sie um. Fügen Sie dann den Namen des Templates an den Anfang der Datei:

<!-- 
Template Name: Custom Page Template 
-->

Bei klassischen Themes wird das Template im PHP-Format geschrieben. Führen Sie die gleichen Schritte aus, um eine neue .php-Datei zu erstellen, und fügen Sie das folgende Code Snippet am Anfang der Datei ein, um den Namen des Templates zu definieren:

<?php
/* Template Name: Custom Page Template */

Das neue Template können Sie nun im WordPress-Editor unter Page Attributes > Template auswählen.

Globale Stile mit einer theme.json-Datei ändern

Während klassische Themes functions.php verwenden, um Funktionen hinzuzufügen und zu verwalten, verlassen sich Block-Themes auf eine theme.json-Datei, um globale Stile und Einstellungen (wie Typografie, Farbpaletten und Abstände) zu definieren.

Erstellen Sie in Ihrem Child Theme-Ordner eine neue theme.json-Datei, falls noch keine vorhanden ist. Fügen Sie dann nur die Änderungen hinzu, die Sie vornehmen möchten. WordPress fügt sie automatisch mit dem theme.json des Parent Themes zusammen und alles, was in Ihrem Child Theme enthalten ist, überschreibt oder ergänzt die Einstellungen des Parent Themes.

Fügen Sie zum Beispiel dieses Code Snippet hinzu, um eine benutzerdefinierte Farbpalette für Ihre gesamte Website zu definieren:

{
  "settings": {
    "color": {
      "palette": [
        { "name": "Primary", "slug": "primary", "color": "#3498db" },
        { "name": "Accent", "slug": "accent", "color": "#e74c3c" },
        { "name": "Background", "slug": "background", "color": "#f4f4f4" }
      ]
    }
  }
}

Der Code für die Einstellung der benutzerdefinierten Typografie, insbesondere der Schriftgröße, ist ähnlich:

{
  "settings": {
    "typography": {
      "fontSizes": [
        { "name": "Small", "slug": "small", "size": "12px" },
        { "name": "Medium", "slug": "medium", "size": "18px" },
        { "name": "Large", "slug": "large", "size": "24px" }
      ]
    }
  }
}

Und hier erfahren Sie, wie Sie die maximale Breite für Inhaltsblöcke wie Absätze und Bilder festlegen:

{
  "settings": {
    "layout": {
      "contentSize": "800px",
      "wideSize": "1200px"
    }
  }
}

Fehler bei WordPress Child Themes beheben

Child Themes bieten zwar viele Vorteile, aber hier sind einige häufige Probleme, die Sie beachten sollten, und wie Sie sie beheben können.

Das Child Theme erscheint nicht im Abschnitt Themes

Sobald der Ordner des Child Themes und die unterstützenden Dateien eingerichtet sind, sollte es unter Design → Themes erscheinen. Ist dies nicht der Fall, gibt es wahrscheinlich ein Problem mit der Konfiguration im Stylesheet. Dieses Problem tritt häufiger bei Benutzern auf, die ihr Child Theme manuell erstellen.

Um das zu beheben, öffnen Sie style.css über den Dateimanager oder FTP und überprüfen Sie, ob der Parameter Template mit dem Ordnernamen des Parent Themes übereinstimmt. Sie können den Ordnernamen überprüfen, indem Sie zu wp-content → themes in Ihrem Stammverzeichnis navigieren.

Das Child Theme setzt das Parent Theme nicht außer Kraft

Wenn Ihre Änderungen im Child Theme nicht angezeigt werden, liegt das oft daran, dass das Child Theme das Stylesheet des Parent Themes nicht richtig einreiht.

Sie können dieses Problem beheben, indem Sie nach Tippfehlern in Ihrer functions.php-Datei suchen. Stellen Sie dann sicher, dass der Parameter Template in style.css auf den richtigen Parent Theme-Ordner verweist.

Caching kann auch ein Übeltäter sein. Versuchen Sie zunächst, den Cache Ihres Browsers zu leeren. Wenn das nicht funktioniert, leeren Sie Ihren Website-Cache mit Plugins wie LiteSpeed Cache oder WP Rocket.

Eine andere Möglichkeit ist, dass die Stile des Parent Themes die des Child Themes überschreiben. Um dies zu beheben, suchen Sie das widersprüchliche CSS in Ihrem Child Theme und fügen Sie die Eigenschaft !important hinzu, damit Ihre Stile Vorrang haben. Zum Beispiel:

h1 {
  color: red !important;
}

Die Eigenschaft !important stellt sicher, dass Ihr Stil alle widersprüchlichen Stile überschreibt, auch wenn diese eine höhere Spezifität aufweisen. Verwenden Sie sie jedoch sparsam, da sie die Fehlersuche und Verwaltung von CSS erschweren kann.

Die Template-Dateien überschreiben die Parent-Dateien nicht

Dieses Problem tritt auf, wenn WordPress die Template-Dateien in Ihrem Child Theme nicht erkennt oder verwendet, um die Dateien des Parent Theme zu ersetzen.

Überprüfen Sie zunächst die Dateibenennungskonvention. Die Template-Datei im Child Theme muss genau denselben Namen haben wie die Datei, die Sie im Parent Theme überschreiben möchten.

Überprüfen Sie als nächstes den Speicherort der Datei. Stellen Sie sicher, dass sich die Template-Datei im Stammverzeichnis des Child Theme-Ordners (/wp-content/themes/your-Child Theme/) befindet, nicht in einem Unterverzeichnis.

Wenn das nicht funktioniert, versuchen Sie, den Browser- und Website-Cache zu leeren.

Fazit

Die Verwendung eines Child Themes ist eine großartige Möglichkeit, ein Standard-WordPress-Theme in eine individuelle Lösung zu verwandeln, die Ihren Bedürfnissen entspricht. Sie können mit verschiedenen Funktionen und Designs experimentieren und gleichzeitig die Kompatibilität mit Updates des Parent Themes aufrechterhalten.

In diesem Artikel haben Sie gelernt, wie man ein Child Theme in WordPress erstellt und anpasst und wie man häufige Probleme behebt. Wir hoffen, dass Sie das Beste aus dieser leistungsstarken Funktion herausholen können. Viel Erfolg!

Wenn Sie weitere Fragen haben, können Sie gerne unten einen Kommentar hinterlassen.

WordPress Child Theme FAQ