Ihr ultimativer Leitfaden zum Arbeiten mit WordPress-Child-Themes

Wenn Sie Themen, die Sie bei uns bei HeroThemes kaufen, anpassen möchten, vielleicht wenn Sie Websites für sich selbst oder Ihre Kunden mit einem maßgeschneiderten Design erstellen, dann ist es etwas, das Sie brauchen, um die Leistungsfähigkeit von untergeordneten WordPress-Themen zu nutzen.

Im Grunde wird die Verwendung von untergeordneten Themen Sie effizienter machen – den Code, den Sie für jedes Projekt verwenden, in Ihrem eigenen übergeordneten Thema zu behalten oder ein standardmäßiges übergeordnetes Thema wie eines von uns zu verwenden, bedeutet, dass Sie sich daran halten DRY-Prinzipien (Do Not Repeat Yourself).

Darüber hinaus können Sie untergeordnete und übergeordnete Themen verwenden, um Netzwerke von Websites mit einer Kerncodebasis zu erstellen, Sie können benutzerdefinierte Themen basierend auf Themen-Frameworks von Drittanbietern erstellen oder sogar Ihr eigenes erweitertes übergeordnetes Thema zur Verwendung als Themen-Framework erstellen . In diesem Artikel gebe ich einen kurzen Überblick über die Grundlagen von Child-Themes und zeige Ihnen dann einige fortgeschrittenere Techniken. Du wirst lernen:

• wie man ein Child-Theme verwendet, um ein Parent-Theme oder ein Theme-Framework eines Drittanbieters an die Bedürfnisse Ihres Projekts anzupassen
• wie WordPress die Vorlagendateien in jedem der übergeordneten und untergeordneten Themen priorisiert
• wie man Parent-Theme-Funktionen in der Funktionsdatei Ihres Child-Themes überschreibt.

Übergeordnete und untergeordnete Themen verstehen

Theoretisch kann jedes Theme als übergeordnetes Theme fungieren, obwohl einige besser für diese Rolle konzipiert sind (einschließlich unseres!). Wenn du eines unserer Themes verwendest und es für dein eigenes Projekt optimieren möchtest, ist es viel besser, ein Child-Theme dafür zu verwenden, als das Haupt-Theme zu hacken, was bedeutet, dass du alle deine Änderungen verlierst, wenn du aktualisierst das Design für zukünftige Versionen. Um ein untergeordnetes Design zu erstellen, erstellen Sie einfach ein neues Design und fügen am Anfang seines Stylesheets Folgendes hinzu. Mein Beispiel unten verwendet das HeroThemes-Thema HelpGuru als übergeordnetes Thema, aber Sie können jedes Thema verwenden, einschließlich eines anderen HeroTheme-Produkts wie KnowAll.

Beginnen Sie noch heute mit dem Aufbau Ihrer Wissensdatenbank!

Unser KnowAll-Design enthält ein untergeordnetes Design, mit dem Sie Ihre Wissensdatenbank-Site anpassen können

Holen Sie sich das Thema

/*
Theme Name: My child theme
Theme URI: URL of the theme or site it's used for
Description: Description of what the theme is for and its main features.
Author: Your name
Template: helpguru
Version: 1.0
*/
@import url("../helpguru/css/style.css");

Die wichtigen Zeilen sind diese beiden:

Template: helpguru
@import url("../helpguru/css/style.css");

Der erste Abschnitt spezifiziert die Vorlage, die WordPress mitteilt, dass dies ein untergeordnetes Thema ist und dass sein übergeordnetes Thema das HelpGuru-Thema ist. Beachten Sie, dass Sie hier den Namen des Ordners des übergeordneten Designs verwenden und nicht den Namen des Designs (oben habe ich „helpguru“ verwendet, nicht „HelpGuru“).

