Ein WordPress-Theme zu erstellen, das gut aussieht und einwandfrei funktioniert, ist für jeden Entwickler entscheidend. Unabhängig von deiner Erfahrung kann die Umsetzung einer soliden Strategie für das Testen deines Themes den Unterschied zwischen einem mittelmäßigen Produkt und einem herausragenden Erfolg ausmachen.

In diesem Leitfaden werfen wir einen Blick auf das Testen von WordPress-Themes und stellen die Tools, Techniken und Best Practices vor, die die Qualität deines Themes verbessern. Mit diesem Leitfaden stellst du sicher, dass dein Theme die höchsten Standards für Leistung, Kompatibilität und Benutzerfreundlichkeit (UX) erfüllt.

Das Testen von WordPress-Themes verstehen

Die Entwicklung eines Produkts erfordert einen Testprozess, der mehr ist als ein letzter Check vor dem Start. Er ist ein integraler Bestandteil des Entwicklungsprozesses, der dir dabei hilft, Probleme frühzeitig zu erkennen und zu beheben, um langfristig Zeit und Ressourcen zu sparen.

Mit dem Testen von WordPress-Themes kannst du sicherstellen, dass dein Theme in verschiedenen Umgebungen, Browsern und auf verschiedenen Geräten korrekt funktioniert. Dabei können Probleme aufgedeckt werden, die du vor der Veröffentlichung beheben musst:

Das Testen von WordPress-Themes kann zwar auch die Behebung von Fehlern beinhalten, aber im Allgemeinen hilft dir der Prozess, ein Produkt zu entwickeln, das sich auf dem Markt abhebt.

WordPress-Theme-Standards in Kurzform

WordPress hat eine Reihe von Codierungsstandards festgelegt, um die Konsistenz und Qualität aller Themes zu gewährleisten. Diese Standards sind nicht einfach nur willkürliche Regeln, sondern das Ergebnis jahrelanger Erfahrung und Zusammenarbeit in der Community.

Das Make WordPress Themes-Team setzt diese Standards für die Aufnahme in das WordPress-Theme-Verzeichnis durch:

Die Hauptseite des WordPress-Theme-Verzeichnisses. Sie zeigt eine Übersicht mit Theme-Vorschauen, darunter Twenty Twenty-Four, Elementor's Hello Theme und Astra. Jede Theme-Vorschau zeigt eine Miniaturansicht des Designs des Themes und seinen Namen. Der Seitenkopf enthält Optionen zum Einreichen eines Themes, zum Anzeigen kommerzieller Theme-Unternehmen und zum Anmelden.
Das WordPress Theme Directory

Themes, die in das Verzeichnis aufgenommen werden, werden einer gründlichen Prüfung unterzogen, um sicherzustellen, dass sie die Qualitäts- und Sicherheitsanforderungen der Plattform erfüllen.

Da das Theme Directory das offizielle Repository ist – und für viele die erste Anlaufstelle, um ein neues Theme zu finden – ist es wichtig, dass jeder Download so funktioniert, wie du es erwartest, ohne Sicherheitsprobleme oder größere Bugs. Dieser hohe Qualitätsstandard ist nur ein Aspekt, der WordPress zu der Plattform macht, die es ist.

Warum du anhand der WordPress-Standards testen solltest

Bei der Erfüllung der WordPress-Standards geht es nicht nur um die Zulassung zur Aufnahme in das Theme-Verzeichnis. Das tiefere Ziel ist es, ein zuverlässiges, sicheres Produkt zu erstellen, das für die Nutzer/innen funktioniert.

Es gibt viele gute Gründe, dein Theme anhand der WordPress-Standards zu testen, abgesehen von dem Wunsch, es unter die Konkurrenz zu mischen:

  • Zukunftssicherheit. WordPress entwickelt sich ständig weiter. Wenn du dich also an die aktuellen Standards hältst, kannst du dein Theme in Zukunft leichter warten und aktualisieren.
  • Kompatibilität. Wenn dein Theme den WordPress-Standards folgt, ist es wahrscheinlicher, dass es mit einer Vielzahl von Plugins und WordPress-Kernfunktionen funktioniert.
  • Leistung. Viele WordPress-Standards konzentrieren sich auf die Leistung. Die Einhaltung dieser Standards kann dazu beitragen, dass dein Theme effizienter läuft.
  • Sicherheit. Die Standards enthalten Best Practices für die Sicherheit, die dazu beitragen, dein Theme und seine Nutzer/innen vor potenziellen Schwachstellen zu schützen.

Das Endergebnis dieser Aspekte ist ein großes: das Vertrauen der Nutzer. Die meisten Nutzer wollen ein Qualitätsprodukt, das sicher, stabil und fehlerfrei ist.

Für diejenigen, die mit WordPress vertraut sind, ist ein Theme, das diese Standards erfüllt, ein weiterer Pluspunkt für den ausgezeichneten Ruf der Plattform. Für Nutzer/innen, die WordPress zum ersten Mal nutzen, vermitteln hochwertige Themes den Eindruck von Verlässlichkeit. Dank deines Themes könnte dies der Beginn einer lebenslangen Verbindung mit der Plattform sein.

An welchen Standards dein Theme von WordPress misst

