So erstellen Sie ein Child-Theme in WordPress (Schritt für Schritt)

Haben Sie jemals Ihr WordPress-Design aktualisiert, nur um festzustellen, dass alle benutzerdefinierten Änderungen, die Sie am Design selbst vorgenommen haben, verloren gegangen sind? Ein WordPress-Child-Theme ist die Lösung, um dieses Problem zu vermeiden, und in diesem Artikel zeigen wir Ihnen genau, wie Sie eines erstellen.

Lasst uns anfangen!

Was ist ein WordPress-Child-Theme

Ein untergeordnetes WordPress-Theme wird nicht als vollständiges Theme angesehen, wie die, die im WordPress-Theme-Verzeichnis zu finden sind. Stattdessen hängt es vollständig von einem anderen Thema (dem übergeordneten Thema) ab, um aktiviert werden zu können und ordnungsgemäß zu funktionieren.

Wenn es aktiviert ist, erbt es alle Funktionen, Merkmale und den Code seines übergeordneten Designs, ohne Änderungen an den Dateien des übergeordneten Designs vorzunehmen.

WordPress stellt den Code des Parent-Themes bereit, mit Ausnahme der Teile, die vom Child-Theme überschrieben werden, das aus dem Ordner des Child-Themes bereitgestellt wird. Das Ergebnis davon ist, dass bei einer Aktualisierung des Parent-Themes alle Änderungen/Ergänzungen usw., die im Child-Theme vorgenommen wurden, nicht verloren gehen.

Child-Theme erstellen (Schritt-für-Schritt)

Bevor Sie fortfahren, stellen Sie sicher:

• Sie haben Zugriff auf die Dateien Ihrer Website über einen FTP-Client (wie WinSCP oder Filezilla)
• Sie haben einen Texteditor zur Verfügung (wie Notepad++).

Zunächst aktivieren wir ein Standarddesign, das auch als übergeordnetes Design bezeichnet wird. In diesem Beispiel ist das das Thema Twenty Twenty. Wenn wir zum Frontend unserer Website gehen, sehen wir so etwas:

Lassen Sie uns nun ein „Twenty Twenty“-Child-Theme erstellen und aktivieren.

Fügen Sie das Verzeichnis hinzu

Zuerst müssen wir ein neues Verzeichnis „twentytwenty-child“ in /wp-content/themes erstellen. Beachten Sie, dass der untergeordnete Ordner beliebig benannt werden kann, solange Sie keine Leerzeichen oder Satzzeichen verwenden.

Fügen Sie die style.css-Datei hinzu

Als nächstes müssen wir eine style.css-Datei erstellen und die entsprechenden Theme-Header hinzufügen. Bevor wir fortfahren, werfen wir einen Blick auf die style.css des übergeordneten Designs.

Mal sehen, wo sich diese Informationen im Admin-Bereich widerspiegeln.

Öffnen Sie zunächst die Themendetails unter Darstellung > Themen und sehen Sie sich die rechte Spalte genauer an.

Wenn wir dies mit dem Stylesheet vergleichen, sehen wir, woher verschiedene Elemente dieser Informationen gezogen werden.

Wir müssen damit beginnen, einige dieser Informationen zu unserem Child-Theme-Stylesheet hinzuzufügen. Die erforderlichen Mindestinformationen, die als Überschriften eingefügt werden sollten, sind der „Name des Themas“ und die „Vorlage“.

 /* Theme Name: Twenty Twenty - Child Template: twentytwenty */

• Theme Name: Der gewünschte Name deines Child Themes, der im Backend von WordPress angezeigt wird.
• Vorlage: Dies sollte mit dem Verzeichnisnamen des übergeordneten Designs identisch sein. Es ist der wichtigste Header für das Child-Theme, da es WordPress tatsächlich mitteilt, welches Theme das Parent-Theme ist, und somit die Abhängigkeit definiert. Ohne sie funktioniert Ihr Child-Theme nicht.

Sobald das untergeordnete Thema aktiviert ist, sehen Sie Folgendes im Backend:

Sie können zusätzlich die folgenden optionalen Informationen eingeben:

• Version (Version des Themas)
• Benötigt mindestens (mindestens erforderliche WP-Version, damit das Thema ordnungsgemäß funktioniert)
• Benötigt PHP (Mindestversion von WP PHP, damit das Theme richtig funktioniert)
• Beschreibung (Details zum Thema)
• Tags (Tags des Themas)
• Autor (Name des Entwicklers des Designs)
• usw.

Wenn Sie an dieser Stelle das Frontend Ihrer Website öffnen, stellen Sie möglicherweise fest, dass es defekt ist und in etwa so aussieht:

Dies ist völlig normal, da das Stylesheet (style.css), auf das WordPress jetzt verweist, jetzt aus dem untergeordneten Design stammt und dieses Stylesheet leer ist, abgesehen von den Informationen, die Sie oben eingegeben haben. Sie können entweder Ihren eigenen Stil von Grund auf neu erstellen oder den Stil des übergeordneten Themas laden und dort beginnen. Wenn Sie das Stylesheet des übergeordneten Designs importieren möchten, können Sie dies auf zwei Arten tun.

Option 1: Importieren Sie das übergeordnete Stylesheet auf klassische Weise

Alles, was Sie tun müssen, ist einfach diese Zeile zur style.css-Datei Ihres Child-Themes hinzuzufügen:

 @import url('../twentytwenty/style.css');

Dieser Befehl teilt WordPress mit, wo es suchen muss, um die ursprüngliche CSS-Datei abzurufen. Wenn Sie jetzt Ihre Homepage aktualisieren, sieht sie wieder normal aus. Was auch immer Sie jetzt in der style.css hinzufügen, überschreibt den importierten übergeordneten Stil. Versuchen Sie zum Beispiel, eine andere Schriftgröße für den h2-Titel „Hallo Welt!“ hinzuzufügen.

Aktualisieren Sie die Seite und sehen Sie sich den Elementinspektor der Registerkarten des Entwicklers an.

Sie werden feststellen, dass der Mehrwert gezählt wird und der Standard (Elternstil) „font-size: 6.4rem;“ wurde überschrieben.

Was Sie jedoch berücksichtigen müssen, ist, dass die Verwendung dieser Methode einen negativen Einfluss auf die Geschwindigkeit Ihrer Website hat, da die Dateien gezwungen werden, nacheinander und nicht parallel geladen zu werden. Genauer gesagt muss der Browser die erste Datei herunterladen, parsen und ausführen, bevor er „informiert“ wird, dass er die zweite Datei herunterladen muss.

Aus diesem Grund wird das Importieren der übergeordneten style.css-Datei auf diese Weise nicht mehr empfohlen.

Option 2: Importieren Sie das übergeordnete Stylesheet auf die richtige Weise

Um die übergeordnete style.css-Datei „richtig“ zu importieren, müssen wir zunächst eine leere functions.php -Datei in den Ordner Ihres untergeordneten Designs einfügen.

Sobald Sie dies getan haben, öffnen Sie es mit Ihrem Editor und fügen Sie ein öffnendes PHP-Tag (<?php) hinzu, wonach Sie den folgenden PHP-Code hinzufügen können:

 function twentytwenty_scripts() { wp_enqueue_style('parent-theme-style', get_template_directory_uri() . '/style.css'); } add_action('wp_enqueue_scripts', twentytwenty_scripts);

Wenn Sie jetzt die Entwicklertools Ihres Browsers überprüfen, werden Sie feststellen, dass die Ergebnisse die gleichen sind wie bei der „traditionellen“ Methode, die oben in Option 1 beschrieben wurde, außer dass sie jetzt viel schneller ist.

Einige weitere Hinweise zum PHP-Code:

• Der 'parent-theme-style' ist der Name des Handles und muss eindeutig sein
• Die get_template_directory_uri() . '/style.css' get_template_directory_uri() . '/style.css' teilt WordPress den Quellspeicherort des übergeordneten style.css-Speicherorts mit
• get_template_directory_uri() ruft den Vorlagenverzeichnis-URI für unser übergeordnetes Design ab. In unserem Fall wird „http://mywebsite.onpressidium.com/wp-content/themes/twentytwenty“ ausgegeben.

