Einführung in die Entwicklung von WordPress-Themen: Erstellen Sie Ihr erstes Subtheme von Grund auf

WordPress ist als weltweit beliebtestes Content-Management-System vor allem aufgrund seiner hohen Anpassbarkeit bekannt – diese Eigenschaft beruht in erheblichem Maße auf seinem Theme-System. Für Entwickler, die die Aussehen ihrer Websites personalisieren möchten, ohne jedoch an den Kerncode herumfassen zu müssen, bieten Child Themes die ideale Lösung. Sie ermöglichen es, alle Funktionen des Parent-Themes sicher zu übernehmen und nur die notwendigen Änderungen vorzunehmen, um die gewünschten Anpassungen vorzunehmen. Dadurch wird sichergestellt, dass Updates des Parent-Themes Ihre eigenen Änderungen nicht überschreiben. In diesem Artikel lernen Sie, Schritt für Schritt, wie Sie ein vollständig funktionsfähiges WordPress-Child-Theme erstellen.

Was ist ein Subthema und welche sind dessen Hauptvorteile?

Ein Subtheme ist ein eigenständiges WordPress-Theme, das zur Ausführung auf ein anderes Theme (das als “Overlord-Theme” bezeichnet wird) angewiesen ist. Der Kerngedanke von Subthemes besteht in der Verwendung von Mechanismen der „Vererbung“ und „Überwriteung“ (der Änderung von Standardfunktionen des Overlord-Themes). Ein Subtheme enthält in der Regel nur eine Stylesheet-Datei und eine Funktionsdatei, mit deren Hilfe das Overlord-Theme umfassend angepasst werden kann.

Die Nutzung von Untertemplaten bietet einige unersetzliche Vorteile. Der wichtigste davon ist die Sicherheit bei Updates. Wenn Sie direkt die Dateien des Haupttemplats ändern, werden alle Ihre eigenen Anpassungen überschrieben, sobald das Haupttemplate aktualisiert wird – dies kann zu Stilproblemen oder Funktionsausfällen auf der Website führen. Mit Untertemplaten hingegen bleiben Ihre Änderungen im Verzeichnis des Untertemplats isoliert, sodass das Haupttemplate problemlos und ohne Auswirkungen auf Ihre Anpassungen aktualisiert werden kann.

Empfohlene Lektüre Einführung in die WooCommerce-Plugins: Erstellen Sie Ihren Online-Shop von Grund auf。

Als Nächstes kommt die Effizienz der Entwicklung. Sie müssen nicht von Grund auf alle Template-Dateien eines Themes erstellen, sondern lediglich den Teil des Themes bearbeiten, der geändert werden soll. Wenn Sie beispielsweise nur die Kopfzeile der Website ändern möchten, müssen Sie dies lediglich im zugehörigen Subtheme vornehmen. header.php Dateien, alle anderen Templates (z. B.) single.php、page.phpAlle Funktionen werden automatisch die Version des übergeordneten Themas verwenden. Dadurch wird die Entwicklungseffizienz erheblich gesteigert.

UltaHost – WordPress-Hosting-Anbieter

30-tägige Geld-zurück-Garantie, unbegrenztes Bandbreiten- und Datenbankvolumen, kostenlose DDoS-Schutzmaßnahmen sowie ein Rabatt von 501 auf 4 Terabyte bei einer Kaufdauer von 3 Jahren.

Zugangsseite

Zuletzt kommen die klare Struktur und die Portabilität. Der gesamte benutzerdefinierte Code befindet sich in einer separaten Themenordner, wodurch die Struktur auf den ersten Blick verständlich ist. Wenn Sie die Website auf einen neuen Server verschieben oder Ihre Anpassungen mit Teammitgliedern teilen müssen, genügt es, diesen Untertempenordner zu kopieren – die Verwaltung ist dadurch sehr einfach.

Erstellen Sie Ihren ersten Untertemekatalog und Ihre ersten Dateien.

Die Erstellung eines Sub-Themas ist technisch gesehen einfach – Sie müssen lediglich der spezifischen Dateistruktur und den Namenskonventionen folgen. Zunächst müssen Sie sich im Thema-Verzeichnis von WordPress befinden. /wp-content/themes/ Erstellen Sie nun einen neuen Ordner. Der Name dieses Ordners sollte dem Namen Ihres Untertemas entsprechen. Es wird empfohlen, kleine Buchstaben, Bindestriche und Zahlen zu verwenden, zum Beispiel: my-first-child-theme。

