Der ultimative Leitfaden für untergeordnete WordPress-Themes

Das WordPress-Ökosystem ist voll von großartig aussehenden kostenlosen und Premium-Themen, aber es ist sehr schwierig, ein perfektes Thema für Ihre Bedürfnisse zu finden, das alle Kriterien erfüllen würde. Glücklicherweise hat WordPress eine Lösung für dieses Problem, die sogenannten Child-Themes. Machen Sie sich also keine Sorgen, Sie können ein untergeordnetes Design verwenden, um die Änderungen anzuwenden und Ihr nahezu perfektes Design zu erstellen.

Untergeordnete WordPress-Themes können so einfach sein wie ein bisschen benutzerdefinierter CSS-Code, oder sie können vorhandene übergeordnete Theme-Vorlagen überschreiben und zusätzliche Theme-Funktionen ändern oder hinzufügen. Ich werde in diesem Artikel alles erklären, was Sie über untergeordnete Themen wissen müssen, also fangen wir gleich an.

Was ist ein Child-Theme?

Ein untergeordnetes Thema ist ein Thema, das die Funktionalität und das Design eines anderen Themas erbt, das als übergeordnetes Thema bezeichnet wird. Untergeordnete Themen sind die empfohlene Methode zum Ändern eines vorhandenen Themas.

Die obige offizielle WordPress-Definition ist großartig, aber schauen wir uns genauer an, was das bedeutet. Ein Starter-Child-Theme (Barebone) sieht genauso aus und funktioniert genauso wie das Parent-Theme. Ich werde Ihnen bald zeigen, wie Sie ein Starter-Child-Theme erstellen, aber im Moment ist ein Starter-Theme ein minimales Child-Theme, das alles vom Parent-Theme erbt. Sie können dann Dateien und Code zum untergeordneten Design hinzufügen, wodurch das Aussehen und die Funktionalität des übergeordneten Designs geändert oder verbessert werden, wodurch es zu einem separaten, einzigartigen Design wird.

Es gibt viele Vorteile und keine wirklichen Nachteile für die Verwendung eines Child-Themes, also lass uns einen Blick darauf werfen, warum du ein Child-Theme verwenden solltest.

Warum sollte ich ein Child-Theme verwenden?

Noch bessere Frage: Warum würden Sie kein untergeordnetes Thema verwenden? Ich kann mir eigentlich keinen guten Grund vorstellen, es nicht zu verwenden, aber ich kenne ein paar gute Gründe, warum Sie ein untergeordnetes Thema verwenden sollten.

Design- Updates – Wenn Sie den Design-Code direkt ändern und dieses Design in Zukunft aktualisieren, gehen alle diese Änderungen verloren. Ich denke, dieser Grund allein ist gut genug, um mit der Verwendung von untergeordneten Themen zu beginnen. Wir hatten einige Kunden, die die Theme-Dateien direkt bearbeiteten und dann ein Support-Ticket eröffneten und sagten, unser Theme-Update habe ihre Arbeit zerstört. Wenn sie ein untergeordnetes Thema verwenden, wäre alles in Ordnung. Brauchst du überhaupt Theme-Updates? Ja! Zum Beispiel: Was ist, wenn das Theme-Update eine Sicherheitskorrektur enthält und Ihre WP-Site ein potenzielles Ziel für Hacker werden könnte, wenn Sie das Theme nicht aktualisieren?

Code-Organisation – da alle Änderungen in einem untergeordneten Themenordner abgelegt werden, können Sie klar sehen, welche Änderungen vorgenommen wurden und wie sie vorgenommen wurden. Wenn Sie in Zukunft etwas ändern müssen, wissen Sie genau, wo Sie diese Änderungen finden können, und das wird Ihnen viel Zeit sparen.

Schnellere Entwicklung – das Erweitern oder Überschreiben des Parent-Theme-Stils und der Funktionalität in einem Child-Theme ist eine viel bessere Option, als eine modifizierte Theme-Codebasis beizubehalten, die mit Theme-Updates überschrieben werden kann (und wir haben bereits festgestellt, dass Updates wichtig sind :)) .