Das Team von Make WordPress Themes ist entscheidend dafür, dass die Qualität der Themes im Ökosystem der Plattform erhalten bleibt. Es bewertet Themes anhand einer umfassenden Reihe von Kriterien:

  • Code-Qualität. Es darf keine JavaScript- oder PHP-Fehler, -Warnungen oder -Hinweise enthalten. Dein Theme darf auch keine veralteten Konstanten oder Funktionen verwenden. WordPress hat außerdem eine eigene Reihe von Codierungsstandards, die du einhalten musst.
  • Funktionalität. Du darfst die Bearbeitungsvorschau nicht „manipulieren“, typische WordPress-Funktionen nicht hinter einer Paywall verstecken und keine Weiterleitungen bei der Aktivierung vornehmen. Es gibt auch Richtlinien für die Anzeige von Admin-Benachrichtigungen und die Einbindung von „Nicht-Präsentationsfunktionen“.
  • Barrierefreiheit. Themes müssen Links zum Überspringen und Optionen für die Tastaturnavigation enthalten. Links müssen außerdem unterstrichen werden.
  • Lizenzierung. Natürlich müssen Themes mit der GNU General Public License (GPL) kompatibel sein. Du musst jedoch nicht die gleiche Lizenz wie WordPress verwenden – jede kompatible GPL-Lizenz ist gültig.

Es gibt auch Richtlinien für die Werbung und die Präsentation. Das Make WordPress Themes-Team kann zum Beispiel entscheiden, dein Theme aufgrund seines Namens abzulehnen. Das kann passieren, wenn eine Markenrechtsverletzung vorliegt oder du einen unpassenden Namen gewählt hast.

Außerdem gibt es Einschränkungen bei der Platzierung von Credits – selbst dann kannst du sie nur auf style.css hinzufügen:

Ein Code-Editor-Fenster, das die Datei style.css für das WordPress-Theme Twenty Twenty-Four anzeigt. Das Fenster hat einen dunklen Hintergrund mit hellem Text, der Informationen zum Thema anzeigt, wie z. B. Name, Autor, Beschreibung und verschiedene Themenfunktionen und -tags.
Eine style.css-Datei

Es gibt auch einige Richtlinien für Autorenkonten, z. B. wie viele Konten du haben kannst und wie oft du ein Theme einreichen musst. Die meisten der geforderten Elemente beziehen sich auf technische Aspekte der Entwicklung.

Die technischen Standards von WordPress

Von den 14 Anforderungen, die du für die Einreichung eines Themes bei WordPress erfüllen musst, beziehen sich die meisten auf die Theme-Einstellungen, Dateien und die Verwendung von Blöcken.

Wenn es um klassische Themes und Block-Themes geht, gibt es für erstere mehr Vorgaben:

  • Klassische Themes. Du musst viele Funktionen einbinden, manchmal an bestimmten Stellen in deinem Code. Das Gleiche gilt für den Aufruf von Vorlagen.
  • Block-Themes. Die Einhaltung der Standards für Block-Themes ist einfacher, da du nur vier Dateien einbinden musst. Wenn auch deine Blockvorlagen vollständig sind, erfüllt dein Theme die technischen Standards für eine Reihe von Anforderungen.

Es gibt viele Anforderungen an die Einstellungen. So musst du zum Beispiel bestimmte Haken für die Anzeige von Hinweisen verwenden und die Dauerhaftigkeit der Hinweise gemäß den Richtlinien für den Überprüfungsprozess festlegen.

Ein Teil des WordPress-Admin-Dashboards, der den Abschnitt „Beiträge“ zeigt. Oben befindet sich ein blaues Banner, das für das Plugin „Revive Old Posts“ wirbt. Darunter befinden sich Registerkarten, die Beitragsstatistiken anzeigen, darunter 106 Beiträge insgesamt, 103 veröffentlichte, ein Beitrag mit Sticky-Post-Funktion, zwei geplante Beiträge und ein Beitrag im Entwurfsstadium.
Eine Admin-Benachrichtigung im WordPress-Dashboard

Die Speicherung von Optionen in der Datenbank ist streng geregelt. Du musst ein einziges Feld verwenden, auch für mehrere Einstellungen, mit den richtigen Namenskonventionen. Für das WordPress-Dashboard darfst du nur die wichtigsten Elemente der Benutzeroberfläche (UI) verwenden, und das Styling muss innerhalb der Grenzen der Admin-Seite deines Themes bleiben.

Das WordPress-Admin-Dashboard zeigt die Seite „Kommentare generieren“ des FakerPress-Plugins. Die Seite enthält verschiedene Felder zur Konfiguration der Kommentargenerierung, darunter Typ, Beitragstyp, Menge, Datumsbereich, Inhaltsgröße und HTML-Optionen. In der linken Seitenleiste wird das Standard-WordPress-Admin-Menü angezeigt.
Der Einstellungsbildschirm von FakerPress Comments

Du musst auch die Dateien überwachen, die du in dein Theme einbindest. Jedes Theme muss z.B. eine readme.txt Datei enthalten. Die Vorbereitung deiner Dateien (z. B. das Entfernen von Premium-Code oder überflüssigen Verzeichnissen) ist eine weitere Voraussetzung, ebenso wie das Einbinden aller Skripte und Medien für dein Theme, anstatt externe Quellen zu verwenden. Das gilt auch für verkleinerte Skripte: Du musst auch die vollständige Originaldatei einschließen.

Alle WordPress-Anforderungen für dein Theme zu erfüllen, kann mühsam sein, vor allem, wenn du nicht vorhast, dich im offiziellen Verzeichnis anzumelden. Dennoch bieten diese Standards einen hervorragenden Rahmen, der dir hilft, ein Qualitätsprodukt zu liefern.

Warum die Einhaltung der WordPress-Standards die Qualität deines Themes verbessern kann