Fügen Sie Ihrem Child-Theme Funktionen hinzu

Nachdem Sie ein untergeordnetes Design erstellt haben, können Sie damit beginnen, einige zusätzliche Funktionen hinzuzufügen. Schauen wir uns zunächst an, wie Sie die Datei functions.php in Ihrem Child-Theme bearbeiten würden und wie dies in der Praxis funktioniert.

Child-Theme-Funktionen.php

Anders als bei der style.css -Datei wird der functions.php -Code des Parent-Themes weiterhin ausgeführt, wenn Sie functions.php in das Child-Theme einfügen. Was auch immer Sie in der functions.php des Kindes hinzufügen, wird zusätzlich zum Inhalt der functions.php des Elternteils ausgeführt.

Sehen wir uns zum Beispiel an, wie wir den „Weiterlesen“-Text für die Beitragsansicht ändern können:

Schritt Eins: Erstellen Sie eine Test-Post-Kategorie:

Schritt Zwei: Erstellen Sie zwei neue Beiträge in dieser Kategorie. Lassen Sie uns einige Beispielinhalte hinzufügen. Wenn Sie an dieser Stelle die Kategorieseite besuchen, sehen Sie Folgendes:

In diesem Beispiel möchten wir den Text „Weiterlesen“ ändern, der in der Schaltfläche angezeigt wird, die den vollständigen Beitrag lädt.

Gehen wir einen Moment zurück, um zu verstehen, wie dieser Text angezeigt wird. In WordPress verwenden wir Filter, um eine bestimmte Funktion zu modifizieren.

In diesem Beispiel müssen wir, um das zu bekommen, was wir wollen, den Filter ‚the_content_more_link‘ anpassen, der anfänglich in der Kerndatei wp-includes/post-template.php in Zeile 369 wie folgt eingeführt wird:

 $output .= apply_filters( 'the_content_more_link', ' <a href="' . get_permalink( $_post ) . "#more-{$_post->ID}\" class=\"more-link\">$more_link_text</a>", $more_link_text );

Dies wird derzeit vom übergeordneten Thema Twentytwenty in seiner Datei function.php (Zeile 571) durch diesen Codeabschnitt überschrieben:

 function twentytwenty_read_more_tag( $html ) { return preg_replace( '/<a(.*)>(.*)<\/a>/iU', sprintf( '<div class="read-more-button-wrap"><a$1><span class="faux-button">$2</span> <span class="screen-reader-text">"%1$s"</span></a></div>', get_the_title( get_the_ID() ) ), $html ); } add_filter( 'the_content_more_link', 'twentytwenty_read_more_tag' );

Wenn Sie also den Text „Weiterlesen“ in der Schaltfläche ändern möchten, kann dies in der functions.php Ihres untergeordneten Themas überschrieben werden, wenn Sie diesen Code hinzufügen:

 function modify_read_more_link() { return '<a class="more-link" href="' . get_permalink() . '">My Custom Read More text</a>'; } add_filter( 'the_content_more_link', 'modify_read_more_link' );

Der Hook „the_content_more_link“ ist zwischen diesen Dateien üblich, in diesem Fall hat der Hook des untergeordneten Elements immer Vorrang.

Dann aktualisieren Sie die Seite und voila:

So passen Sie PHP-Vorlagen an

Der obige Screenshot zeigt den Inhalt der Vorlage des zwanzigzwanzig-Designs für die Post-Kategorie-Ansicht. Wie können wir also das Design ändern oder Informationen mithilfe des untergeordneten Designs hinzufügen/entfernen?

So können Sie dies tun:

1. Suchen Sie die zugehörige PHP-Datei
2. Kopieren Sie die entsprechende Datei in den Child-Theme-Ordner und bearbeiten Sie sie
3. Passen Sie es an, wie Sie es für richtig halten