Wie ich bereits erwähnt habe, fällt mir kein einziger Grund ein, warum man kein Child-Theme verwenden sollte, also würde ich vorschlagen, dass Sie so bald wie möglich ein Starter-Child-Theme einrichten. Wenn Sie ein neues Theme installieren, sollten Sie auch ein untergeordnetes Starter-Theme erstellen und es stattdessen verwenden, auch wenn Sie keine unmittelbaren Pläne haben, das übergeordnete Theme anzupassen. Glauben Sie mir, später, wenn Sie ein paar Änderungen vornehmen müssen, werden Sie froh sein, dass Sie ein untergeordnetes Thema verwenden.

Als Randnotiz: WordPress 4.7 hat den zusätzlichen CSS-Editor im Customizer eingeführt, in dem Sie benutzerdefinierten CSS-Code hinzufügen können. Wenn Sie also sicher sind, dass Ihre einzige Designänderung ein bisschen benutzerdefinierter CSS-Code sein wird, dann brauchen Sie kein untergeordnetes Design. Sie können den zusätzlichen CSS-Editor verwenden, um Ihren CSS-Code hinzuzufügen, und das war's. Aber sind Sie sicher, dass Sie in Zukunft keine weiteren Änderungen am Thema vornehmen werden? Sind Sie?

Wie erstelle ich ein Starter-Child-Theme?

Nun, da wir das Was und Warum kennen, schauen wir uns das Wie an. Wie wir bereits erwähnt haben, ist ein Starter-Child-Theme ein sehr minimales Child-Theme. Es wird genauso aussehen und funktionieren wie das übergeordnete Thema, aber es wird ein Ausgangspunkt für Ihre Änderungen und Verbesserungen sein.

Für unser Beispiel erstellen wir ein Starter-Child-Theme für das Adrenaline-Eltern-Theme:

1. Erstellen Sie einen Ordner und nennen Sie ihn adrenaline-pt-child. Die beste Vorgehensweise besteht darin, den Ordnernamen des übergeordneten Themas (Adrenalin-pt) zu verwenden und das „-child“ am Ende anzuhängen, sodass klar ist, welches Thema das untergeordnete Thema und welches das übergeordnete Thema ist.
2. Erstellen Sie eine style.css -Datei im Child-Theme-Ordner. Öffnen Sie die Datei style.css und fügen Sie diesen Code ein (dieser Code muss sich am Anfang der Datei befinden):
   

    /* Theme Name: Adrenaline Child Theme Theme URI: https://www.proteusthemes.com/wordpress-themes/adrenaline Description: Child theme for the Adrenaline theme Author: ProteusThemes Author URI: https://www.proteusthemes.com Template: adrenaline-pt Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: grid-layout, custom-background, custom-colors, custom-menu, featured-images, footer-widgets, full-width-template, microformats, sticky-post, theme-options, blog, e-commerce, entertainment, holiday Text Domain: adrenaline-pt-child */ /* Write your custom CSS code below */

3. Erstellen Sie eine functions.php -Datei im Child-Theme-Ordner. Öffnen Sie die Datei functions.php und fügen Sie diesen Code ein:
   

    <?php add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style' ); function enqueue_parent_theme_style() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); }

4. Optional kannst du deinem Child-Theme-Ordner eine screenshot.png (oder .jpg) hinzufügen, die im Abschnitt Aussehen -> Designs als Vorschaubild angezeigt wird (das Screenshot-Bild sollte 1200 x 900 Pixel groß sein).

Das ist das grundlegende Starter-Child-Theme. Um es zu installieren, sollten Sie diesen Ordner im Verzeichnis wp-content/themes/ neben dem übergeordneten Themenordner ablegen. Oder Sie können auch eine ZIP-Datei aus diesem untergeordneten Themenordner erstellen und sie als reguläres WP-Theme über das WP-Admin-Dashboard unter Appearance -> Themes installieren.

Lassen Sie uns den Code in den obigen Snippets erklären.