Um mit deinem Theme in das offizielle Verzeichnis aufgenommen zu werden, musst du die Richtlinien von Make WordPress Theme erfüllen. Ziehe jedoch eine Agentur in Betracht, die individuelle Themes für Kunden erstellt. Oft müssen diese Themes nicht in das Theme-Verzeichnis eingetragen werden, da sie nicht massenhaft verbreitet werden. Wenn du die Richtlinien und Anforderungen befolgst, ergeben sich trotzdem Vorteile für alle WordPress-Themes, zum Beispiel:

  • Konsistenz. Die Standards bieten einen gemeinsamen Rahmen, der es den Teams erleichtert, gemeinsam an einem Projekt zu arbeiten.
  • Effizienz. Wenn du dich an die festgelegten Standards hältst, kannst du deine Entwicklungszeit verkürzen. Das kann auch die Notwendigkeit umfangreicher Anpassungen im Nachhinein verringern.
  • Wartbarkeit. Standardisierter Code ist leichter zu pflegen und zu aktualisieren. Das ist eine weitere Möglichkeit, langfristig Zeit und Ressourcen zu sparen.
  • Kundenzufriedenheit. Themes, die sich an die WordPress-Standards halten, bieten deinen Kunden eine größere Chance auf ein reibungsloses, fehlerfreies Erlebnis.

Außerdem gibst du deinem Theme Flexibilität für die Zukunft. Stell dir eine Situation vor, in der ein Kunde ein Theme für ein Projekt ablehnt oder den Vertrag kündigt. Ein Theme, das die WordPress-Standards und -Anforderungen erfüllt, kannst du ohne großen Mehraufwand in ein Produktangebot umwandeln.

Kurz gesagt: Auch wenn du dich nicht an das WordPress Theme Directory wenden willst, kann die Erfüllung der Anforderungen der Plattform die Qualität und Marktfähigkeit deiner Themes verbessern. Zumindest zeigst du damit Professionalität und Liebe zum Detail, was ein starkes Verkaufsargument für potenzielle Kunden sein kann.

Die wichtigsten Tools, die du für das Testen von WordPress-Themes brauchst

Wie jeder Handwerker brauchen WordPress-Entwickler/innen ein robustes und anpassungsfähiges Toolkit, das verschiedene Aspekte der Theme-Erstellung und -Leistung abdeckt.

Betrachte die WordPress-Codierungsstandards und die Anforderungen des Make WordPress Themes-Teams als deine Lehrbücher. Du musst sie auch nicht alle von Hand überprüfen. Stattdessen können die Plugins Theme Check und Theme Sniffer dies automatisieren.

Das Header-Bild des Theme-Check-Plugins von WordPress.org. Es zeigt eine vereinfachte, symbolbasierte Checkliste oder Fortschrittsanzeige auf einem dunkelroten Hintergrund. Die Checkliste zeigt drei kreisförmige Symbole, die vertikal auf der rechten Seite des Bildes ausgerichtet sind. Die oberen beiden Kreise enthalten grüne Häkchen, während der untere Kreis leer ist, was auf zwei abgeschlossene Schritte und einen verbleibenden Schritt hindeutet.
Das Theme Check Plugin Header-Bild von WordPress.org

Beide führen Tests an deinem Theme durch und zeigen dir Bereiche an, die nicht den aktuellen Anforderungen entsprechen. Theme Sniffer verfügt über ein paar umfangreichere Tests und verwendet benutzerdefinierte „Sniffs“ für das PHP_CodeSniffer-Skript, um Verstöße gegen die Standards zu erkennen.

Außerdem solltest du die Entwicklungswerkzeuge deines Browsers nutzen, um dein HTML, CSS und JavaScript zu überprüfen und zu debuggen. Für WordPress-spezifisches Debugging ist es fast unmöglich, auf den plattformeigenen Debug-Modus zu verzichten. Das Debug Bar Plugin fügt dem WordPress-Dashboard ein Debug-Menü hinzu, das auf diesen Modus zurückgreift.

Das Header-Bild des Debug Bar-Plugins von WordPress.org. Es zeigt ein Debugging-Panel mit der PHP-Version 7.0.3, der MySQL-Version 5.5.5 und einer Speicherauslastung von 3.708.912 Byte. Das Panel zeigt auch Abfrageinformationen an, wobei die Ausführung von insgesamt 12 Abfragen 14,3 ms dauert. Eine MySQL-Abfrage, die aus der Tabelle wp_options auswählt, ist ebenfalls sichtbar.
Das Debug Bar Plugin Header-Bild von WordPress.org

Es gibt noch ein paar andere Plugins, die beim Testen deines Themes von Nutzen sein können:

  • Query Monitor. Dieses Toolpanel bietet Einblicke in Datenbankabfragen, Hooks, Conditionals und vieles mehr.
  • Log Deprecated Notices. Wenn dein Theme veraltete Dateien, Funktionen und Funktionsargumente verwendet, wird dieses Plugin sie aufspüren. Es ist eine gute Möglichkeit, dein Theme mit den neuesten WordPress-Versionen auf dem neuesten Stand zu halten.
  • Monster Widget Plugin. Klassische Themes verwenden Widgets, und dieses Plugin fügt deiner Seite ein einziges Widget hinzu, das alle verfügbaren Core Widgets enthält. Das Ziel ist es, dass du Widgets effizient ausprobieren kannst.

Du wirst vielleicht nicht alle diese Plugins und Tools während deines WordPress-Theme-Tests verwenden. Das ist der Sinn deines Werkzeugkastens: Jede Komponente erfüllt einen bestimmten Zweck und hilft dir, Probleme zu beheben, bevor sie zu Problemen werden.

Testen von WordPress-Themes: Einrichten deiner Testumgebung

Wenn dein Werkzeugkasten fertig ist, kannst du deinen Arbeitsbereich einrichten. Für das Testen von WordPress-Themes bedeutet das, dass du eine geeignete Test- und Entwicklungsumgebung einrichten musst. Damit soll sichergestellt werden, dass du alle Tests wiederholen kannst und genaue Ergebnisse erhältst.

