Die WordPress-Theme-Entwicklung umfasst das Erstellen oder Anpassen der Designebene, der Templates und der Website-Einstellungen, ohne die Geschäftslogik in das Theme zu übertragen. Die Architektur – klassisch, Child oder Block – wird anhand des Editors, des Änderungsumfangs, der Performance und des zukünftigen Supports gewählt.

In diesem Leitfaden erfahren Sie, wofür das Theme zuständig ist, was die vollständige Website-Bearbeitung ist und theme.json Diese Vorgehensweise unterscheidet sich vom klassischen Ansatz bei der Entwicklung eines WordPress-Child-Themes und der Vorbereitung eines Themes für ein individuelles Design. Wir behandeln außerdem die Projektstruktur, einen sicheren Workflow mit Staging und Backups, die Überprüfung der Kompatibilität mit der WordPress-Version und den Plugins sowie häufige Fehler, die dazu führen können, dass Änderungen durch Updates überschrieben werden.

Wie man zwischen einem Theme, einem Block, einem Plugin und einer Integration wählt, wird erklärt Ein allgemeiner Leitfaden zur individuellen WordPress-Entwicklung. Themen und Vorlagen werden hier ausführlich besprochen.

Was bewirkt ein WordPress-Theme?

Die Grenze zwischen Themendesign und Website-Funktionalität

Ein WordPress-Theme ist für die Darstellung von Inhalten verantwortlich: Seitenlayout, Template-Auswahl, Elementanordnung und Benutzeroberflächenstile. Es bestimmt, wie Besucher Beiträge, Kategorien, Archive und andere Inhalte sehen, sollte aber keine kritische Geschäftslogik der Website enthalten. Diese Trennung vereinfacht Designänderungen und die zukünftige Projektwartung.

Präsentation und Vorlagen

Bei der Bearbeitung einer Anfrage ruft WordPress Daten aus der Datenbank ab, ermittelt den Seitentyp und wählt die passende Designvorlage aus. Die Vorlage definiert die Ausgabestruktur, beispielsweise das Layout von Kopfzeile, Hauptinhalt, Navigation und weiteren Bereichen. Designstile und -einstellungen regeln Farben, Typografie, Abstände und die Anpassung der Benutzeroberfläche an verschiedene Bildschirmgrößen.

Je nach Projektarchitektur kann die Präsentation mithilfe von PHP- oder Blockvorlagen generiert werden. Designeinstellungen können sich auch in Stylesheets, Themendateien und Konfigurationsdateien befinden. theme.json. Welche Dateien genau benötigt werden, hängt vom jeweiligen Thema und den Projektanforderungen ab.

Bevor Sie mit der Entwicklung eines WordPress-Themes beginnen, legen Sie fest, welche Entscheidungen sich speziell auf die Benutzeroberfläche beziehen. Zu den typischen Aufgaben eines Themes gehören:

Layouts einzelner Beiträge, Seiten, Archive und Suchergebnisse;
Ausgabe von Kopf-, Fuß-, Menü- und Inhaltsbereichen;
visuelle Parameter von Blöcken und Komponenten;
Verknüpfung der für das Design notwendigen Stile und Skripte;
Optionen zur Präsentation desselben Inhalts;
adaptives Verhalten von Schnittstellenelementen.

Wenn es geplant ist Eine Website mit WordPress erstellen Bei einem einzigartigen Design sollten zunächst Seitentypen und Schnittstellenzustände festgelegt werden. Es ist hilfreich, Folgendes einzubeziehen: Website-Entwicklungsbrief Eine Liste mit Vorlagen, Anforderungen an die mobile Version, Barrierefreiheit, Inhaltseditor und zulässigen Methoden zur Designanpassung. Dies trägt dazu bei, dass das Design die Funktionen, die nach einem Theme-Upgrade erhalten bleiben müssen, nicht beeinträchtigt.

Was eignet sich besser für ein Plugin?

