9 Best Practices für gelungene CMS-Vorlagen Theme-Entwicklung unter Wordpress

Anbieter zum Thema

Rittal GmbH & Co. KG

EPS Rechenzentrum Infrastruktur GmbH

Theme-Entwicklung für Wordpress kann ein einträgliches Geschäft sein: Eine gute Oberflächenvorlage generiert zehntausende Verkäufe auf Märkten wie Themeforest. Doch auch für den eigenen Bedarf ist die Theme-Entwicklung für Wordpress grundsätzlich sinnvoll.

Eine Wordpress-Seite ist mehr als eine Wordpress-Installation mit Content: Das Erscheinungsbild, die Funktionalität und nicht zuletzt die Geschwindigkeit eines Themes entscheiden über Erfolg oder Nichterfolg einer Wordpress-basierten Website. Denn wenn das Template nicht passt, springen Benutzer ab – oder Google wertet die Seite ab, weil sie zu langsam lädt.

Für Software-Entwickler ist Wordpress-Theme-Entwicklung daher immer ein interessantes Spielfeld. Wordpress-Anwender sind erstaunlich bereit dafür, Geld für Themes auszugeben – und eine solide Vorlage sorgt nicht nur für einen guten Ruf als Wordpress-Entwickler, sondern möglicherweise auch für ein monatliches Grundeinkommen.

Themes lassen sich als Eigenwerbung kostenlos in den üblichen Repositories einpflegen, per Lizenzcode und Premium-Version selbst vertreiben oder über Marktplätze wie Envato Themeforest verkaufen. Wer hier gute Qualität und regelmäßige Updates bei zuverlässigem Design bietet, hat schon gewonnen. Dementsprechend bietet Wordpress-Theming Webentwicklern nicht unerhebliche Chancen auf Nebeneinkünfte und Steigerung der eigenen Bekanntheit.

1. Thema festlegen

Wenig sinnvoll ist es natürlich, einfach drauflos zu hacken: Vor der Erstellung eines Themes steht immer die Frage, welche Kunden das Theme ansprechen soll. Zunächst sollten Entwickler sich daher darüber im Klaren sein, welchem Zweck das Theme dienen soll: Dient es als Portfolio-Theme für Fotografen oder als Webshop-Vorlage? Soll ein Online-Magazin damit betrieben werden oder eine Buddypress- oder BBPress-basierte Community? Abhängig von diesen Überlegungen sind sowohl das Design als auch die Funktionen des künftigen Themes.

2. Geschwindigkeit oder Funktionen?

Natürlich ist es auch möglich, eine Multifunktionsvorlage („Multi Purpose Theme“) zu entwickeln, das für alle möglichen Einsatzzwecke geeignet ist. Dabei helfen auch Theme-Frameworks, die entweder selbst entwickelt oder als Grundlage hergenommen werden können.

Frameworks und Multifunktions-Seiten haben allerdings einen erheblichen Nachteil: Sie wirken für Otto-Normal-Anwender schnell überfrachtet und benötigen in der Praxis oft erheblichen Optimierungsaufwand – etwa eigene Performance-Plug-ins –, um die Website nicht unnötig zu verlangsamen. Daher sollte sich jeder Entwickler zunächst in seinen potenziellen Kunden oder Nutzer versetzen: Was würde er oder sie wohl von einem Theme verlangen, um es selbst zu verwenden?

3. Anforderungen und Design festlegen

Im Rahmen dieser Überlegungen ist es sinnvoll, eine Art Lastenheft zu definieren: Hier sollte jede Funktion, jeder Seiten- und Medientyp und jedes optische Element aufgeschrieben werden, das das Theme enthalten soll. Auf diese Weise kann zum Beispiel das CSS-Gerüst recht schnell erstellt werden.

Zusätzlich empfiehlt es sich, ein Mockup des Designs inklusive der Schriftarten zu erstellen, um einen ersten Blick auf die Website zu werfen, ohne eine Zeile Code geschrieben zu haben: In einem Bildbearbeitungsprogramm wie Photoshop, Affinity Photo oder dem kostenlosen Gimp können Elemente beliebig verschoben und verändert werden, ohne eine Zeile Code zu schreiben.

experte GUI Prototyping auf dem Desktop und im Web

4 kostenfreie Mockup-Tools

