Von Null auf Eins: Lernen Sie Schritt für Schritt die Kernkompetenzen der modernen WordPress-Themenentwicklung

Grundlegende Konzepte der Entwicklung moderner WordPress-Themes

Die Architektur moderner WordPress-Themen unterscheidet sich deutlich von den herkömmlichen Methoden. Der wesentliche Wandel besteht darin, dass Block-Themen sowie das “Full Site Editing” (FSE)-Konzept vollständig eingeführt wurden. Dadurch kann das Erscheinungsbild und die Layoutstruktur eines Themes – von der Kopfzeile über den Fußbereich bis hin zum Artikelinhalt – mithilfe der „Blöcke“ im Gutenberg-Editor erstellt und geändert werden, ohne dass man komplexe PHP-Templates direkt schreiben muss.

Die Kerndateistruktur eines modernen Themes wurde grundlegend vereinfacht. Das wichtigste dieser Template-Dateien ist…theme.jsonEs definiert globale Einstellungen wie das Design des Themas, die Farbpalette sowie die Formatierung. Ein weiteres äußerst wichtigeres Dokument ist…index.htmlEs hat das traditionelle ersetzt.index.phpAls Standardvorlage werden statische HTML-Blöcke verwendet, die vom Editor interpretiert werden können, um den Rahmen der Seite zu erstellen. Gleichzeitig…style.cssDie Datei existiert weiterhin und dient hauptsächlich dazu, Themeninformationen anzugeben. Die meisten CSS-Style-Definitionen wurden jedoch in eine andere Datei übertragen.theme.jsonOder von einem Editor verwaltet.

Um die Rückwärtskompatibilität zu gewährleisten, prüft WordPress, ob sich im Hauptverzeichnis des Themes ein bestimmtes Element befindet.block-templatesodertemplatesOrdnern. Diese Ordner dienen zum Speichern von blockbasierten HTML-Template-Dateien.single.htmloderpage.htmlSie werden bevorzugt vor PHP-Templatendateien verwendet. Gleichzeitig hängt die Verarbeitung von Styles und Frontend-Ressourcen, die aus dem Thema stammen, davon ab…wp_enqueue_styleundwp_enqueue_scriptFunktionen befinden sich in der Regel im Hauptdatei.functions.phpRegistrieren und anstehen Sie dort.

Empfohlene Lektüre WordPress-Themenentwicklung von der Grundlage bis zur Meisterschaft: Schritt für Schritt lernen Sie, wie Sie benutzerdefinierte Webseiten erstellen.。

Das Verständnis dieser Denkweise-Veränderung – von der Erstellung fest definierter PHP-Templates zur Definition von Styles und Strukturen mithilfe von JSON und Blockmarkern – ist der erste Schritt, um moderne Theme-Entwicklung zu meistern.

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

Erstellung und Konfiguration von Kerndateien des Themas

Um ein modernes WordPress-Theme zu erstellen, muss man zunächst…wp-content/themesErstellen Sie einen neuen Themenordner im Verzeichnis. Dies gilt auch für Block-Themen.style.cssDie Datei bleibt weiterhin eine erforderliche “Identifikationsdatei”; der Kommentarblock am Anfang der Datei muss bestimmte Informationen enthalten.

/*
Theme Name: 我的现代主题
Theme URI: https://example.com/my-theme
Author: Your Name
Author URI: https://example.com
Description: 一个使用全站编辑的现代WordPress主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-modern-theme
*/

Unmittelbar danach musst du ein “Gehirn” im modernen Stil erstellen.theme.jsonDieses JSON-Datei befindet sich im Hauptverzeichnis des Themes und dient der zentralen Steuerung der globalen Styles und Themen-Einstellungen. Mithilfe dieser Datei können Sie das Layout-System (z. B. Schriftgröße, Schriftfamilien), die Farbpalette sowie die Standardstyles der Blöcke definieren. Plugins und Untertemate können diese Einstellungen weiter überlagern, um eine individuelle Gestaltung der Styles zu ermöglichen.theme.jsonDie Struktur ist wie folgt:

{
  "version": 2,
  "settings": {
    "color": {
      "palette": [
        { "name": "黑色", "slug": "black", "color": "#000000" },
        { "name": "白色", "slug": "white", "color": "#ffffff" }
      ]
    },
    "typography": {
      "fontSizes": [
        { "name": "小", "slug": "small", "size": "14px" },
        { "name": "中", "slug": "medium", "size": "20px" }
      ]
    }
  },
  "styles": {
    "color": {
      "background": "white",
      "text": "black"
    },
    "typography": {
      "fontSize": "var(--wp--preset--font-size--medium)"
    }
  },
  "customTemplates": [
    {
      "name": "宽幅页面",
      "title": "宽幅页面",
      "postTypes": [ "page" ]
    }
  ]
}