In diesem Ordner müssen Sie als erstes und wichtigstes ein Stylesheet-Datei erstellen. style.cssDieses Datei enthält nicht nur die Stylesheet-Regeln, sondern auch die Kommentare im Dateiheader, die für die Erkennung von Sub-Themen durch WordPress entscheidend sind. Diese Kommentare müssen bestimmte Informationen enthalten.

/*
 Theme Name:   My First Child Theme
 Theme URI:    https://example.com/my-first-child-theme/
 Description:  A child theme of the Twenty Twenty-Six theme
 Author:       Your Name
 Author URI:   https://example.com
 Template:     twentytwentysix
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  my-first-child-theme
*/

Bitte beachten Sie,Template: Diese Zeile ist von entscheidender Bedeutung: Sie muss exakt mit dem Namen des Ordners der übergeordneten Theme übereinstimmen – und dabei die Groß-/Kleinschreibung berücksichtigen. Wenn Sie beispielsweise das standardmäßige WordPress-Theme „Twenty Twenty-Six“ verwenden, lautet der Name des zugehörigen Ordners… twentytwentysixDann muss es hier geschrieben werden. twentytwentysixDurch diese Erklärung hat WordPress die Vererbungsbeziehung zwischen Untertemplaten (Sub-Themes) und Oberthemen (Parent-Themes) etabliert.

Empfohlene Lektüre Das ultimative Handbuch für die Entwicklung von WordPress-Themen: Von der Grundlage bis zur Erstellung professioneller Website-Themen。

Damit die Untertitel die Styles korrekt laden können, müssen Sie in der Regel auch eine zweite Kerndatei erstellen: die Funktionsdatei. functions.phpDie Funktion dieses Files entspricht der des übergeordneten Themas. functions.php Es erfolgt eine parallele Ladung – die Inhalte werden nicht überschrieben. Sie können dort benutzerdefinierten PHP-Code hinzufügen; am wichtigsten ist jedoch, dass dieser Code sicherstellt, dass die Stylesheets des Hauptthemas sowie der Untertemas ordnungsgemäß in die Warteschlange (Queue) aufgenommen werden.

Die Styles werden korrekt durch die Funktionsdatei geladen.

In den Untertöpfen (Subtopics).functions.php Die Hauptaufgabe einer Datei besteht in der Regel darin, das Laden von Stylesheets zu steuern. Obwohl dies auch für Untertemate gilt… style.css WordPress erkennt dies automatisch, aber um sicherzustellen, dass die Styles der übergeordneten („Parent“-)Themen zuerst und korrekt geladen werden, ist es die beste Praxis, einen WordPress-Aktionshaken („Action Hook“) zu verwenden, um die Ladereihenfolge explizit zu steuern.

Sie benötigen dies für die Untertitel. functions.php Schreiben Sie eine Funktion in der Datei und verwenden Sie sie anschließend. wp_enqueue_scripts Dieser Aktionshook wird verwendet, um die entsprechende Funktion aufzurufen. Dadurch wird sichergestellt, dass die Stylesheets korrekt und effizient im Kopfbereich der Seite geladen werden.

hosting.com Shared Hosting

Hohe Leistung mit AMD EPYC-CPUs, NVMe-SSD-Speicher und LiteSpeed, fachkundiger Inhouse-Support rund um die Uhr, erweiterte Sicherheitsmaßnahmen einschließlich SSL, Brute-Force-, Malware- und DDoS-Schutz, Einsparungen von bis zu 73%

Zugangsseite

Hier ist ein standardisiertes Beispiel für die Implementierung:

<?php
/**
 * Enqueue parent and child theme stylesheets.
 */