Ein Plugin sollte Funktionen enthalten, die für die Website unabhängig von ihrem Erscheinungsbild unerlässlich sind. Das praktische Kriterium ist einfach: Wenn eine Funktion und die von ihr erzeugten Daten auch nach einem Theme-Wechsel zugänglich bleiben müssen, sollten sie nicht ausschließlich an das aktuelle Design gebunden sein.

Diese Logik kann die Registrierung benutzerdefinierter Beitragstypen und Taxonomien, die Integration von Drittanbieterdiensten, die Formularverarbeitung, spezielle Benutzerrollen, Zugriffsregeln und Geschäftsprozesse umfassen. Ein Theme kann die Ausgabe des Plugins implementieren, sollte aber nicht der einzige Ort sein, an dem die für die Website benötigten Funktionen implementiert werden.

Ein Projektkatalog kann beispielsweise als separater Inhaltstyp gespeichert werden, der von einem Plugin registriert wird. Das Theme definiert dann die Projektkarte, die einzelne Projektseite und die Archivansicht. Nach einer Designänderung bleiben die Katalogdaten erhalten, und es können neue Vorlagen dafür erstellt werden.

Die Grenze ist nicht immer eindeutig. Kleinere Anpassungen der Ausgabe lassen sich in ein Theme integrieren, während die Verarbeitung von Benutzereingaben besondere Aufmerksamkeit hinsichtlich Zugriffsrechten, Validierung und Datenmaskierung erfordert. Die Kompatibilität der gewählten Lösung kann ohne Überprüfung der WordPress-Version, der aktiven Plugins und des jeweiligen Themes nicht gewährleistet werden. Implementieren Sie alle Änderungen zunächst in einer Testumgebung und erstellen Sie ein Backup der Live-Website.

Klassische, Kinder- und Blockdesigns

Vergleich von klassischen, kindlichen und Blockmotiven

Wählen Sie ein Theme basierend auf dem Umfang der gewünschten Änderungen und der Bearbeitungsmethode Ihrer Website. Ein klassisches Theme eignet sich für eine vertraute Architektur mit PHP-Templates, ein Child-Theme behält die Änderungen beim Aktualisieren des Parent-Themes bei, und ein Block-Theme ermöglicht Ihnen die weitgehende Verwaltung des Layouts über den Website-Editor und die vollständige Website-Bearbeitung.

Thementyp	Die Hauptaufgabe	Einschränkungen
Klassisch	Erstellen Sie eine Benutzeroberfläche basierend auf PHP-Vorlagen, Menüs, Widget-Bereichen und Designeinstellungen.	Das Ändern globaler Layoutbestandteile erfordert oft Code; die Möglichkeiten des Editors hängen von der Theme-Implementierung ab.
Tochtergesellschaft	Passen Sie ein bestehendes klassisches oder Block-Design sicher an.	Abhängig vom übergeordneten Theme; Aktualisierungen des übergeordneten Themes können Layout, Stile und Funktionalität verändern.
Block	Bearbeiten Sie Vorlagen, Kopf- und Fußzeilen sowie andere Bereiche mithilfe von Blöcken.	Wir müssen die Kompatibilität mit der WordPress-Version, den Plugins und den erforderlichen Blöcken überprüfen.

Das klassische Theme bleibt eine sinnvolle Wahl, wenn das Projekt auf PHP-Logik, einem vorkonfigurierten Customizer oder Plugins für traditionelle Templates basiert. Für einen Katalog mit komplexen Beitragstypen kann das klassische Theme praktisch sein, wenn die Datendarstellung serverseitig erfolgt. Die Performance hängt jedoch von der Codequalität, der Anzahl der Ressourcen, Abfragen und Erweiterungen ab.

Wann benötigt man ein Kinder-Theme?

Die Entwicklung eines WordPress-Child-Themes ist notwendig, wenn Sie ein bestehendes Theme anpassen möchten, ohne Ihre Änderungen nach einem Update zu verlieren. Sie können Ihre eigenen Stile, überschriebene Templates und zusätzliche Funktionen in ein Child-Theme verschieben und gleichzeitig die unveränderten Teile des Parent-Themes weiterhin nutzen.