Es kann sein, dass du bereits einen Großteil dieses Prozesses ohne weitere Vorbereitungen in Gang gesetzt hast. Normale WordPress-Entwickler/innen haben sicherlich eine der folgenden Möglichkeiten ohne großen Aufwand zur Verfügung:

  • Eine lokale Entwicklungsumgebung. Mit einem WordPress-Setup auf deinem lokalen Rechner kannst du Tests durchführen, ohne deine Live-Site zu beeinträchtigen. DevKinsta ist eine der besten Optionen, die es dafür gibt.
  • Mehrere WordPress-Versionen. Für maximale Kompatibilität solltest du Tests mit mehreren älteren WordPress-Versionen durchführen.
  • Verschiedene PHP-Versionen. Diese Tests sollten auch für verschiedene PHP-Versionen oder andere wichtige Technologien, die dein Theme benötigt, durchgeführt werden.
  • Beliebte Plugins. Um sicherzustellen, dass du mit einem realistischen Setup testest, ist es eine gute Idee, einige der beliebtesten WordPress-Plugins zu installieren und zu aktivieren. So kannst du auf Kompatibilitätsprobleme testen oder herausfinden, wie sich dein Theme bei einer typischen Belastung verhält.
  • Mehrere Geräte und Browser. Wenn du dein Theme auf verschiedenen Geräten und Browsern testest, kannst du sicherstellen, dass es gut aussieht und auf allen Plattformen einheitlich funktioniert.

Sobald du die Komponenten deiner Umgebung eingerichtet hast, musst du WordPress für das Debugging konfigurieren. Öffne dazu deine wp-config.php Datei mit der Methode, die du bevorzugst. Secure File Transfer Protocol (SFTP) oder Secure Shell (SSH) sind ideal.

Sobald wp-config.php geöffnet ist, füge die folgenden Zeilen hinzu:

define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true );
define( 'WP_DEBUG_DISPLAY', false );

Dies aktiviert den WordPress-Debug-Modus, protokolliert Fehler in einer Datei und verhindert, dass diese auf dem Frontend angezeigt werden. Du kannst diese Funktion auch wieder deaktivieren, wenn du die Testseite auf einen Live-Server hochlädst.

Die Theme Unit Test Daten: WordPress-Hilfsinhalte, die dir helfen, die Theme-Standards zu erfüllen

Es gibt noch ein weiteres Element für das Testen von WordPress-Themes, das entscheidend sein kann, um Fehler oder Probleme zu finden: die Theme Unit Test Data. Dabei handelt es sich um eine XML-Datei, die eine Vielzahl von Inhaltstypen und Randfällen enthält und die du über das WordPress-Dashboard auf deine Website hochlädst.

Das WordPress-Dashboard zeigt den Bildschirm „Beiträge“ an. Die Benutzeroberfläche zeigt eine Tabelle mit verschiedenen Blog-Beiträgen mit Spalten für Titel, Autor, Kategorien, Schlagwörter und Veröffentlichungsdatum an. Die Seitenleiste auf der linken Seite zeigt die verschiedenen Navigationsoptionen für den WordPress-Administrationsbereich an.
Der WordPress-Beitragsbildschirm zeigt Inhalte an, die mit den Theme Unit Test Data zusammenhängen

Deshalb sind sie so wertvoll:

  • Sie enthalten verschiedene Inhaltstypen, wie Beiträge, Seiten, Kommentare und Medien. So kannst du testen, wie dein Theme mit verschiedenen Inhaltsszenarien umgeht.
  • Die Daten enthalten Elemente wie sehr lange Titel, Beiträge ohne Titel und verschachtelte Kommentare. All diese Randfälle sind wichtig zu testen, denn du willst, dass die Nutzer/innen die für sie relevanten Anpassungen vornehmen können.
  • Verschiedene Formatierungsoptionen sorgen dafür, dass dein Theme den Inhalt so gestaltet, wie du es erwartest. Die XML-Datei enthält Inhalte und Medien, um dies zu testen.
  • Du hast auch Inhalte in verschiedenen Sprachen, die Schriften enthalten, die Formatierungsfehler verursachen könnten, testen.

Du findest die XML-Datei der Theme Unit Test Data im offiziellen WordPress GitHub Repository oder im Make WordPress Themes Handbook. Sobald du sie heruntergeladen hast, gehst du in WordPress zum Bildschirm Tools > Importieren:

Die Seite „WordPress-Importoptionen“. In der linken Seitenleiste werden verschiedene Menüelemente wie Dashboard, Beiträge, Medien und Tools angezeigt. Im Hauptinhaltsbereich wird eine Liste verschiedener Plattformen angezeigt, von denen Benutzer Inhalte importieren können, darunter Blogger, LiveJournal, Movable Type, RSS, Tumblr und WordPress selbst. Neben jeder Option befinden sich die Links „Jetzt installieren“ und „Details“.
Die Import-Seite im WordPress-Dashboard

Hier wird eine Liste mit Importoptionen für die Plattform angezeigt, für die du Jetzt für WordPress installieren auswählen möchtest. Alternativ kannst du auch das WordPress Importer Plugin installieren. Der Installationslink ändert sich in Importer ausführen. Klicke darauf, um einen Uploader-Dialog zu öffnen. Wähle dann deine XML-Datei aus und klicke auf die Schaltfläche Datei hochladen und importieren:

Die Seite „WordPress importieren“ dient speziell dem Import von WordPress-Inhalten. Sie enthält Anweisungen zum Hochladen einer WordPress eXtended RSS (WXR)-Datei. Es gibt eine Schaltfläche „Datei auswählen“, um die Datei auszuwählen, mit einer maximalen Upload-Größe von 128 MB. Darunter befindet sich eine blaue Schaltfläche „Hochladen“.
Der WordPress-Import-Bildschirm mit der zu importierenden Datei

Der Inhalt, der importiert werden soll, kommt mit anderen Benutzerprofilen. Auf dem Bildschirm WordPress importieren kannst du wählen, ob du sie zusammen mit den Inhalten importieren möchtest. Alternativ kannst du entweder einen eigenen Benutzer anlegen oder den Inhalt einem bereits auf deiner Website vorhandenen Benutzer zuweisen:

Der Bildschirm „WordPress importieren“ zum Zuweisen von Autoren zu Inhalten. Es gibt Felder zum Erstellen neuer Benutzer oder zum Zuweisen von Beiträgen zu bestehenden Benutzern für zwei Importautoren: Theme Buster und Theme Reviewer. Unten befindet sich ein Kontrollkästchen zum Importieren von Dateianhängen und eine Schaltfläche „Senden“.
Der WordPress-Import-Dialog zeigt die Option an, den Inhalten Autoren zuzuweisen

Es wird empfohlen, dass du das Kontrollkästchen Dateianhänge herunterladen und importieren aktivierst. Dies spiegelt eine typische WordPress-Erfahrung wider. Sobald du auf die Schaltfläche Absenden klickst, nimmt sich WordPress einige Augenblicke Zeit, um die Inhalte, Benutzer und Medien zu importieren. Von hier aus kannst du testen, wie dein Theme mit verschiedenen Inhaltstypen und Szenarien umgeht, um sicherzustellen, dass es die Anforderungen an die Darstellung und Formatierung der Inhalte erfüllt.

Die Grundlagen des Theme-Testens

Der richtige Arbeitsablauf ist der Schlüssel zu einem reibungslosen und störungsfreien Erlebnis. Das gilt besonders, wenn du eine lange Liste von zusätzlichen Tools und Plugins verwalten musst. Sobald du eine stabile Testumgebung hast, kannst du die für das Testen erforderlichen Schritte festlegen.

Das Wichtigste beim Testen von WordPress-Themes ist, dass es iterativ und fließend ist. Es gibt keinen festen, linearen Arbeitsablauf, der Schritt für Schritt abläuft. Stattdessen gibt es eine Reihe von Aufgaben, die du in der von dir gewünschten Reihenfolge erledigen kannst.

Zum Beispiel wird dein Arbeitsablauf wahrscheinlich mindestens einen oder alle der folgenden Schritte beinhalten:

  • Aktivieren des Debug-Modus.
  • Ausführen der Plugins Theme Check oder Theme Sniffer.
  • Testen mit den Theme Unit Test Data.
  • Fehlersuche mit den Browser DevTools.

Das Testen der Optionen und Anpassungen deines Themes kann an verschiedenen Stellen erfolgen. Dieser Bereich wird im Laufe des Prozesses immer wieder aufgegriffen. Das Gleiche gilt für die Überprüfung der Plugin-Kompatibilität. Diese beiden Bereiche werden ständig überprüft. Andere Tests, die du durchführst, werden sich oft um diese Bereiche drehen.

Die Debugging-Phase schließt sich oft an deine Tests an, auch wenn es einige Überschneidungen gibt. Letztendlich geht es bei der Prüfung von WordPress-Themes um die Bereiche Funktionalität, Leistung, Sicherheit, Zugänglichkeit und „Eignung“ des Codes.

Wenn dein Theme die Tests bestanden hat, die offiziellen WordPress-Anforderungen erfüllt und keine Bugs aufweist, sollte es ganz einfach einzureichen sein.

Die Kernbereiche der technischen Prüfung von WordPress-Themes

Wenn du die Grundlagen kennst, kannst du dir die wichtigsten Aspekte der Prüfung deines Themes ansehen. Wie bei den Grundlagen sind auch diese Kernbereiche fließend und iterativ. Es ist jedoch eine gute Idee, zunächst zu prüfen, ob dein Theme die grundlegenden Funktionen beherrscht.

Testen der Funktionalität

Mit dem Funktionstest wird sichergestellt, dass alle Aspekte deines Themes wie erwartet funktionieren. Ein Theme, das die Standardfunktionen von WordPress nicht unterstützt, ist nicht brauchbar. Die Theme Unit Test Data sind dafür unerlässlich, da du damit überprüfen kannst, wie dein Theme mit typischen Situationen und Randfällen umgeht.

Du wirst zum Beispiel bereits Beiträge und Seiten mit typischen und untypischen Inhalten haben, so dass es unnötig ist, noch mehr davon zu erstellen. Das Testen dieser Inhalte ist subjektiv und hängt von deinen Zielen, den Designvorgaben, den Wünschen des Kunden und vielem mehr ab.

Für die meisten Anwendungsfälle ist es sinnvoll, die folgenden Inhalte zu testen:

  • Gehe alle typischen und beliebtesten Blöcke durch – Absatz, Liste, Bild, Überschrift, um nur einige Beispiele zu nennen – und prüfe, wie sie im Frontend aussehen. Überprüfe die Ausrichtung, die Abstände und die allgemeine Darstellung auf Unstimmigkeiten.
  • Mehrere Optionen müssen auf Kompatibilität getestet werden. Das kann mit den WordPress-Kerneinstellungen, den verschiedenen verfügbaren Blöcken und sogar mit den Einstellungen von Drittanbietern für andere Plugins sein.
  • Wenn dein Theme einen Blog betreibt, überprüfe, ob der Kommentarbereich alle Inhalte anzeigt. Es ist auch wichtig, verschachtelte Kommentare hier zu testen, damit das Design und die Funktionalität wie erwartet funktionieren.
  • An dieser Stelle solltest du nach Blöcken suchen, die in dein Theme integriert werden, und sie testen. Der Kommentar-Block könnte zum Beispiel noch angepasst werden müssen. Blocksammlungs-Plugins von Drittanbietern müssen möglicherweise auf ihre Kompatibilität getestet werden.

Bei klassischen Themes solltest du Widget-Bereiche, Shortcode-Funktionen, die Navigation und andere Elemente testen, die sich von den Block-Themes unterscheiden. Die meisten Themes sollten jedoch standardmäßig mit dem Block-Editor funktionieren, da er die Zukunft von WordPress darstellt.

Testen des Blockeditors