4. Test-Umgebung mit Dummy-Content anlegen

Jede Wordpress-Seite besitzt drei Elemente: Das Grundsystem, das Theme und der Content. Während das Theme naturgemäß noch in Entwicklung ist, ist ein Wordpress-System schnell aufgesetzt, wahlweise auf einem lokalen oder entfernten LAMP-Server oder als virtuelle Maschine.

Der Content ist essenziell für das Design einer Seite, allerdings reicht es nicht, hier seitenweise Blindtext per Lorem-Ipsum-Generator in die Datenbank zu packen: Wordpress-Seiten bestehen auch aus Bilder, Kommentaren und anderen Elementen. Hierbei helfen Plugins wie FakerPress, die komplette Website-Strukturen mit Dummy-Content in die Datenbank schreiben.

5. Grundgerüst der Seite erstellen

Nun können sich Theme-Entwickler eigentlich auch schon an die Arbeit machen: Wordpress-Themes sind keine reinen Design-Dateien, sondern besitzen zusätzlich Funktionen, die auf dem Grundsystem aufsetzen. Als Ausgangsbasis bieten sich sogenannte Starter-Themes an, die bereits die nötige Grundstruktur aufweisen. Das spart zudem die Arbeit, alle Dateien und Verzeichnisse manuell anzulegen.

Ein solches Starter-Theme ist zum Beispiel Underscores der Wordpress-Macher Automattic. Wer auf dem beliebten Bootstrap-Framework aufsetzen möchte, kann auch zu WP Bootstrap Starter greifen, das auf Underscores aufsetzt. Einsteigerfreundlich ist auch Naked, das in seiner Grundstruktur auch gleich einzelne Funktionen erklärt und dadurch das Erlernen des Wordpress-Codex deutlich erleichtert.

6. Kreativ werden

Stehen die Grundidee und das technische Grundgerüst, spricht nichts dagegen, endlich kreativ zu werden. Natürlich ist es sinnvoll, sich vorher noch ein wenig bei der Konkurrenz umzusehen: Wie sehen aktuelle Designs aus, welche Schriftarten und -schnitte werden benutzt, welche Schriften und welche Design-Regeln kommen zum Einsatz?

Zurückgreifen kann man dabei auf nahezu unumstößliche Klassiker, zum Beispiel rote und grüne Knöpfe für den Opt-In, etwa eines Newsletters. Aber es gibt auch viel kreativen Spielraum. Gerade die Schriftarten sind wichtig, um einen gewissen Look der Seite zu erzeugen. Wer die Muße hat, baut in sein Theme vielleicht Google Fonts ein und bietet dem Nutzer Optionen für den Buchstaben-Abstand und die Linienhöhe.

7. Responsiv arbeiten

Moderne Websites sind in aller Regel für den Einsatz auf Mobilgeräten, Tablets und Desktop-Rechnern optimiert. Diesen Design-Ansatz sollten Entwickler moderner Themes immer im Hinterkopf behalten und das Theme auf verschiedenen Geräten und Bildschirmgrößen optimieren.

8. Weniger ist mehr

Auch, wenn die Starter-Themes und manche Frameworks möglicherweise zahllose Funktionen erlauben: Webdesigner, die sich mit Wordpress-Themes befassen, sollten immer den Minimalismus-Gedanken im Auge behalten. Das gilt vor allem für die Funktionalität und die verwendete Code-Basis, hier sollte immer so viel wie nötig und so wenig wie möglich gecodet werden. Kunden und Nutzer profitieren dadurch von schnellen Websites und der Entwicklungs- und Pflegeaufwand hält sich für den Entwickler ebenfalls in Grenzen.

9. Testen, Testen, Testen

Das eigentliche Coding kann bequem in einem Quelltext-Editor stattfinden, allerdings sollten Entwickler zwischendurch auch immer wieder testen: Einerseits, ob das Theme auf allen Geräten optimal dargestellt wird; und andererseits, ob es auch den von den Wordpress-Machern vorgegebenen Spezifikationen entspricht. Dabei helfen Wordpress-Plug-ins wie Theme Check, die im Entwickler-Wordpress installiert werden und das Theme durch alle Tests führt, die auch von wordpress.org für die Veröffentlichung durchgeführt werden.

(ID:47503287)