Dieser Ansatz eignet sich für die Neugestaltung einzelner Seiten, die Anpassung von Kopf- und Fußzeile, das Einbinden benutzerdefinierter Stile und kleinere Verhaltensänderungen. Ein Child-Theme schützt das Projekt jedoch nicht vor Änderungen im Parent-Theme. Wenn ein Update die Template-Struktur ändert oder den zugrunde liegenden Mechanismus entfernt, müssen Ihre Anpassungen überprüft und gegebenenfalls angepasst werden.

Prüfen Sie vor Änderungen, ob das übergeordnete Theme unterstützt wird, ob es mit Ihrer PHP- und WordPress-Version übereinstimmt und ob es mit wichtigen Plugins kompatibel ist. Wichtig und WordPress-Unterstützung Aus Sicht des Theme-Entwicklers: Dokumentation und Änderungsprotokoll helfen, die Auswirkungen eines Updates einzuschätzen. Führen Sie den Test auf einer Testumgebung mit einem aktuellen Backup durch, nicht auf der Live-Website.

Wann benötigt man ein Block-Theme?

Die Entwicklung von WordPress-Blockthemen ist sinnvoll, wenn Sie nicht nur Beitragsinhalte, sondern auch globale Vorlagen über den Website-Editor verwalten möchten. In einem Blockthema lassen sich Kopfzeile, Fußzeile, Archiv und andere Bereiche aus Blöcken zusammensetzen. theme.json Legt allgemeine Designeinstellungen fest: Farben, Typografie, Abstände und verfügbare Bearbeitungswerkzeuge.

Die Blockarchitektur eignet sich für individuelle Designs, wenn diese durch Templates, Template-Teile, Muster und globale Stile konsistent umgesetzt werden können. Sie ist auch praktisch, wenn ein Projektmanager die Seitenstruktur selbstständig ändern muss, ohne ständig PHP-Dateien bearbeiten zu müssen.

Bei der Auswahl einer WordPress-Theme-Architektur sollten Sie drei Kriterien berücksichtigen: die Kompatibilität des Editors mit den benötigten Plugins, die Unterstützung der Template durch das Entwicklerteam und die Auswirkungen der ausgewählten Blöcke auf die Performance. Versprechen Sie keine vollständige Kompatibilität im Voraus: Diese kann erst nach Tests des jeweiligen Themes, der WordPress-Version, der Plugin-Konfiguration und der benutzerdefinierten Skripte bestätigt werden.

Struktur des Projektthemas

WordPress-Theme-Datei- und Template-Struktur

Hauptdateien und Vorlagen

Die Struktur hängt von der Themenarchitektur ab. Für ein klassisches Thema ist folgende Grundlage erforderlich: style.css mit Metadaten und index.php — eine Backup-Ausgabevorlage. In einem Block-Theme befindet sich die Basisvorlage in templates/index.html, Globale Einstellungen werden üblicherweise beschrieben durch theme.json.

In der klassischen Architektur wählt WordPress Dateien gemäß der Template-Hierarchie aus. Zum Beispiel:, single.php verantwortlich für die einzelnen Datensätze, page.php - pro Seite, archive.php - für die Archive, und 404.php — zum Melden einer fehlenden Seite. Häufig verwendete Teile der Benutzeroberfläche werden in der Regel verschoben nach header.php, footer.php und Katalog Vorlagenteile.

Erstellen Sie nicht für jede URL eine separate Vorlage, es sei denn, dies ist unbedingt erforderlich. Bestimmen Sie zunächst den Inhaltstyp und prüfen Sie, ob eine gemeinsame Auszeichnung mit kontrollierten Parametern verwendet werden kann. Eine separate PHP-Vorlage ist nur dann notwendig, wenn eine wirklich einzigartige Struktur vorliegt, die nicht durch eine Standardseitenvorlage oder Blöcke unterstützt wird.

Bei einem Block-Theme werden Vorlagen als HTML-Markup für Blöcke in einem Verzeichnis gespeichert. Vorlagen, und die wiederholten Elemente sind in Teile. Kopfzeile, Fußzeile und weitere Bereiche können über die vollständige Website-Bearbeitung bearbeitet werden, sofern dies von Ihrer WordPress-Installation und dem gewählten Theme unterstützt wird.