Dein Theme muss vollständig mit dem Block- und dem Site-Editor kompatibel sein. Ein guter Anfang sind die Vorlagen, die du unter Design > Vorlagen im Seiteneditor findest:

Die WordPress-Site-Editor-Oberfläche zeigt die Seite „Vorlagen“. Sie zeigt ein Raster mit Vorschaubildern der Vorlagen, darunter „Alle Archive“, „Blog-Startseite“, „Index“ und andere Seitenvorlagen. Jedes Vorschaubild zeigt eine blaue Drahtgitter-Vorschau des Vorlagenlayouts.
Der WordPress-Seiteneditor-Vorlagen-Bildschirm

Hier musst du sicherstellen, dass deine Vorlagen angezeigt werden und du sie ohne Fehler bearbeiten kannst. Vielleicht möchtest du die Vorlagen deines Themes anpassen oder sogar eigene erstellen.

Die Oberfläche Stile ist ein weiteres wichtiges Anpassungswerkzeug im Seiteneditor und damit ein wichtiger Faktor für die Qualität deines Themes.

Die Benutzeroberfläche des WordPress-Site-Editors für Stile. Der Hauptinhaltsbereich zeigt einen blauen Hintergrund mit weißem Text. In der rechten Seitenleiste wird der Stileditor der Website angezeigt, insbesondere die Einstellungen der Farbpalette.
Die Oberfläche des WordPress-Site-Editors für Stile

Du kannst mit den Einstellungen herumspielen, um zu sehen, ob du typische Anpassungen vornehmen kannst. In anderen Fällen kannst du mit den Layout-Einstellungen arbeiten, damit alles gut zusammenpasst.

Weitere Elemente von Block Themes müssen von dir beachtet werden:

  • Theme.json. Teste deine theme.json Datei gründlich, um sicherzustellen, dass sie die globalen Stile und Einstellungen richtig konfiguriert.
  • Block-Variationen. Wenn dein Theme benutzerdefinierte Block-Variationen verwendet, ist es wichtig, diese auf verschiedene Arten zu testen.
  • Benutzerdefinierte Blockvorlagen..: Überprüfe diese und alle relevanten Vorlagenteile nach und nach, damit du keine weiteren Bugs oder Fehler einfügst.

Diese Tests müssen zusätzlich zu den technischen Funktionen durchgeführt werden, z. B. um sicherzustellen, dass alle Aktions- und Filter-Hooks richtig funktionieren. Teste dein Theme gegebenenfalls mit WooCommerce oder anderen E-Commerce-Plugins. Schließlich wollen viele Kunden-Websites auch in die sozialen Medien integriert werden. Teste alle Sharing-Buttons oder Feeds, um sicherzustellen, dass sie gemäß den Anforderungen deines Kunden funktionieren .

Plugin-Kompatibilität

Eine WordPress-Website wird im Laufe ihres Bestehens wahrscheinlich mehrere Plugins verwenden. Da es so viele Plugins und Kombinationen gibt, ist es schwierig, alle Anwendungsfälle zu berücksichtigen.

Das kann Kopfschmerzen bereiten. Auch wenn es klar ist, dass du dein Theme mit einigen Plugins testen musst, ist es schwer zu wissen, welche das sind. Wir raten dir, von allem ein bisschen zu verwenden:

  • Die beliebtesten Page Builder Plugins wie Elementor, Beaver Builder, Bricks, Brizy und Divi.
  • Die meisten Websites verfügen über ein Plugin für die Suchmaschinenoptimierung (SEO) wie Yoast SEO. Wir empfehlen auch einen Blick auf SEOPress und einige andere.
  • Caching-Plugins sind ebenfalls weit verbreitet. WP Super Cache, W3 Total Cache und WP Rocket sind alle führend auf diesem Gebiet.
  • Du kannst viele verschiedene Formular-Plugins finden, aber Ninja Forms, Contact Form 7, WPForms und Gravity Forms werden alle häufig verwendet.
  • Die Plugins von Automattic und dem Make WordPress Core Team sollten auf deiner Liste der Testlösungen stehen. Akismet, Jetpack und sogar das Classic Editor Plugin sollten alle gründlich getestet werden.

Du solltest nach auffälligen Konflikten suchen und dann an kleineren Problemen arbeiten. Viele Themes geben die Kompatibilität von Plugins in ihren Marketingmaterialien an, daher kann es deine Glaubwürdigkeit erhöhen, wenn du diesem Bereich Zeit widmest.

Zugänglichkeitstests

Nicht jeder Nutzer hat das Privileg, perfekt zu sehen oder über funktionierende Gliedmaßen zu verfügen. Das sollte kein Hindernis für die Nutzung deines Themes sein, also musst du vor dem Start Tests zur Barrierefreiheit durchführen.

WordPress hat seine eigenen Richtlinien für Barrierefreiheit, die vom Make WordPress Accessible Team zur Verfügung gestellt werden. Ein guter Ansatz für deine eigenen Tests ist es, die vorteilhaftesten Zugänglichkeitspraktiken zu studieren. Es gibt viele, die du berücksichtigen kannst, und zwar in verschiedenen Kategorien:

  • Entwicklung. Dazu gehören Aspekte wie die Verwendung von Paginierung anstelle von unendlichem Scrollen, die korrekte Beschriftung von Webformularen, die Verwendung von semantischem HTML, die Implementierung der richtigen Kopfzeilenhierarchie und vieles mehr.
  • Inhalt. Diese Praktiken sind einfach, wie z.B. das Öffnen von Links im selben Tab, das Hinzufügen von ALT-Text-Beschreibungen und die Anwendung von Lesbarkeit.
  • Design. Schriftgröße und Farbkontrast sind wichtige Themen, wenn es um Barrierefreiheit geht. In der Testphase geht es eher um die Verfeinerung.