function my_first_child_theme_enqueue_styles() {
    // 首先加载父主题样式表
    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_first_child_theme_enqueue_styles' );

In dem obigen Code…get_template_directory_uri() Die Funktion gibt die URI des übergeordneten Themenverzeichnisses zurück. get_stylesheet_directory_uri() Die Funktion gibt die URI des aktuellen Aktivthemenkatalogs (d.h. des Untertemens) zurück. Durch die Deklaration der Untertemens-Stylesheet als abhängig von der Stylesheet des Überthemenkatalogs stellen wir sicher, dass die Reihenfolge der CSS-Überlagerung korrekt ist: Zuerst werden die Styles des Überthemenkatalogs angewendet, anschließend werden die Styles des Untertemens darauf aufgebaut und ergänzt.

Implementierung der üblichen Personalisierungen von Untertöpfen

Sobald die Grundstruktur aufgebaut ist, können Sie mit der eigentlichen Anpassung beginnen. Die häufigsten Anpassungen erfolgen in den Bereichen Styles und Template-Dateien.

Empfohlene Lektüre Eindeutige Analyse der WordPress-Plugin-Entwicklung: Von der Grundlage aus eigene Funktionen erstellen und erweitern。

Für die Anpassung der Styles müssen Sie lediglich in den Untertemplaten… style.css Fügen Sie neue CSS-Regeln zum File hinzu. Da diese nach den Styles des übergeordneten Themes geladen werden, haben sie eine höhere Priorität (vorausgesetzt, die Selektoren sind gleich spezifisch). Wenn Sie beispielsweise die Farbe aller Links auf der Website ändern möchten, können Sie Folgendes hinzufügen:

/* 在子主题的 style.css 文件中 */
a {
    color: #3498db; /* 覆盖父主题的链接颜色 */
}

.site-header {
    background-color: #2c3e50; /* 修改页头背景色 */
}

Für komplexere Layout- oder Funktionsanpassungen müssen Sie die Template-Datei des übergeordneten Themes überschreiben. Dies ist eine der mächtigsten Funktionen eines Untertemas. Die Vorgehensweise ist wie folgt: Laden Sie die Template-Datei des übergeordneten Themes herunter, die Sie ändern möchten (z. B. header.php、footer.php oder page.phpKopieren Sie die Datei in den Verzeichnis Ihrer Untertempe. Danach wird WordPress automatisch von dieser Kopie im Untertempe-Verzeichnis ausgehen und die ursprüngliche Datei in der Haupttempe ignorieren.

InterServer Shared Hosting

Shared Hosting $2.50 USD pro Monat, erster Monat $0.1 USD Promo-Code tryinterserver, 461 Cloud-Apps Skripte, ein Klick installieren.

Zugangsseite

Zum Beispiel können Sie, um den Fußbereich einer Seite anzupassen, die Elemente des übergeordneten Themes verwenden. footer.php Kopieren Sie die Datei in das Unterthemen-Verzeichnis und öffnen Sie anschließend die Kopie, um sie zu bearbeiten. Sie können die Urheberrechtsangaben ändern, die Widget-Region entfernen oder hinzufügen usw. Denken Sie daran, dass Sie nur die Dateien kopieren sollten, die geändert werden müssen – das gesamte Elternthema muss nicht kopiert werden.

Darüber hinaus können Sie auch in den Untertopiken… functions.php Neue Funktionen können hinzugefügt werden. Zum Beispiel kann eine neue Bereich für Seitenausschnitte („Sidebars“), die Unterstützung für benutzerdefinierte Artikeltypen oder die Ausführung zusätzlicher Skripte für bestimmte Seiten eingeführt werden. Diese Code-Änderungen bleiben sicher in Ihrem Subtheme gespeichert.

Zusammenfassungen

Durch die Schritte in diesem Artikel haben Sie den gesamten Prozess beherrscht – von der Erstellung der Verzeichnisstruktur über das Schreiben der notwendigen Stylesheet-Header-Informationen bis hin zum korrekten Laden der Stylesheets über Funktionsdateien sowie der Überwriting spezifischer Styles und Templates. Sub-Themes stellen eine grundlegende und entscheidend wichtige Best Practice in der WordPress-Entwicklung dar: Sie trennen Ihre eigenen Anpassungen klar vom Kerncode des Themes, was die Langzeitwartbarkeit und Sicherheit der Website gewährleistet. Egal, ob Sie nur einfache Farbanpassungen vornehmen möchten oder eine umfassende Layout-Überarbeitung durchführen – mit Sub-Themes beginnen ist der klügste und professionellste Ansatz.

FAQ Häufig gestellte Fragen

Kann man für jedes WordPress-Theme ein Subtheme erstellen?

Theoretisch kann jedes Theme, das den Schreibstandards entspricht und die WordPress-Codierungsrichtlinien einhält, als Parent-Theme verwendet werden, um Sub-Themes zu erstellen. Sie müssen lediglich sicherstellen, dass bei der Erstellung des Sub-Themes alle erforderlichen Anforderungen berücksichtigt werden. style.css Das ist eine gute Frage. Template: Füllen Sie einfach den Namen des Ordners des übergeordneten Themas im Feld korrekt ein.

Allerdings können einige Themen mit sehr einfacher Gestaltung oder besonderer Struktur (z. B. solche, deren Styles nicht auf standardmäßige Weise geladen werden) dazu führen, dass die darin enthaltenen Untertemple nicht ordnungsgemäß funktionieren. Bei der Auswahl eines übergeordneten Themes ist es in der Regel sicherer, auf solche zu setzen, die beliebt sind, regelmäßig aktualisiert werden und über umfassende Dokumentation verfügen.

Überdeckt die functions.php des Unterthemas die des Eltern-Themas?

Nein. Das ist einer der häufigsten Missverständnisse bezüglich Subthemen. functions.php Die Datei wird nicht die Datei mit dem gleichen Namen im übergeordneten Thema überschreiben, sondern wird in das übergeordnete Thema hinzugefügt. functions.php Danach wird es geladen.

Das bedeutet, dass der Code in beiden Dateien ausgeführt wird. Sie können dies in den Untertiteln (Subtopics) weiter erklären bzw. darauf hinweisen. functions.php Sie können neue Funktionen hinzufügen oder die bestehende Funktionalität mit WordPress-Hooks ändern, aber Sie können keine Funktion im Parent-Theme direkt durch die Erstellung einer Funktion mit dem gleichen Namen “überschreiben” – dies würde zu einem fatalen PHP-Fehler führen. Um das Verhalten einer Funktion im Parent-Theme zu ändern, müssen Sie in der Regel Action-Hooks oder Filter-Hooks verwenden.

Was tun, wenn die Website-Optik nach der Aktivierung eines Unterthemas durcheinanderkommt?

Falls das Erscheinungsbild der Website nach der Aktivierung eines Unterthemas völlig abnormal ist, liegt dies in der Regel daran, dass die Stylesheets nicht korrekt geladen wurden. Bitte führen Sie die folgenden Schritte durch, um das Problem zu ermitteln:

Zuerst sollten die Untertitel überprüft werden. style.css In der Dateiheader-Region… Template: Stellen Sie sicher, dass der Wert genau mit dem Namen des Ordners des übergeordneten Themas übereinstimmt – einschließlich Groß- und Kleinschreibung. Dies ist die häufigste Ursache für Probleme.

Zweitens: Überprüfen Sie Ihre… functions.php Der Code in der Datei – insbesondere… wp_enqueue_style Stellen Sie sicher, dass bei der Funktionseinwahl der Pfad sowie die Abhängigkeiten korrekt eingestellt sind und es keine PHP-Syntaxfehler gibt. Sie können in WordPress unter “Panneel -> Werkzeuge -> Websitegesundheit” nach entsprechenden Fehlermeldungen suchen.

Schließlich sollten Sie alle Caches auf Ihrer Website und in Ihrem Browser löschen und die Seite dann neu laden, um die Änderungen zu sehen.

Wie fügt man benutzerdefinierte Seitenvorlagen in Untertemae hinzu?

Das Hinzufügen einer benutzerdefinierten Seitevorlage in einem Untertema ist genauso einfach wie in einem normalen Thema. Sie müssen lediglich eine neue PHP-Datei im Verzeichnis des Untertemas erstellen und am Anfang dieser Datei einen bestimmten Kommentarblock hinzufügen, um anzugeben, dass es sich um eine Seitevorlage handelt.

Beispielsweise, erstellen Sie einen Namen namens my-full-width.php Die Datei sollte zu Beginn folgende Elemente enthalten:

<?php
/**
 * Template Name: 我的全宽页面
 * Description: 一个没有侧边栏的全宽页面模板。
 */

Danach können Sie in dieser Datei Ihren Template-Code schreiben. Sobald die Erstellung abgeschlossen ist, werden Sie bei der Erstellung oder Bearbeitung einer Seite im WordPress-Backend die Option “Meine Vollbreitseite” im Dropdown-Menü “Seiten-Eigenschaften” sehen.