Für das Child-Theme erstellen Sie ein separates Verzeichnis. style.css Geben Sie das übergeordnete Thema mithilfe des Feldes an. Vorlage. Benutzerdefinierte Vorlagen sollten nur bei Bedarf kopiert werden: Die Datei eines Child-Themes ersetzt die entsprechende Vorlage im Parent-Theme, daher muss sie bei nachfolgenden Aktualisierungen beibehalten werden.

Stile, Skripte und Einstellungen

Datei functions.php Sie dienen dazu, Designelemente, Stile, Skripte und Handler einzubinden. CSS und JavaScript sollten über die Standardmechanismen von WordPress eingebunden und nicht fest in die Templates codiert werden. Dadurch bleiben Abhängigkeiten, die Ladefolge und die Kompatibilität mit der Ressourcenoptimierung erhalten.

Assets/CSS — Stile von Komponenten und Seiten;
assets/js — Benutzerszenarien;
Assets/Bilder - Grafiken im Zusammenhang mit Design;
Inc. - kleine PHP-Module, die eingebunden werden können von functions.php;
Sprachen — Lokalisierungsdateien, falls das Theme für die Übersetzung vorbereitet ist;
theme.json — Farbpalette, Typografie, Größen, Abstände und andere Editor- und Benutzeroberflächeneinstellungen.

theme.json Dies trägt dazu bei, den Editor an das Erscheinungsbild der Website anzupassen und die Anzahl unterschiedlicher CSS-Regeln zu reduzieren. Die verfügbaren Optionen hängen jedoch vom Schema und der WordPress-Version ab, daher sollte die Kompatibilität überprüft und nicht vorausgesetzt werden.

Die technische Struktur von Verzeichnissen sollte nicht durch Marketingsprache bestimmt werden. Dateinamen sollten sich nach dem Zweck der Komponenten richten, und regionale sowie kommerzielle Daten sollten in Inhalts-, Einstellungs- oder Datensatzfeldern gespeichert werden.

Implementieren Sie keine Geschäftslogik im Theme: Formulare, benutzerdefinierte Datentypen und Funktionen, die nach einer Designänderung erhalten bleiben müssen, sollten am besten in einem Plugin implementiert werden. Bei der Arbeit mit PHP sind Zugriffsrechte zu beachten, Eingabedaten zu validieren und Ausgaben zu maskieren. Nehmen Sie strukturelle Änderungen zunächst an Testkopien vor, nachdem Sie die Website gesichert haben.

Entwicklungs- und Verifizierungsverfahren

Das Verfahren zur Entwicklung und zum Testen eines Themes auf einer Testseite

Sichere WordPress-Theme-Entwicklung beginnt nicht mit Codeänderungen auf einer Live-Website, sondern mit der Dokumentation der Anforderungen, dem Erstellen einer Testkopie und dem Vorbereiten von Testskripten. Das Ergebnis sollte erst nach dem Testen der Templates, der Responsivität, der Barrierefreiheit, der Performance und der Kompatibilität mit der Umgebung veröffentlicht werden.

Ich arbeite an einer Testkopie.

Zunächst muss ermittelt werden, welche Seiten und Funktionen von der Änderung betroffen sein werden. Selbst kleinere Anpassungen der Vorlage erfordern klare Kriterien für die Durchführung: Welche Blöcke sollen angezeigt werden, wer kann sie bearbeiten und wie verhalten sie sich, wenn keine Inhalte vorhanden sind?.

Richten Sie eine Testumgebung mit einer WordPress-Version, einem Theme, Plugins und PHP-Einstellungen ein, die der Live-Umgebung so nahe wie möglich kommen. Erstellen Sie vor der Übertragung von Dateien oder Daten ein Backup und stellen Sie sicher, dass dieses wiederhergestellt werden kann. Beschränken Sie den Zugriff auf die Testumgebung: Deaktivieren Sie die Indizierung, verwenden Sie eine Authentifizierung und übertragen Sie keine echten personenbezogenen Daten, es sei denn, dies ist unbedingt erforderlich.