style.css – Die einzigen Felder, die „erforderlich“ sind, sind Theme Name (der Name deines Child Themes) und Template (der Ordnername deines Parent Themes). Andere Felder sind optional und das Child-Theme funktioniert ohne sie. Diese Metafelder: Theme URI, Description, Author, … sind jedoch „nice to have“ und sie werden in WP Admin -> Appearance -> Themes angezeigt , wodurch das Child-Theme „vollständiger“ wird.

functions.php – damit das Child-Theme den gleichen Stil wie das Parent-Theme hat, müssen wir die CSS-Datei des Parent-Themes einreihen. Der empfohlene Weg, dies zu tun, ist die Verwendung des Action- wp_enqueue_scripts . In der Callback-Funktion stellen wir die CSS-Datei des übergeordneten Designs mit der Funktion wp_enqueue_style in die Warteschlange. Wenn das übergeordnete Design mehrere CSS-Dateien verwendet (nicht nur style.css ), müssen Sie diese möglicherweise ebenfalls in die Warteschlange einreihen, abhängig von der Enqueueing-Technik des übergeordneten Designs.

In unserem Adrenaline-Theme verwenden wir auch die benutzerdefinierte WooCommerce-CSS-Datei, daher ist es am besten, sie auch in das Child-Theme einzureihen. Hier müssen wir aufpassen, denn wir müssen den Handle-Parameter der Funktion wp_enqueue_style genauso benennen wie im Parent-Theme (in unserem Beispiel: adrenaline-woocommerce ). Auf diese Weise wird unsere Child-Theme-CSS-Datei zuletzt in die Warteschlange gestellt und wir können problemlos alle Parent-Theme-Stile überschreiben. Hier ist die aktualisierte Datei functions.php für unser Adrenaline-Design:

 <?php add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style' ); function enqueue_parent_theme_style() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); /** * Enqueue additional parent theme CSS files. * Watch out to name the "handle" parameter the same as it is named * in the parent theme, otherwise the file might be enqueued twice. * In this example the parent handle name for this CSS file was * "adrenaline-woocommerce" */ wp_enqueue_style( 'adrenaline-woocommerce', get_template_directory_uri() . '/woocommerce.css' ); }

An dieser Stelle möchte ich erwähnen, dass der alte Weg, die Parent-Styles zum Child-Theme hinzuzufügen, mit der CSS- @import Regel war. Wenn Sie ein untergeordnetes Design verwenden, das die @import-Regel in der @import verwendet, um die CSS-Datei des übergeordneten style.css zu importieren, dann schlage ich vor, dass Sie zum obigen Beispiel wechseln, in dem die CSS-Datei des übergeordneten Designs in die functions.php eingereiht wird Datei (und entfernen Sie die @import -Regel aus style.css ). Das Problem mit der @import Regel ist, dass sie viel langsamer ist als das Einreihen der übergeordneten CSS-Datei über den Hook wp_enqueue_scripts . Mehr zu diesem Thema können Sie hier lesen.

Du denkst vielleicht: „Es muss doch ein Plugin geben, um Child-Themes zu erstellen…“ Ja, das gibt es. Wir werden uns dieses Plugin im Abschnitt Wechseln zu einem Child-Theme in einem bereits konfigurierten Parent-Theme ansehen.

Wie funktionieren Template-Dateien für Parent- und Child-Themes?

Bevor wir mit Beispielen zum Anpassen Ihres untergeordneten Designs fortfahren, werfen wir einen kurzen Blick darauf, wie die WordPress-Vorlagenhierarchie funktioniert.

WordPress verwendet Vorlagendateien, um die tatsächlichen HTML-Seiten zu erstellen, die Ihre Website-Besucher sehen. Einige der bekannteren WordPress-Template-Dateien sind: header.php , footer.php , index.php , single.php , page.php , … Wenn beispielsweise eine Blog-Seite besucht wird, wird die index.php -Template-Datei verwendet um die Liste der Blogbeiträge anzuzeigen. Einige der Vorlagendateien sind modular und wiederverwendbar. header.php zum Beispiel wird normalerweise auf jeder WordPress-Seite verwendet.