Das erste und häufigste Problem hier ist, dass wir herausfinden müssen, welche PHP-Datei die Ausgabe enthält, die wir bearbeiten möchten. Etwas, das Ihnen definitiv helfen wird, sich darin zurechtzufinden, ist die WordPress-Vorlagenhierarchie.

Kurz gesagt, die einzigen Dateien, die ein WordPress-Theme tatsächlich benötigt, sind die Dateien index.php und style.css. Die zusätzlichen Dateien und Ordner sind eigentlich Dateien, die innerhalb von index.php aufgerufen werden. Sie sind die Fragmente dessen, was Sie schließlich als Ausgabe der Datei index.php sehen werden.

In Bezug auf das Thema Twenty Twenty können wir in Zeile 79 sehen, wenn wir uns die Datei index.php ansehen, dass, wenn der Inhalt aus einem oder mehreren Beiträgen besteht, die PHP-Dateien im Verzeichnis template-parts/ verwendet werden.

 if ( have_posts() ) { $i = 0; while ( have_posts() ) { $i++; if ( $i > 1 ) { echo '<hr class="post-separator styled-separator is-style-wide section-inner" aria-hidden="true" />'; } the_post(); get_template_part( 'template-parts/content', get_post_type() ); }

In unserem Fall müssen wir die content.ph -Datei aus dem Unterordner des template-parts-Designs kopieren.

Stellen Sie außerdem sicher, dass Sie nur die PHP-Dateien kopieren, die Sie anpassen möchten. Kopieren Sie nicht jede PHP-Datei in das übergeordnete Design.

HINWEIS: Die Ordnerstruktur sollte im Child-Theme gleich sein, damit sich die Änderungen im Frontend widerspiegeln.

Also erstellen wir zuerst den Unterordner ‚template-parts‘ und legen eine Kopie von content.php darin ab.

Sie können die Datei nun in Ihrem Editor öffnen und anpassen.

Versuchen Sie zunächst, etwas Triviales zu ändern, um sicherzustellen, dass alles gut funktioniert, ändern Sie beispielsweise eine div-Klasse und aktualisieren Sie Ihr Frontend, um die Ergebnisse zu überprüfen.

Passen Sie die Beitragskategorievorlage an

Wir haben bereits zwei Beiträge unter der Kategorie „Testkategorie“. Sie können nun ein „Post-Kategorie“-Elementmenü erstellen und es mit der „Test-Kategorie“ verknüpfen. Wenn Sie auf den neuen Menüpunkt klicken, sollten Sie die Ansichtsseite der Beitragskategorie sehen.

Jetzt können Sie die content.php -Datei weiter modifizieren und die Post-Kategorie-Ansicht in Ihren eigenen Stil ändern. Als Hinweis finden Sie die Referenzen der zusätzlich enthaltenen Dateien wie in Zeile 23:

 get_template_part( 'template-parts/featured-image' );

Das bedeutet, dass die Datei, die das vorgestellte Bild ausgibt, template-parts/featured-image.php

Sie können die Datei also in Ihr Child-Theme-Verzeichnis kopieren und bearbeiten. Fantastisch!

Fazit

Ein untergeordnetes Design ermöglicht es Benutzern, das Layout, den Stil und die Funktionalität des übergeordneten Designs zu ändern, ohne die Möglichkeit zu verlieren, das übergeordnete Design zu aktualisieren. Häufig zögern Webdesigner, das Theme ihrer Website zu aktualisieren, da sie wissen, dass sie ansonsten direkt im übergeordneten Theme vorgenommene Änderungen verlieren. Dies ist ein ernstes Problem, da es genauso wichtig ist, Ihr Theme auf dem neuesten Stand zu halten, wie es Ihre Plugins und Ihr WordPress-Kern sind. Wenn Sie von Anfang an mit einem untergeordneten Design arbeiten, wird dieses Problem behoben, und Sie können das übergeordnete Design nach Bedarf aktualisieren, ohne befürchten zu müssen, alle Änderungen, die Sie am gesamten Design vorgenommen haben, zu überschreiben.