Praktische Arbeitsreihenfolge:

Anforderungen an die Protokollierung, Layouts und eine Liste anpassbarer Vorlagen.
Erstellen Sie eine Backup- und Testumgebung.
Richten Sie ein Versionskontrollsystem und einen separaten Aufgabenzweig ein.
Veränderungen sollten in kleinen, logischen Schritten vorgenommen werden.
Prüfen Sie die Benutzerrechte, bevor Sie administrative Aktionen durchführen.
Eingaben validieren und Ausgaben kontextabhängig maskieren: HTML, Attribut, URL oder JavaScript.
Testen Sie die wichtigsten Szenarien und übertragen Sie diese auf die Staging-Umgebung.
Erstellen Sie einen Veröffentlichungs- und Rücknahmeplan.

Legen Sie den Arbeitsablauf des Editors fest: welche Elemente der Kunde selbstständig ändern kann, welche Felder Pflichtfelder sind und was mit langen Titeln, leeren Bildern oder Inhalten aus einer externen Quelle geschieht.

Mobile Version, Verfügbarkeit und Updates

Testen Sie Ihr Theme nicht nur auf der Masterseite. Verwenden Sie Beiträge mit kurzen und langen Texten, Galerien, Tabellen, Kommentaren, Suchergebnissen, Fehlerseiten und leeren Zuständen. Achten Sie auf Mobilgeräten auf horizontales Scrollen, die Größe interaktiver Elemente, die Navigation, Formulare und Bilder. Die Anpassung der Viewport-Breite allein reicht nicht aus: Testen Sie die Benutzeroberfläche nach Möglichkeit auf echten Geräten und in verschiedenen relevanten Browsern.

Für grundlegende Barrierefreiheit navigieren Sie die Seite mit der Tastatur. Der Fokus sollte sichtbar sein, die Navigation logisch und Menüs sowie Dialogfelder ohne Maus bedienbar. Achten Sie auf die semantische Struktur, Feldbezeichnungen, aussagekräftige Bildbeschreibungen und ausreichenden Kontrast. Automatische Prüfungen können zwar einige Probleme erkennen, ersetzen aber nicht die manuelle Überprüfung.

Vor der Veröffentlichung die Testkopie aktualisieren und erneut testen:

wichtige Vorlagen und Blöcke im Editor und auf der Website;
Formulare, Suche, Menüs, Seitennummerierung und Fehlermeldungen;
Benutzerrollen und Zugriff auf Einstellungen;
Downloadgeschwindigkeit, Ressourcengrößen und Fehlerfreiheit im Protokoll;
Das Design aktualisieren, ohne die Benutzereinstellungen zu verlieren;
die Möglichkeit, schnell zur vorherigen stabilen Version zurückzukehren.

Die Kompatibilität lässt sich nicht allein anhand des Namens eines Themes oder Plugins garantieren. Sie wird durch Tests mit spezifischen Versionen von WordPress, PHP, dem aktiven Theme, Erweiterungen und der Serverkonfiguration bestätigt. Nach der Veröffentlichung sollten Sie den Cache leeren, einen kurzen Test durchführen und auf Fehler achten, ohne den Live-Code direkt zu verändern.

Häufige Fehler bei der Themenentwicklung

Ändern der übergeordneten Theme-Dateien

Wenn Sie ein bestehendes Theme direkt bearbeiten, können Ihre Änderungen durch ein Update überschrieben werden. Verwenden Sie für lokale Anpassungen ein Child-Theme und testen Sie die Ergebnisse auf einer Testumgebung der Website, bevor Sie das Update durchführen. Speichern Sie projektkritische Einstellungen und Code in der Versionskontrolle.

Ein Child-Theme beseitigt jedoch nicht alle Risiken. Änderungen an den Templates, Funktionen oder Stilen des Parent-Themes können sich auf überschriebene Dateien auswirken. Die Kompatibilität sollte daher mit spezifischen Versionen von WordPress, dem jeweiligen Theme und den aktiven Plugins getestet werden.

Funktionalität in ein Thema einbetten