Viele dieser Praktiken sind auch mit den Web Content Accessibility Guidelines (WCAG) 2.0 kompatibel und entsprechen diesen. Hier findest du Checklisten, die dir dabei helfen, Elemente, die mit der Barrierefreiheit im Web zu tun haben, zu erfassen und zu testen. Wenn du die Checks für Entwicklung, Inhalt und Design durchläufst, garantierst du deinem Theme eine gute Grundlage. Es gibt sogar komplette Kurse, in denen du lernst, wie du Barrierefreiheitstests in deinen Projekten anwendest.

Tools zur Prüfung der Barrierefreiheit

Wenn es um geeignete Tools geht, gibt es zwei Empfehlungen:

  • axe. Axe von Deque läuft als Teil der DevTools deines Browsers und automatisiert eine Reihe von Tests (je nach Account) innerhalb von Sekunden.
  • WAVE. WebAIMs WAVE ist ein Tool, das du entweder im Browser oder über eine Erweiterung nutzen kannst.

Wenn du diese beiden Tools zusammen verwendest, kannst du die Barrierefreiheit hervorragend testen. Du kannst zum Beispiel mit einem schnellen Durchlauf eines Axttests beginnen:

Ein Screenshot einer WordPress-Website, der die Ergebnisse von Barrierefreiheitstests im Browser DevTools anzeigt. Unterhalb des Hauptinhaltsbereichs zeigt ein Bericht insgesamt 34 Probleme mit der Barrierefreiheit an, darunter 24 Probleme mit dem Farbkontrast und neun Probleme mit der ARIA-Rolle.
Das Axt-Tool im Entwicklerprüfungsfenster des Browsers

Du brauchst nur zu klicken, um einen Ganzseitenscan zu starten. Die Ergebnisse zeigen dir, was zu beachten ist und wie du es beheben kannst.

WAVE kann überwältigend wirken, vor allem, wenn du eine große Anzahl von Problemen zu beheben hast. Die Übersicht über die Reihenfolge und Struktur des Inhalts ist jedoch von unschätzbarem Wert, um zu beurteilen, wie dein Theme mit Screenreadern funktioniert:

Die Benutzeroberfläche des WAVE-Evaluierungstools für die Barrierefreiheit einer WordPress-Website. Im linken Bereich werden Informationen zur Barrierefreiheit angezeigt, wobei die Registerkarte „Order“ ausgewählt ist. Es werden Seitenelemente in der Lesereihenfolge aufgelistet. Im rechten Bereich wird die Startseite der Website angezeigt.
Das WAVE-Zugänglichkeitstool wird in der linken Seitenleiste angezeigt

Es ist ein guter Ansatz, grobe Probleme mit axe zu klären, wie z. B. allgemeine Farbkontrastwarnungen, und dann mit WAVE tiefer gehende Zugänglichkeitsprobleme anzugehen. Auf diese Weise solltest du Inhalte mit der richtigen Überschriftenhierarchie und Struktur, zugänglichen Formulareingaben und Beschriftungen haben.

Vielleicht möchtest du sogar die Tastaturnavigation testen und dein Theme mit einem Bildschirmlesegerät verwenden, um zu verstehen, wie sich die Nutzer/innen fühlen. In jedem Fall ist das Testen der Barrierefreiheit deines Themes nicht nur ein „Nice-to-have“-Aspekt, sondern unerlässlich, um ein inklusives Web zu schaffen.

Leistungstests

Das Testen der Leistung deines Themes stellt sicher, dass es für die Nutzer gut läuft. Das kann auch ein wichtiger Aspekt für dein Marketing sein. Viele Themes werben mit hervorragender Leistung, was beweist, wie wichtig sie ist.

Die gleiche Methode zum Testen der Webleistung gilt auch für das Testen von WordPress-Themes. Es gibt eine gründliche Methode, um dies zu erreichen, auch wenn sich deine Tools unterscheiden können.

Ideal sind zum Beispiel PageSpeedInsights oder Lighthouse von Google. Ein Tool wie WebPageTest kann eine gute Alternative sein, wenn du eine zweite Meinung einholen möchtest. Auf jeden Fall gibt es viele Tools für Leistungstests, die genau auf deine Bedürfnisse zugeschnitten sind.

Wenn es darum geht, was du testen sollst, solltest du dich auf ein paar wichtige Bereiche konzentrieren:

  • Deine Core Web Vitals sollten immer in Ordnung sein, denn das ist die Grundlage für die Leistung deines Themes.
  • Die Minimierung von HTTP-Anfragen und die Optimierung des Ladens von Assets helfen dir, deine Ressourcen besser zu verwalten.
  • Query Monitor hilft dir, Datenbankabfragen zu identifizieren und zu optimieren.
  • Wenn dein Theme gebündelte Bilder enthält, stelle sicher, dass sie die optimale Größe haben und dass du sie komprimierst, bevor du sie verpackst.

Die Entscheidung für ein responsives oder adaptives Design sollte schon früh in der Entwicklung deines Themes getroffen werden. Egal wofür du dich entscheidest, du musst es testen, um sicherzustellen, dass es so funktioniert, wie du es willst. Du willst keinen horizontalen Bildlauf, kein Zoomen von Inhalten, keine kleinen Touch-Ziele oder Display-Layouts, die sich nicht an die Bildschirmgröße anpassen, einführen.

An diesem Punkt kannst du Cross-Browser-Tests durchführen. BrowserStack ist ein großartiges Tool für diese Aufgabe:

Die Startseite von BrowserStack, einer browserübergreifenden Testplattform. Die Kopfzeile enthält Navigationslinks. Die Hauptüberschrift lautet „Anwendungen und Browser-Tests leicht gemacht“ mit einer Unterüberschrift über das Testen auf über 20.000 echten Geräten. Darunter befinden sich Abschnitte für verschiedene Testprodukte, darunter Live-, Automatisierungs-, Percy- und Barrierefreiheitstests.
Die BrowserStack-Website