Der zweite Abschnitt importiert das Stylesheet aus dem Parent-Theme, was bedeutet, dass alle Stile des Parent-Themes in deinem Child-Theme aktiviert werden. Du @import dann unterhalb dieser @import-Deklaration dein eigenes Styling hinzu – das bedeutet, dass das Styling aus beiden Themes verwendet wird, aber wenn in beiden Stylesheets eine Deklaration für dasselbe Element vorhanden ist, wird das CSS des Child-Themes wegen der Kaskade Vorrang haben (wie das deines Child-Themes Styling kommt nach dem Styling aus dem Parent-Theme).

Ein untergeordnetes Thema kann aus einem Stylesheet und nichts anderem bestehen, wenn Sie möchten. In diesem Fall können Sie damit nur einen Teil des Stils des übergeordneten Themas überschreiben. Alternativ können Sie zusätzliche Vorlagendateien und/oder eine Funktionsdatei hinzufügen. In diesem Fall müssen Sie verstehen, wie WordPress auf Vorlagendateien Ihrer übergeordneten und untergeordneten Themen zugreift.

Vorlagendateien für übergeordnete und untergeordnete Themen

Die Art und Weise, wie WordPress Vorlagendateien in übergeordneten und untergeordneten Themen verwendet, ist recht einfach. Wenn eine bestimmte Seite (oder ein Beitrag oder ein anderer Inhaltstyp) angezeigt wird, verwendet WordPress die relevanteste Vorlagendatei aus dem übergeordneten oder untergeordneten Thema gemäß der Vorlagenhierarchie. Wenn es zwei Versionen derselben Vorlagendatei findet, wird diejenige aus dem untergeordneten Design verwendet. Dies bedeutet, dass die Vorlagendateien Ihres untergeordneten Designs die Vorlagendateien des übergeordneten Designs in zwei Szenarien überschreiben:

• wenn Ihr Child-Theme eine Vorlagendatei enthält, die in der Hierarchie höher ist als die im Parent-Theme;
• oder ob Ihr übergeordnetes und untergeordnetes Design beide eine Version der erforderlichen Vorlagendatei enthalten.

Entscheiden über Template-Dateien für Parent- oder Child-Themes

WordPress verwendet die Vorlagenhierarchie, um zu bestimmen, welche Vorlagendatei verwendet werden soll, aber dies interagiert mit den Dateien, die Sie in jedem Ihrer übergeordneten und untergeordneten Themen haben. Vereinfacht gesagt durchläuft WordPress drei Schritte:

1. Es identifiziert die Art des angezeigten Inhalts.
2. Es arbeitet sich durch die Vorlagenhierarchie, bis es eine Datei findet, um diesen Inhalt anzuzeigen, entweder im übergeordneten oder im untergeordneten Design.
3. Wenn die Datei sowohl im Parent- als auch im Child-Theme vorhanden ist, wird diejenige aus dem Child-Theme verwendet.

Lassen Sie uns dies an einem Beispiel veranschaulichen. Die folgende Tabelle zeigt den Satz von Vorlagendateien in zwei hypothetischen Themen, von denen eines das Kind des anderen ist. Die Dateien, die ich hervorgehoben habe, haben Vorrang.

Schauen wir uns also im obigen Beispiel an, welche Vorlagendateien verwendet werden, um bestimmte Arten von Inhalten anzuzeigen:

• Einzelne Beiträge für den benutzerdefinierten Beitragstyp „Produkt“ würden mithilfe von single-product.php aus dem untergeordneten Thema angezeigt.
• Einzelne Beiträge für andere Beitragstypen (einschließlich normaler Beiträge) würden mithilfe von single.php aus dem untergeordneten Thema angezeigt.
• Statische Seiten würden mithilfe von page.php aus dem übergeordneten Thema angezeigt.
• Auflistungen für die Kategorie Widgets würden mithilfe von category-widgets.php aus dem untergeordneten Thema angezeigt.
• Andere Kategorielisten würden mithilfe von category.php aus dem übergeordneten Thema angezeigt.
• Andere Archivlisten würden mithilfe von archive.php aus dem übergeordneten Thema angezeigt.
• Suchergebnisse würden mithilfe von search.php aus dem übergeordneten Design angezeigt.
• 404-Seiten würden mit 404.php aus dem übergeordneten Thema angezeigt.
• Andere Seiten ohne eine bestimmte Vorlagendatei würden mithilfe von index.php aus dem untergeordneten Thema angezeigt.