Ein Theme ist primär für die Darstellung der Website verantwortlich. Funktionen, die nach Designänderungen erhalten bleiben müssen, werden am besten in einem separaten Plugin implementiert. Dazu gehören benutzerdefinierte Beitragstypen, Integrationen, Utility-APIs und Geschäftslogik.

Katalogkartendaten und ihre Verarbeitungsregeln sollten nicht starr an ein einzelnes Design gebunden sein. Andernfalls könnte eine Designänderung wichtige Funktionen beeinträchtigen, selbst wenn die Datensätze in der Datenbank erhalten bleiben.

Ignorieren der Ausgabe- und Eingabesicherheit

Einer der gefährlichsten Fehler ist die Ausgabe von Daten ohne Maskierung. Wählen Sie die Maskierungsfunktion kontextabhängig: Text, HTML-Attribut, URL oder ein begrenzter HTML-Code. Eingabedaten müssen vor dem Speichern auf das erwartete Format geprüft und bereinigt werden.

Prüfen Sie bei administrativen Aktionen die Benutzerberechtigungen und die WordPress-Einmalsicherheitswerte. Verlassen Sie sich nicht allein auf ein verstecktes Formularfeld oder eine nicht über das Menü erreichbare Seite. Bevor Sie Code-Snippets von Drittanbietern hinzufügen, informieren Sie sich, welche Daten diese akzeptieren, wohin sie weitergeleitet werden und welche Berechtigungen sie verwenden.

Abhängigkeit von spezifischem Editor-Markup

Ein Theme kann auf einer vorbereiteten Demoseite korrekt aussehen, aber beim Laden von realen Inhalten Fehler verursachen. Achten Sie auf lange Überschriften, Bilder unterschiedlicher Größe, Tabellen, Listen, Galerien, verschachtelte Blöcke und leere Zustände. Bei einem blockbasierten Theme sollten Sie Templates, Template-Teile und Einstellungen separat überwachen. theme.json.

Gewährleisten Sie keine vollständige Kompatibilität mit dem Editor oder der vollständigen Website-Bearbeitung, ohne die erforderlichen Skripte zu testen. Das Vorhandensein von Blockvorlagen allein garantiert nicht die korrekte Funktion von Drittanbieterblöcken und -plugins.

Zusätzliche Ressourcen verbinden

Das globale Laden aller Styles und Skripte vergrößert die Seitengröße und kann zu Konflikten führen. Verbinden Sie Ressourcen über die WordPress-API, laden Sie sie nur bei Bedarf und vermeiden Sie das Hinzufügen mehrerer Bibliotheken für eine einzelne Aufgabe. Testen Sie die Performance auf verschiedenen Seitentypen, nicht nur auf der Startseite.

Entwicklung direkt am Produktionsstandort

Selbst geringfügige PHP-Änderungen können einen kritischen Fehler verursachen, und eine Template-Änderung kann die Anwendungsseite unbrauchbar machen. Arbeiten Sie in einer Testumgebung, erstellen Sie Sicherungskopien Ihrer Dateien und Datenbank, speichern Sie Änderungen und planen Sie Rollbacks im Voraus ein.

Prüfen Sie nicht nur das Erscheinungsbild, sondern auch die Funktionalität von Formularen, Analysen, Metadaten und Seiteninhalten: Ein Template-Fehler kann mehrere Funktionen gleichzeitig beeinträchtigen.

Fehlende abschließende Überprüfung

Testen Sie vor der Veröffentlichung die Reaktionsfähigkeit, die Tastaturnavigation, den Kontrast, Formulare, Systemvorlagen, 404-Fehlerseiten, die Suche und den Zustand ohne Inhalt. Überprüfen Sie die Fehlerprotokolle und stellen Sie sicher, dass Besuchern keine Debug-Meldungen angezeigt werden. Schließen Sie die Theme-Entwicklung erst ab, nachdem Sie Benutzerrollen, Backup-Wiederherstellung und grundlegende Besucherinteraktionen überprüft haben.

Offizielle Dokumentation: Leitfaden zur WordPress-Theme-Entwicklung.