Einige der Vorlagendateien sind spezifischer als andere und werden von WordPress als höher priorisiert angesehen. Wenn ein Thema beispielsweise eine singular.php und eine page.php Vorlage hat und ein Besucher eine normale WordPress-Seite anzeigt, wird die page.php Vorlage verwendet, um die Seite zu generieren. Dies geschieht, weil die Vorlagendatei page.php spezifischer ist als die Vorlage singular.php in der WordPress-Vorlagenhierarchie. Wenn wir die page.php -Datei aus dem Design entfernen würden, würde die singular.php -Vorlage verwendet werden. Sie sollten einen Blick in die Dokumentation der WordPress-Template-Hierarchie werfen, in der dieses Thema ausführlicher beschrieben und mit einigen Beispielen versehen ist.

Eine weitere Ressource, die Sie sich ansehen sollten, ist die interaktive Visualisierung der WordPress-Vorlagenhierarchie.

Je nachdem, welche Art von Seite besucht wird, werden also unterschiedliche Vorlagendateien verwendet, um die Seite zu generieren, die der Besucher sieht. Dies ist wichtig, da es Ihnen hilft, herauszufinden, welche Vorlagendatei Sie in Ihrem untergeordneten Thema ändern oder hinzufügen müssen, um Ihre Website anzupassen.

WordPress verwendet immer die relevanteste Vorlagendatei, die es finden kann, abhängig von der Vorlagenhierarchie. Wenn wir ein Child-Theme verwenden, sucht es zuerst nach diesen Vorlagendateien im Child-Theme und greift dann auf das Parent-Theme zurück, wenn die Vorlagendatei nicht im Child-Theme vorhanden ist. Wenn ein untergeordnetes Design eine spezifischere Vorlagendatei (in der WordPress-Vorlagenhierarchie) als das übergeordnete Design verwendet, verwendet es stattdessen diese Datei.

Wie passt man sein Child-Theme an?

Lassen Sie uns mit unserem untergeordneten Adrenaline-Theme-Beispiel fortfahren und uns ansehen, wie wir es anpassen können. Wir werden diese Anwendungsfälle abdecken:

• benutzerdefinierte Stile hinzufügen und die übergeordneten Stile überschreiben,
• Hinzufügen benutzerdefinierter Funktionalität und Überschreiben der übergeordneten Funktionalität,
  • Hinzufügen neuer Funktionen,
  • übergeordnete Funktionalität überschreiben,
  • Hinzufügen neuer Vorlagendateien,
  • übergeordnete Vorlagendateien überschreiben

Hinzufügen benutzerdefinierter Stile und Überschreiben der übergeordneten Stile

Der gesamte benutzerdefinierte CSS-Code sollte der style.css -Datei im untergeordneten Design hinzugefügt werden.