Noch weiter gehen – Überschreiben der Parent-Theme-Funktionalität

Neben dem Überschreiben oder Ergänzen der CSS- und/oder Vorlagendateien in einem übergeordneten Design können Sie ein untergeordnetes Design verwenden, um die Funktionalität im übergeordneten Design zu überschreiben oder zusätzliche Funktionen hinzuzufügen.

Warnung! Wenn Sie Ihr untergeordnetes Thema nur verwenden, um zusätzliche Funktionen hinzuzufügen, ist es möglicherweise besser, ein Plugin zu schreiben. Leider interagieren die Funktionsdateien in übergeordneten und untergeordneten Themen nicht auf die gleiche Weise wie die Stylesheets, tatsächlich funktionieren sie auf die entgegengesetzte Weise (verwirrend, ich weiß). WordPress ruft die Funktionen deines Parent-Themes nach denen deines Child-Themes auf, was bedeutet, dass sie die Funktionen des Child-Themes überschreiben können. Ich weiß, das klingt ein bisschen mühsam: Sie haben ein untergeordnetes Thema erstellt, da Sie das auf Ihrer Website haben möchten, oder? Nun, zum Glück gibt es Möglichkeiten, dies zu überwinden. Die erste Methode verwenden Sie in Ihrem untergeordneten Thema, und zwar zum Festlegen der Priorität beim Anhängen Ihrer Funktionen an die relevanten Aktions- oder Filter-Hooks. Die zweite erfolgt im übergeordneten Thema, um Ihre Funktionen austauschbar zu machen. Dazu komme ich gleich, aber schauen wir uns zuerst die Methode in Ihrem Child-Theme an.

Verwenden der Priorität zum Überschreiben der Funktionalität des übergeordneten Designs

Um jede Funktion zu aktivieren, die du in deinem Child-Theme hinzufügst, musst du sie mit add_action() oder add_filter() an einen Aktions- oder Filter-Hook anhängen. Die Funktionen add_action() und add_filter() haben drei Parameter:

• $tag – die eindeutige Kennung für die Aktion oder den Filter-Hook
• $function_to_add – der Name Ihrer Funktion
• $priority – die Priorität, mit der Sie Ihre Funktion verknüpfen möchten (mehr davon in Kürze)

Mit add_filter() können Sie einen vierten optionalen Parameter verwenden, $arguments , aber das ist nicht besonders relevant für Child-Themes. In den meisten Fällen werden nur die ersten beiden Parameter (die beide erforderlich sind) verwendet, aber Sie können den optionalen Parameter $priority verwenden, um eine Funktion im Parent-Theme mit der Funktion in Ihrem Child-Theme zu überschreiben. Je höher die Priorität, desto später wird es geladen: Der Standardwert ist 10 . Wenn also das übergeordnete Thema keine Priorität angibt, setzen Sie die Priorität in Ihrem untergeordneten Thema einfach auf eine Zahl höher als 10. Sehen wir uns an, wie dies funktioniert funktioniert. Stellen Sie sich vor, Sie arbeiten mit einem untergeordneten Thema des HelpGuru-Designs und möchten die Menüfunktionalität überschreiben und Ihre eigene hinzufügen. Dieses Thema enthält die Funktion ht_theme_setup() zum Einrichten des Themas (einschließlich Registrieren von Menüs, Hinzufügen von unterstützten Bildern und mehr), die an den Action-Hook after_setup_theme angehängt ist. Der Code in der Funktionsdatei von HelpGuru lautet wie folgt:

if ( ! function_exists( 'ht_theme_setup' ) ) :
function ht_theme_setup() {
// contents of function
}
}
add_action( 'after_setup_theme', 'ht_theme_setup' );

Um Elemente der Funktion ht_theme_setup() (aber nicht alle: dazu kommen wir gleich) in Ihrem Child-Theme zu überschreiben, würden Sie eine Funktion schreiben, die Elemente der von HelpGuru bereitgestellten Funktionalität ersetzt, und sie an die Aktion after_setup_theme anhängen Hook, der eine Priorität höher als 10 angibt:

function my_theme_setup() {
// contents of function
}
add_action( 'after_setup_theme', 'my_theme_setup', 15 );

Wenn WordPress auf diese Funktionen stößt, die mit demselben Hook verbunden sind, wird zuerst die Funktion mit der niedrigeren Priorität ausgelöst, dh diejenige aus dem übergeordneten Thema. Es wird dann das mit der höheren Priorität aus deinem Child-Theme ausgelöst, was bedeutet, dass es die Funktion aus dem Parent-Theme überschreiben kann. Wie ich oben erwähnt habe, gibt es eine andere Methode, die Sie in Ihre Themen schreiben sollten, damit sie einfacher als übergeordnete Themen verwendet werden können, und die darin besteht, Ihre Funktionen austauschbar zu machen.

Pluggable Functions verwenden, um ein Child-Theme-Override zuzulassen

Da WordPress die Funktion im Parent-Theme nach denen in deinem Child-Theme übergibt, kannst du die Funktionen deines Parent-Themes so codieren, dass sie nach einer Funktion mit demselben Namen im Child-Theme suchen und, falls vorhanden, die Parent-Theme-Funktion nicht vorhanden ist bestanden. Sie tun dies mit einer bedingten Anweisung, wie wir sie oben in HelpGuru gesehen haben:

if ( ! function_exists( 'ht_theme_setup' ) ) :
function ht_theme_setup() {
// contents of function
}
}

Wenn noch keine gleichnamige Funktion übergeben wurde (zB im Child-Theme), wird die Funktion aus dem Parent-Theme übergeben. Wenn WordPress jedoch bereits auf eine Funktion mit diesem Namen gestoßen ist, ignoriert es die Pluggable-Funktion (dh die im Parent-Theme). Damit dies funktioniert, erstellen Sie einfach Funktionen in Ihrem untergeordneten Design mit demselben Namen wie die Funktionen in Ihrem übergeordneten Design, die Sie überschreiben möchten. Um also die Funktion ht_theme_setup() vollständig zu überschreiben, würdest du dies in deinem Child-Theme verwenden:

function ht_theme_setup() {
// contents of function
}

Das ist es! Schreiben Sie einfach eine andere Funktion mit demselben Namen und sie überschreibt die im übergeordneten Thema. Hinweis: Diese Technik funktioniert nur, wenn Sie Ihr eigenes übergeordnetes Design erstellen – seien Sie nicht versucht, die Funktionsdatei in einem übergeordneten Design eines Drittanbieters zu bearbeiten, um sie austauschbar zu machen. Schließlich ist der springende Punkt beim Erstellen eines untergeordneten Themas, dass Sie das übergeordnete Thema nicht berühren!

Zusammenfassung

Wie ich hoffentlich demonstriert habe, kann die Arbeit mit untergeordneten Themen Ihre Effizienz und Effektivität als WordPress-Entwickler steigern, insbesondere wenn Sie benutzerdefinierte Websites für Kunden oder sich selbst entwickeln. Zumindest kann die Verwendung eines untergeordneten Designs eines vorhandenen Designs wie eines unserer HeroThemes Ihren Entwicklungsworkflow schneller und effizienter machen, da es Ihnen erspart, immer wieder die gleiche Arbeit zu erledigen.

Sie können dies weiterführen, indem Sie die Vorlagendateien und Funktionsdateien des untergeordneten Designs verwenden, um die Funktionalität des übergeordneten Designs zu überschreiben oder zu ergänzen. Und wenn Sie Child-Themes wirklich voll ausschöpfen möchten, können Sie Ihr eigenes Parent-Theme erstellen, das Ihnen einen schnellen Ausgangspunkt für alle neuen Projekte bietet und es Ihnen ermöglicht, Ihren Child-Themes mit weniger Aufwand viel mehr hinzuzufügen, als wenn Sie ganz von vorne anfangen würden .