Hauptvorlage des Themasindex.htmlDie Standardseitestruktur wurde definiert. Sie besteht ausschließlich aus Blockelementen, die von dem Editor als HTML-Kommentare erkannt werden, beispielsweise:

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
    <!-- wp:post-content {"layout":{"type":"constrained"}} /-->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

Diese Struktur teilt die Seitenkopfzeile, den Hauptinhaltsbereich und den Fußbereich klar voneinander ab und sorgt dafür, dass…wp:post-contentDer Inhalt der Artikel wird dynamisch in Blöcken geladen. Zum Schluss muss im Wurzelverzeichnis des Themes ein Verzeichnis für die „Template Parts“ (Vorlagenkomponenten) erstellt werden.partsUnd platzieren Sie es darin.header.htmlundfooter.htmlDateien für Komponenten usw.

Empfohlene Lektüre Populärer Einstiegshandbuch für 2026: Wie Sie Ihre erste WordPress-Theme von Grund auf erstellen。

Seiten mit Hilfe von Templates und Template-Teilen erstellen.

In block-based themes wird die Layoutstruktur der Seiten hauptsächlich mithilfe von Templates und Template-Teilen (Template Parts) erstellt. Templates dienen dazu, das Gesamtrahmenkonzept für bestimmte Arten von Seiten (z. B. einzelne Artikel, Archivseiten) zu definieren, während Template-Teile wieder verwendbare Module sind – beispielsweise Kopf- und Fußzeilen.

Template-Dateien werden in der Regel in den Verzeichnissen der jeweiligen Themes gespeichert.templatesIm Verzeichnis befinden sich die entsprechenden Dateien. WordPress passt automatisch spezifische Vorlagen zu verschiedenen Abfragenarten hin. Zum Beispiel…single.htmlDient zur Darstellung eines einzelnen Artikels.page.htmlFür statische Webseiten verwendet.home.htmloderindex.htmlFür die Startseite eines Blogs. Sie können…theme.jsonDas ist eine gute Frage.customTemplatesEinige Deklarationen definieren benutzerdefinierte Vorlagen, die den Nutzern im Seiteneditor zur Auswahl stehen.

Die Vorlageteile werden gespeichert in …partsIn der Ordnerstruktur wird die Wiederverwendbarkeit des Codes sowie die Wartungsmöglichkeiten erheblich verbessert. Es wurde eine Header-Datei erstellt.header.htmlDie obere Bereich kann mithilfe von Titelblöcken, Navigationselementen usw. der Website erstellt werden. Erstellen Sie außerdem eine Fußzeilen-Datei (Footer-Datei).footer.htmlHier kann die Urheberrechtsinformation sowie der Bereich für kleine Hilfsmittel („Widgets“) platziert 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

Ein typisches…header.htmlEs könnte wie folgt aussehen:

<!-- wp:group {"tagName":"header","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
<header class="wp-block-group">
    <!-- wp:site-title /-->
    <!-- wp:navigation {"ref":4} /-->
</header>
<!-- /wp:group -->

In diesem Beispiel…wp:navigationDie Blöcke werden durch ihr…refDie Eigenschaft verweist auf ein Navigationsmenü, das in “Erscheinungsbild” -> “Editor” erstellt und gespeichert wurde (es hat die ID 4). Dies zeigt die Stärke der Trennung von Inhalt und Struktur bei der gesamten Website-Editierung. Durch die Verwendung dieser Komponenten im Haupttemplate wird…Sie können sie einfach in die Seite einfügen.

Für komplexere Layouts kann man folgende Methoden nutzen:wp:group、wp:columns、wp:queryMan verwendet „Blocke“ zur Erstellung von Zeilen, Spalten sowie wiederholten Inhalten. Zum Beispiel…wp:queryDie Blöcke können dynamisch die neuesten Artikel anzeigen – das entspricht in etwa der Hauptschleife in herkömmlichen Themes. Allerdings wird dies heute vollständig über einen visuellen Editor konfiguriert.

Empfohlene Lektüre Vom Anfang bis zur Meisterschaft: Ein umfassender Leitfaden und Praktikumskurs für die Entwicklung von WordPress-Themen。

Funktionen und Styles werden über Dateien mit Funktionen hinzugefügt.

Obwohl die Block-Themen stark abhängig sind von…theme.jsonUnd HTML-Templates, aber…functions.phpDie Dateien bleiben weiterhin das Kernstück der Erweiterungsfunktionen. Es handelt sich um PHP-Dateien, die keine Rückgabewerte liefern und zur Hinzufügung von Funktionen, zum Registrieren von Stylescripten sowie zur Definition der Themaunterstützung verwendet werden.

Eine grundlegende Operation besteht darin, Stylesheets und Scripts für Themen zu registrieren und in eine Warteschlange zu geben. Selbst wenn die Stylesheets hauptsächlich…theme.jsonFür die Verwaltung könnten Sie möglicherweise zusätzliche, benutzerdefinierte CSS-Dateien benötigen.

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

function my_modern_theme_setup() {
    // 添加对特定功能的支持，例如自定义标志
    add_theme_support('custom-logo');
    // 通过区块编辑器添加主题样式
    add_theme_support('wp-block-styles');
    // 添加对全站编辑器的支持
    add_theme_support('editor-styles');
}
add_action('after_setup_theme', 'my_modern_theme_setup');

function my_modern_theme_scripts() {
    // 排队主题的主样式表
    wp_enqueue_style(
        'my-modern-theme-style',
        get_stylesheet_uri(),
        array(),
        wp_get_theme()->get('Version')
    );
    // 排队编辑器样式
    add_editor_style('style-editor.css');
}
add_action('wp_enqueue_scripts', 'my_modern_theme_scripts');

functions.phpEs ist auch eine hervorragende Gelegenheit, benutzerdefinierte Funktionen hinzuzufügen. Zum Beispiel können Sie…register_block_styleDie Funktion registriert eine benutzerdefinierte visuelle Variante für bestehende Kernblöcke (z. B. Absätze), sodass diese im “Stil”-Panel des Editors angezeigt werden und vom Benutzer ausgewählt werden können.

// 为段落块注册一个“特别提示”样式
register_block_style(
    'core/paragraph',
    array(
        'name'         => 'notice',
        'label'        => __( '特别提示', 'my-modern-theme' ),
        'inline_style' => '.is-style-notice { padding: 1em; border-left: 4px solid #00a0d2; background-color: #f0f8ff; }',
    )
);

Darüber hinaus können Sie auch Haken (z. B. Hooks) verwenden.wp_head、wp_footerEinfügen von benutzerdefiniertem Code – oder durch…add_filterDie Standardabfrageverhalten sowie die Ausgabeinhalte können angepasst werden. Für komplexe Anpassungswünsche könnte die Erstellung eines kleinen Plugins eine modulare und praktische Lösung sein.

Thema „Testen und Debuggen“

Nach Abschluss der Entwicklung ist eine umfassende Testung des Themes von großer Bedeutung. Zunächst sollte das Theme in einer lokalen oder temporären Umgebung aktiviert werden, um die grundlegende Layoutstruktur der Frontend-Seiten, das responsive Design sowie die korrekte Anzeige aller Kernkomponenten (Titel, Absätze, Bilder, Galerien, Buttons usw.) zu überprüfen. Außerdem müssen sichergestellt werden, dass das Navigationsmenü und die Links ordnungsgemäß funktionieren.

Zweitens ist es notwendig, den Gutenberg-Editor gründlich zu testen. Erstellen Sie neue Seiten und Artikel und versuchen Sie, komplexe Layouts mit verschiedenen Blöcken zu erstellen. Überprüfen Sie außerdem, ob die Toolbars und Einstellungspanele der Blöcke ordnungsgemäß funktionieren, sowie ob es möglich ist, benutzerdefinierte Styles einzusetzen (z. B. durch…)theme.jsonStellen Sie sicher, dass die definierten Farbpaletten und Schriftgrößen korrekt auf den jeweiligen Blöcken angewendet werden. Testen Sie insbesondere den gesamten Website-Editor unter “Erscheinungsbild” -> “Editor” und versuchen Sie, Änderungen an Kopfzeilen, Fußzeilen oder der Startseite vorzunehmen. Überprüfen Sie außerdem, ob die Änderungen nach dem Speichern korrekt auf der Benutzeroberfläche angezeigt werden.

Debugging ist ein zentraler Bestandteil der modernen Entwicklung. Öffnen Sie die Entwicklertools Ihres Browsers (Taste F12) und überprüfen Sie, ob es JavaScript-Fehler oder CSS-Konflikte gibt.wp-config.phpEinstellungen in der Mittedefine('WP_DEBUG', true);PHP-Warnungen und Fehler können auf der Seite angezeigt werden, um Ihnen dabei zu helfen, Probleme im Code schnell zu lokalisieren. Stellen Sie außerdem sicher, dass das verwendete Theme den Codierstandards von WordPress entspricht, und überprüfen Sie mit dem W3C-Validator in der Konsole, ob es Fehler in der HTML-Struktur gibt.

Schließlich sollten Sie die Plattformenübergreifende Kompatibilität in verschiedenen Browsern (Chrome, Firefox, Safari, Edge) sowie auf verschiedenen Geräten (Desktop, Tablet, Smartphone) testen, um sicherzustellen, dass alle Nutzer ein einheitliches Erlebnis haben.

Zusammenfassungen

Die Entwicklung moderner WordPress-Themes stellt eine Revolution in den Designkonzepten dar. Sie hat den Schwerpunkt vom Erstellen prozeduraler PHP-Templates auf eine anspruchsvollere Herangehensweise verlagert, die auf klar definierten Designprinzipien und strukturierten Entwicklungsprozessen basiert.theme.jsonDeclarative Entwicklung, das auf Blockmarkierungen und der gesamtsiteweiten Editierung basiert. Entwickler müssen diese Techniken beherrschen.theme.jsonDie Konfiguration wird verwendet, um den globalen Stil zu definieren. HTML-Blockvorlagen werden eingesetzt, um die Struktur der Seiten aufzubauen, und…functions.phpFunktionalitäten werden verbessert. Dieses Modus senkt die Hürden für die Anpassung von Layouts erheblich und bietet Inhaltserstellern große Gestaltungsfreiheit – gleichzeitig erfordert es jedoch, dass Entwickler das Block-Editor-System gründlich verstehen. Indem Sie dem oben beschriebenen Kernfähigkeitspfad folgen, werden Sie in der Lage sein, flexible, leistungsstarke und zukunftsfähige WordPress-Themes zu erstellen.

FAQ Häufig gestellte Fragen

Braucht man für das Thema „### Development Block“ noch PHP-Kenntnisse?
Ja, es ist immer noch notwendig. Obwohl die Hauptstruktur der Seite durch HTML-Templates definiert wird,functions.phpDateien sind nach wie vor unerlässlich, um Funktionen zur Themenverwaltung hinzuzufügen, Styleskripte zu registrieren sowie die Anwendung von Hooks und Filtern für eine tiefe Anpassung der Systeme zu ermöglichen. Darüber hinaus ist ein fundiertes Wissen über PHP von entscheidender Bedeutung, wenn es darum geht, dynamische Vorlagenkomponenten zu erstellen, die auf benutzerdefinierten Abfragen basieren, oder um komplexe Geschäftslogiken zu verarbeiten.

Kann das Block-Thema mit traditionellen Themen coexistieren?

Ja, das ist möglich. WordPress erkennt automatisch den Typ des verwendeten Themes. Wenn der Root-Verzeichnis deines Themes die entsprechenden Dateien enthält…theme.jsonDateien undtemplates/partsDie Blockvorlagen in den Ordnern werden von WordPress als Block-Themen erkannt und die Funktion zur gesamten Website hinwegigen Editierbarkeit aktiviert. Selbst wenn diese Dateien vorhanden sind, behält WordPress das traditionelle PHP-Template-System der Themen als Backup bei. Falls die Blockvorlage für eine bestimmte Anfrage nicht existiert, wechselt das System automatisch auf das entsprechende PHP-Template zurück.single.php）。

Wie füge ich benutzerdefiniertes CSS zu meinem Block-Thema hinzu?

Es gibt hauptsächlich drei Möglichkeiten. Die am meisten empfohlene Methode ist…theme.jsonDie Datei derstylesEin Teil der hinzugefügten CSS-Dateien wirkt auf das gesamte System oder auf bestimmte Bereiche („Blöcke“) des Designs. Zweitens kann man diese CSS-Dateien auch direkt in das Thema („Theme“) einbinden.style.cssIn der Datei können zusätzliche Stilregeln definiert werden. Für dynamischere oder für spezifische Seiten angepasste Styles ist es ebenfalls möglich, entsprechende Anpassungen vorzunehmen.functions.phpVerwenden Sie es in Chinawp_add_inline_styleFunktionen können inline hinzugefügt werden, oder benutzerdefinierte Styles können direkt für bestimmte Blöcke registriert werden.

Bietet der „Alle-Seiten-Editiermodus“ Risiken für bestehende Websites?

Bei Webseiten mit bereits vorhandenem Inhalt sollte der Wechsel zu einem völlig neuen Block-Thema mit Bedacht erfolgen. Es wird empfohlen, das Thema zunächst in einer Testumgebung (z. B. in der lokalen Entwicklungsumgebung oder auf einer temporären Website) gründlich zu testen, um sicherzustellen, dass alle vorhandenen Inhalte unter dem neuen Thema korrekt angezeigt werden und die Layoutstruktur nicht gestört wird. Vor der Umstellung ist es unerlässlich, die gesamte Website (einschließlich der Dateien und der Datenbank) zu sichern. Die Funktionen eines vollständigen Website-Editors sind zwar leistungsstark, doch durch die direkte Änderung der Templates können Fehler auftreten, die alle Seiten beeinträchtigen, die dieses Template verwenden.