Angenommen, wir möchten unserem Child-Theme einen Warnstil für Text hinzufügen. Wir haben ein div-HTML-Element mit einer warning zusammen mit etwas Text auf einer WordPress-Seite und wir möchten diesem Element ein angemessenes Styling hinzufügen. Der benutzerdefinierte CSS-Code, den wir für dieses Beispiel schreiben, muss in der style.css -Datei unter dem Header-Kommentar des untergeordneten Designs platziert werden (der sich immer am Anfang der Datei befindet). Die style.css -Datei mit dem benutzerdefinierten CSS-Code würde folgendermaßen aussehen:

 /* Theme Name: Adrenaline Child Theme Theme URI: https://www.proteusthemes.com/wordpress-themes/adrenaline Description: Child theme for the Adrenaline theme Author: ProteusThemes Author URI: https://www.proteusthemes.com Template: adrenaline-pt Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: grid-layout, custom-background, custom-colors, custom-menu, featured-images, footer-widgets, full-width-template, microformats, sticky-post, theme-options, blog, e-commerce, entertainment, holiday Text Domain: adrenaline-pt-child */ .warning { margin: 1rem 0; background-color: #fcf8e3; border-color: #faf2cc; color: #8a6d3b; padding: 0.75rem 1.25rem; border: 1px solid transparent; border-radius: 0.25rem; }

Wichtiger als das Hinzufügen von benutzerdefiniertem CSS-Code zu Ihrem untergeordneten Design ist das Überschreiben der Stile des übergeordneten Designs. Vielleicht gefällt dir das allgemeine Aussehen des übergeordneten Designs, aber du möchtest ein paar Dinge ändern, wie zum Beispiel die Farbe eines Symbols. Als Beispiel überschreiben wir die Farbe des Einkaufswagensymbols in der Kopfzeile der Adrenaline-Startseite. Diese Symbolfarbe ändert sich mit den Customizer-Einstellungen einer Primärfarbe, aber nehmen wir an, wir möchten ihr eine einzigartige Farbe geben.

Um diesen übergeordneten Designstil zu überschreiben, müssen Sie den CSS-Selektor im übergeordneten Design finden, der die Farbe für dieses Symbol festlegt. Sie finden die CSS-Selektoren mit den Chrome-Entwicklungstools. Hier ist ein einfaches Video-Tutorial, wie man das macht. Sobald Sie den richtigen CSS-Selektor haben, in unserem Beispiel ist es .header-info__link .fa , müssen Sie den Code in der Datei style.css im untergeordneten Thema platzieren. Die style.css -Datei des Child-Themes mit dieser Überschreibung würde wie folgt aussehen:

 /* Theme Name: Adrenaline Child Theme Theme URI: https://www.proteusthemes.com/wordpress-themes/adrenaline Description: Child theme for the Adrenaline theme Author: ProteusThemes Author URI: https://www.proteusthemes.com Template: adrenaline-pt Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: grid-layout, custom-background, custom-colors, custom-menu, featured-images, footer-widgets, full-width-template, microformats, sticky-post, theme-options, blog, e-commerce, entertainment, holiday Text Domain: adrenaline-pt-child */ .header-info__link .fa { color: #2ebd61; }

Das Schwierigste ist, den richtigen CSS-Selektor zu finden, auf den man abzielen kann. Sobald das erledigt ist, geht es nur noch darum, die richtigen CSS-Regeln anzuwenden.

Toll! Wir haben gerade einige benutzerdefinierte Stile auf unser untergeordnetes Thema angewendet. Sie können so viel benutzerdefinierten CSS-Code zur style.css -Datei des Child-Themes hinzufügen, wie Sie möchten.

Sehen wir uns nun an, wie wir dem Child-Theme einige Funktionen hinzufügen können.

Hinzufügen benutzerdefinierter Funktionen und Überschreiben der übergeordneten Funktionen

Dies ist der Teil, wo die Dinge interessant werden, wo Sie Ihr Child-Theme mit zusätzlichen Funktionen verbessern oder die Parent-Theme-Funktionalität überschreiben können, die Sie ändern möchten.

Es gibt ein paar Möglichkeiten, wie Ihre Anpassungen realisiert werden können, also werfen wir einen Blick darauf:

• Hinzufügen neuer Funktionen,
• übergeordnete Funktionalität überschreiben,
• Hinzufügen neuer Vorlagendateien,
• übergeordnete Vorlagendateien überschreiben

Neue Funktionalität hinzufügen

Jede neue Funktionalität in Form von PHP-Code, die Sie möglicherweise zu Ihrem untergeordneten Thema hinzufügen möchten, muss in die Datei functions.php eingefügt werden. Wenn Sie viel PHP-Code hinzufügen, sollten Sie den Code in mehrere PHP-Dateien extrahieren und diese Dateien dann in der Datei functions.php anfordern, um Ihren Code besser zu organisieren.

Wenn du beispielsweise deinem Child-Theme einen Shortcode hinzufügst, kannst du eine Datei mit dem Namen shortcodes.php erstellen und den entsprechenden Code in diese Datei einfügen. Dann würden Sie die Datei in functions.php benötigen, etwa so: require_once get_stylesheet_directory() . '/shortcodes.php' require_once get_stylesheet_directory() . '/shortcodes.php'

Überschreiben der übergeordneten Funktionalität

Möglicherweise müssen Sie einige der Parent-Theme-Funktionen ändern, aber da wir den Parent-Theme-Code nicht direkt bearbeiten dürfen, müssen wir dies irgendwie im Child-Theme erreichen. Keine Sorge, WordPress hat genau dafür ein System.

Es gibt zwei Möglichkeiten, die übergeordnete Funktionalität zu ändern, die erste ist mit WordPress-Aktionen und Filter-Hooks und die zweite mit Pluggable Functions .

WordPress-Aktions- und Filter-Hooks – Wenn Sie ein gut codiertes übergeordnetes Thema verwenden, sollten Sie in der Lage sein, benutzerdefinierte WP-Aktionen und Filter im gesamten Thema zu finden, in die Sie sich einklinken und das Verhalten des Themas ändern können. Sie sollten Ihr übergeordnetes Design nach den Funktionen do_action und apply_filters durchsuchen. Im Design Twenty Seventeen finden Sie beispielsweise diesen benutzerdefinierten Filter: twentyseventeen_front_page_sections , der einen Standardwert von 4 hat. Dieser Wert gibt an, wie viele Abschnitte auf der Startseite dieses Themas definiert sind. Wenn wir ein Twenty Seventeen-Child-Theme erstellen und nur zwei Abschnitte haben möchten, dann würden wir diesen Code in die Datei functions.php des Child-Themes einfügen:

 <?php add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style' ); function enqueue_parent_theme_style() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); } // Custom Twenty Seventeen front page sections filter example. add_filter( 'twentyseventeen_front_page_sections', 'twentyseventeen_child_front_page_sections' ); function twentyseventeen_child_front_page_sections() { return 2; }

Pluggable Functions – Was sind Pluggable Functions? Sie sind normale PHP-Funktionen, aber in eine if-Anweisung verpackt, um zu prüfen, ob die Funktion mit diesem Namen bereits existiert. Sie sehen so aus:

 <?php if ( ! function_exists( 'some_function_name' ) ) { function some_function_name() { // Function code goes here. } }

Wenn Ihr Theme diese austauschbaren Funktionen verwendet, können Sie deren Code in Ihrem Child-Theme überschreiben, indem Sie eine Funktion mit demselben Namen und geändertem Code in der Child-Datei function.php definieren. Im WordPress-Bootstrap-Prozess wird die Datei „ functions.php functions.php des übergeordneten Themas geladen, deshalb ist diese Methode mit austauschbaren Funktionen möglich. Wenn die Funktion des übergeordneten Themas nicht austauschbar ist, können Sie sie auch nicht überschreiben, da zwei Funktionen mit demselben Namen einen kritischen PHP-Fehler auslösen.

Pluggable Functions wurden in den Anfängen im WordPress Core verwendet und durch Filter ersetzt.

Hinzufügen neuer Vorlagendateien

Das Hinzufügen einer neuen WordPress-Vorlagendatei (die das übergeordnete Thema nicht hat) zum untergeordneten Thema ist einfach. Alles, was Sie tun müssen, ist, die Vorlagendatei im Stammverzeichnis Ihres untergeordneten Designs zu platzieren.

Wenn dein Parent-Theme zum Beispiel keine category.php -Vorlagendatei hat, die für die Anzeige von Beiträgen bestimmter Kategorien verantwortlich ist, dann kannst du die category.php -Vorlagendatei zum Stammverzeichnis deines Child-Themes-Ordners hinzufügen (neben functions.php ). WordPress verwendet nun diese category.php -Datei, um Ihre Kategorieseiten anzuzeigen.

Du kannst deinem Child-Theme auch spezifischere Vorlagendateien hinzufügen, um einen kleineren Abschnitt der jeweiligen Seiten zu übernehmen.

Zum Beispiel, wenn Ihr übergeordnetes Thema eine archive.php -Vorlage hat, die eine übergeordnete Vorlagendatei zum Anzeigen von Autoren-, Kategorie-, Taxonomie-, Datums- und Tag-Seiten ist, aber keine author.php -Vorlage hat, die eine spezifischere Vorlage darin ist der WordPress-Template-Hierarchie, dann kannst du dieses author.php Template zu deinem Child-Theme hinzufügen und das Layout der Autorenseiten ändern. Auf diese Weise lassen Sie das Layout und die Darstellung der Kategorien-, Taxonomie-, Datums- und Tag-Seiten gleich und ändern nur die Autorenseiten.

Überschreiben von übergeordneten Vorlagendateien

Die letzte und wahrscheinlich häufigste Verwendung zum Überschreiben der Parent-Theme-Funktionalität ist das Überschreiben der Parent-Theme-Vorlagendateien.

Wenn wir etwas an der Seitenvorlage im zuvor erstellten Adrenaline-Child-Theme ändern möchten, müssen wir die Datei page.php aus dem Parent-Theme in unseren Child-Theme-Ordner kopieren und die gewünschten Änderungen vornehmen.

Wenn wir den Autor und das Datum ändern möchten, die auf dem einzelnen Beitrag angezeigt werden, würden wir die single.php -Datei in das untergeordnete Thema kopieren und die Änderungen in dieser Datei vornehmen.

Das Überschreiben von Parent-Theme-Vorlagen ist sehr leistungsfähig, da Sie mit ein paar Änderungen an den vorhandenen Parent-Theme-Vorlagendateien alles ändern können, was Sie wollen, aber das Parent-Theme intakt und sicher für Updates bleibt.

Wechseln zu einem untergeordneten Design eines bereits konfigurierten übergeordneten Designs

Wenn Sie eine bestehende WordPress-Site ohne untergeordnetes Thema haben und ein untergeordnetes Thema verwenden möchten, müssen Sie einige Dinge beachten.

Sie können ein untergeordnetes Thema automatisch mit einem Plugin erstellen oder Sie können dies manuell tun. Sie denken jetzt wahrscheinlich: „Ja, ein Plugin! Wer möchte etwas manuell erledigen, wenn es automatisch geht?“ Nun, Sie liegen nicht falsch, aber weil Sie mehr über untergeordnete Themen erfahren möchten, werden wir uns zuerst die manuellen Schritte ansehen

Manueller Wechsel zu einem Child-Theme

Erstellen Sie zunächst ein Child-Theme für Ihr Parent-Theme und extrahieren Sie alle Änderungen oder Ergänzungen, die Sie direkt im Code des Parent-Themes vorgenommen haben, in das Child-Theme. Dadurch wird Ihr Parent-Theme sicher für Updates und Ihr benutzerdefinierter Code wird ordentlich im Child-Theme versteckt.

Nachdem Sie nun das Child-Theme aktiviert haben, können einige Dinge seltsam oder sogar kaputt aussehen, wenn Sie sich Ihre Startseite ansehen. Der Grund für dieses Durcheinander ist, dass WordPress ein untergeordnetes Thema als neues separates Thema ansieht und daher alle Themeneinstellungen auf die Standardwerte zurückgesetzt werden. Dies führt dazu, dass Widgets die Positionen der Seitenleiste wechseln (Widgets aus der Fußzeilen-Seitenleiste landen möglicherweise im Kopfbereich usw.) und die Anpassungseinstellungen auf die Standardeinstellungen des Designs zurückgesetzt werden.

Widgets – Um das Widget-Problem zu beheben, gehen Sie zu Aussehen -> Widgets und positionieren Sie die Widgets neu (ziehen und ablegen) in die richtigen Seitenleisten.

Customizer-Einstellungen – Es gibt eine einfache Möglichkeit, die Customizer-Einstellungen zu migrieren, die Sie bereits im übergeordneten Design festgelegt haben. Das Customizer Export/Import-Plugin ist sehr einfach zu verwenden und importiert die Customizer-Einstellungen des übergeordneten Themas, sodass Sie sie nicht manuell festlegen müssen. Befolgen Sie diese Anweisungen, um die Customizer-Einstellungen zu Ihrem Child-Theme zu migrieren.

Wenn Ihr Design ein anderes Framework für Designoptionen verwendet, müssen Sie diese möglicherweise ebenfalls neu konfigurieren.

Sobald Sie diese Dinge getan haben, sollte das untergeordnete Thema genauso aussehen wie Ihr übergeordnetes Thema, aber Sie sind bereit für weitere Änderungen und regelmäßige Aktualisierungen des übergeordneten Themas.

Nachdem wir nun verstanden haben, was die Probleme beim Wechsel zu einem Child-Theme sind und wie man sie löst, schauen wir uns den einfacheren Weg an, mit Hilfe eines Plugins zu einem Child-Theme zu wechseln.

Automatischer Wechsel zu einem Child-Theme (mit einem Plugin)

Das Wort „automatisch“ ist hier vielleicht etwas zu viel, da wir noch ein paar Dinge tun müssen, um zu einem untergeordneten Thema zu wechseln, aber es ist viel einfacher und schneller als manuell.

Das beste Child-Theme-Generator-Plugin, das ich getestet habe, ist das Child-Theme-Konfigurator-Plugin. Es ermöglicht uns, ein untergeordnetes Thema zu erstellen und alle Themeneinstellungen aus dem übergeordneten Thema auf einmal zu migrieren. Das ist großartig!

Hier ist ein kurzes Tutorial, wie man mit diesem Plugin zu einem Child-Theme wechselt:

1. installiere und aktiviere das Child Theme Configurator Plugin auf deiner WP Seite,
2. gehe zu Tools -> Child Themes ,
3. Wählen Sie im ersten Schritt die Option „CREATE a new Child Theme“, stellen Sie sicher, dass Sie das richtige Parent-Theme ausgewählt haben, und klicken Sie auf die Schaltfläche „Analysieren“.
4. Nachdem das Plugin die Analyse abgeschlossen hat, können Sie sich alle zusätzlichen Optionen ansehen und Anpassungen vornehmen, abhängig von Ihrem übergeordneten Thema, aber die Standardeinstellungen sind normalerweise in Ordnung.
5. Sie können auf die Schaltfläche Attribute des untergeordneten Designs anzeigen/ausblenden klicken und den Namen des untergeordneten Designs und andere Metadaten ändern.
6. in der Option Menüs, Widgets und andere Customizer-Einstellungen vom Parent-Theme zum Child-Theme kopieren solltest du das Kontrollkästchen aktivieren, damit die Widgets und Customizer-Einstellungen von deinem bestehenden Parent-Theme in dieses neu erstellte Child-Theme migriert werden,
7. Klicken Sie auf die Schaltfläche Neues Child-Theme erstellen.

Das ist es!

Für ein vollständiges Tutorial zur Erstellung von Child-Themes und Beispiele für dieses Plugin schlage ich vor, dass Sie sich die Videos ansehen, die auf der Plugin-Seite des Child-Theme-Konfigurators gepostet werden.

Ich habe dieses Plugin auf unserem Adrenaline-Thema getestet und es hat großartig funktioniert. Das Child-Theme wurde erfolgreich erstellt und die Widgets und Customizer-Einstellungen wurden ebenfalls dorthin migriert, daher empfehle ich dieses Plugin auf jeden Fall.

Zusammenfassung

Untergeordnete Themen sind die empfohlene Methode zum Ändern von WordPress-Themen. Sie ermöglichen es Benutzern, das Thema mit geringfügigen oder größeren Änderungen zu ihrem eigenen zu machen, aber gleichzeitig das übergeordnete Thema intakt zu lassen.

Wir haben uns alles angesehen, was untergeordnete Themen zu bieten haben, und wenn Sie glauben, dass ich etwas unentdeckt gelassen habe, teilen Sie uns dies bitte im Kommentarbereich unten mit, und ich werde es diesem Handbuch hinzufügen.

Ich hoffe, Sie werden für jedes zukünftige WordPress-Projekt ein untergeordnetes Thema verwenden, da es im Grunde keine Nachteile gibt, sondern nur Vorteile. Wenn nichts anderes, kann Ihr übergeordnetes Thema regelmäßige Updates erhalten.