Die Antwortzeiten des Servers stehen zwar nicht in direktem Zusammenhang mit dem Testen von Themen, sind aber für deine Endnutzer/innen wichtig. Du könntest in deiner Dokumentation oder in deinem Marketing geeignete Anbieter empfehlen. Natürlich ist Kinsta rasend schnell, robust und sicher.

Sicherheitstests

WordPress-Sicherheitstests sollten für dich oberste Priorität haben. Das WordPress-Team stellt eine Vielzahl von Unterlagen zur Verfügung, die sicherstellen, dass dein Theme sicher ist.

Behalte diese Grundsätze im Hinterkopf:

  • Validiere und bereinige alle Daten, die du durch dein Theme akzeptierst. Es ist eine gute Idee, bei Benutzereingaben vorsichtig zu sein und die Validierung der Bereinigung vorzuziehen.
  • Bei nicht vertrauenswürdigen Quellen solltest du alles so spät wie möglich ausschließen – normalerweise in der Ausgabephase.
  • Verlasse dich auf die WordPress-APIs, da diese sichere Wege sind, um Daten innerhalb deines Themes zu verarbeiten.
  • WordPress Nonces sind Hashes, die helfen, Anfragen zu schützen, zu validieren und zu authentifizieren. Sie sind keine primäre Schutzmaßnahme, können aber die bereits vorhandene Sicherheit verstärken.

Cross-Site Scripting (XSS), Cross-Site Request Forgeries (CSRF) und SQL-Injections gehören zu den häufigsten Schwachstellen von WordPress-Websites. Dein Theme sollte wasserdicht sein, wenn es um den Schutz vor diesen Schwachstellen geht. Wenn du diese Grundprinzipien der Theme-Sicherheit befolgst, kommst du diesem Ziel so nahe wie möglich.

Typische Praktiken für einen reibungsloseren Workflow bei der Theme-Entwicklung

Die Entwicklung von Themes in einer Agentur erfordert eine andere Herangehensweise als bei Einzel- oder Kleinprojekten. Du brauchst mehr Struktur, Konsistenz und Effizienz. Dies kannst du erreichen, indem du deine eigenen internen Codierungsstandards entwickelst, die die von WordPress ergänzen. Gemeinsame Workflows mit Jira oder Trello können genutzt werden, um Probleme und Fehler zu verfolgen.

Die Jira-Projektmanagement-Oberfläche zeigt ein Aufgabenboard mit drei Hauptabschnitten: Marketing-Launch, iOS-Sprint und Rückstand. Jeder Abschnitt enthält Aufgaben mit ihrem Status (zu erledigen, in Bearbeitung, erledigt) und zugewiesenen Teammitgliedern, die durch runde Profilbilder dargestellt werden. Das Board demonstriert einen strukturierten Ansatz zur Organisation und Verfolgung von Projektaufgaben.
Die Jira-Oberfläche

Wenn es darum geht, sicherzustellen, dass dein Team den allgemeinen Qualitätsanforderungen gerecht wird, gibt es ein paar Praktiken, die dabei helfen können:

  • Implementiere einen Peer-Review-Prozess. Das kann so einfach sein, dass die Teammitglieder den Code der anderen vor dem Zusammenführen überprüfen. In anderen Situationen kannst du auch Pair Programming in Betracht ziehen.
  • Entwickle wiederverwendbare Komponenten. Der Aufbau einer Bibliothek mit wiederverwendbaren Codeschnipseln und Komponenten kann deine Entwicklungszeit deutlich verkürzen. In manchen Fällen kannst du sogar ein komplettes Framework für die Erstellung zukünftiger Themen erstellen.
  • Implementiere umfassende Testverfahren. Vielleicht möchtest du eine standardisierte Test-Checkliste entwickeln oder User Acceptance Tests (UAT) in deinen Arbeitsablauf einbauen.

Einige dieser Implementierungen decken typische DevOps-Praktiken ab und können die Qualität der Arbeit deiner Agentur verbessern. Continuous Integration and Continuous Deployment (CI/CD) ist zum Beispiel eine der besten Implementierungen, die du vornehmen kannst. Mit den richtigen Tools in deiner Pipeline kannst du deinen Prüfprozess auf vielfältige Weise automatisieren. CI/CD lässt sich außerdem problemlos in deinen bestehenden Arbeitsablauf einfügen und kann dir wertvolle Teststunden ersparen.

Zusammenfassung

Das Testen von WordPress-Themes ist notwendig, um sicherzustellen, dass dein Produkt robust und zuverlässig ist und für deine Nutzer funktioniert. Die Einhaltung der offiziellen WordPress-Standards und -Anforderungen ist nicht verhandelbar, wenn du dein Theme im WordPress Theme Directory veröffentlichen willst. Diese Richtlinien sind auch für die Theme-Entwicklung durch Agenturen und andere, die nicht für die Öffentlichkeit veröffentlichen, von Nutzen.

Unabhängig davon ist ein umfassender WordPress-Theme-Test eine Investition, die Zeit und Mühe erfordert. Wenn du die Kernbereiche abdeckst, auf die es ankommt – Funktionalität, Barrierefreiheit, Leistung, Sicherheit und Codequalität -, wirst du für deine Kunden etwas erreichen. Wenn du die WordPress-Standards einhältst, kann es einfacher sein, ein Theme nach dem Ende einer Kundenbeziehung wieder zu verwenden.

Hast du Tipps zum Testen von WordPress-Themes, die auf deinen eigenen Erfahrungen beruhen? Teile sie in den Kommentaren unten mit!

Jeremy Holcombe Kinsta

Content & Marketing Editor bei Kinsta, WordPress Web Developer und Content Writer. Außerhalb von WordPress genieße ich den Strand, Golf und Filme. Außerdem habe ich Probleme mit großen Menschen ;).