WordPress

Am Anfang steht die Entscheidung für die
grundsätzliche Herangehensweise

Ursprünglich war WordPress als Tool zur Erstellung von Weblogs konzipiert worden. Wegen seiner einfachen Bedienung wurde es aber schon bald auch für Webseiten verwendet, die nichts mit Blogging zu tun hatten. Zunächst für private Websites genutzt, werden seit einigen Jahren auch professionell gestaltete und hochkomplexe Unternehmensportale mit WordPress gebaut. Um ganz unterschiedliche Anforderungen erfüllen zu können, ist mittlerweile ein nahezu unüberschaubares Angebot an Plugins, Page Buildern etc. rund um WordPress entstanden.

Wer eine Seite mit WordPress erstellen möchte, sollte deshalb gleich zu Beginn einige Fragen klären, um von Anfang an den richtigen Ansatz zu verfolgen. Was kann ich und was will ich? D.h. welches Wissen und Know-how bringe ich und wie hoch ist mein professioneller Anspruch?

  • Erste Entscheidung: Verwende ich ein fertiges Theme oder entwickle ich ein eigenes? 

  • Zweite Entscheidung: Nutze ich den in WordPress integrierten Gutenberg-Editor, einen separaten Page Builder oder Custom Fields (hier hat der Redakteur zwar weniger Gestaltungsmöglichkeiten, dafür bleibt die Konsistenz des Designs gewahrt)? Bei einer Headless-Lösung wird das Frontend komplett von WordPress getrennt.

Als WordPress Agentur haben wir bereits jeden dieser Wege beschritten und können sie bei der Entscheidungsfindung unterstützen.

Pre-Built Theme oder Custom Theme?

Der Unterschied zwischen Pre-Built Theme und Custom Theme ist in etwa so wie der zwischen einem Anzug von der Stange und einem maßgeschneiderten Anzug. Bei Pre-Built muss man mit dem leben, was man sich da geholt hat. Bei Custom bekommt man eine ganz individuell gestaltete Website.

Pre-Built Themes

Vorteile

  • Niedrige Kosten: Viele Themes sind kostenlos bzw. sehr kostengünstig. „Bessere“ Pre-Built Themes sind ab 50 € aufwärts erhältlich.

  • Man kann sich das Theme vorher ansehen. Vielfach gibt es einen Demo-Editor, um Inhalte auszuprobieren.

  • Schnelle Lösung: Das Theme muss nur installiert werden und ist sofort einsatzbereit.

  • Riesige Auswahl: Theme-Forest und Co bieten Zehntausende von Themes an.

  • Customizer-Versprechen: Viele Pre-Built Themes bieten Customizer-Optionen, um Farben, Schriften und andere Einstellungen individuell anzupassen.

Nachteile

  • Fehlende Individualität: Nicht jeder Website-Besucher prüft, ob er das Design schon einmal irgendwo gesehen hat (Trends sorgen ohnehin für eine gewisse Uniformität des Webs), aber die Gefahr ist groß, dass die eigene Seite einer anderen sehr ähnelt. Wenn ein Theme 50.000 Downloads hat, heißt das, dass 49.999 andere Webseiten so aussehen könnten wie die eigene.

  • Begrenzte Möglichkeiten: Die Einschränkungen des Themes müssen hingenommen werden. Oft kommt man trotz Customizer-Optionen sehr schnell an die Grenzen des Themes.

  • Gefahr von Inkonsistenz: Viele Themes lassen sich durch Customizer-Optionen und die häufig integrierten Page Builder verändern. Die unzähligen Einstellungsmöglichkeiten können aber sehr schnell zu Überforderung, Inkonsistenz und Problemen führen.

  • „Wir kaufen ein fertiges Theme und passen das dann einfach an!“ – die Realität sieht oft anders aus: Anpassungen über die Customizer- oder erweiterten Theme-Optionen bzw. über ein Child-Theme sind nicht immer so möglich wie erhofft. Ein Child-Theme schafft schnell Inkompatibilitäten, z.B. wenn das Parent-Theme ein Update erhält und mit dem Child-Theme nicht mehr kompatibel ist. Frankensteins Monster ist da vorprogrammiert.

  • Plugin-Wildwuchs: Pre-Built Themes sind oft von einer Vielzahl von Drittanbieter-Plugins abhängig. Diese Plugins werden meist gleich mit ausgeliefert, aber:

    • Unter der Vielzahl von Plugins leidet die Performanz des gesamten Systems.

    • Die Gefahr von Sicherheitslücken wächst.

    • Plugins müssen gewartet und aktualisiert werden. Wer sich mit Updates nicht auskennt, hat schnell ein Problem.

    • Plugins veralten, wenn sie von den Entwicklern nicht mehr gepflegt werden.

    • Es können Kompatibilitätsprobleme mit anderen Plugins auftreten.

    • Lizenzkosten können anfallen: Z.B. wenn das Plugin nur 1 Jahr kostenlos im Theme enthalten ist und dann kostenpflichtig wird. Je nach Plugin können dadurch hohe Kosten entstehen.

    • Support ist nicht gewährleistet: Der Support für Drittanbieter-Plugins ist evtl. nicht im Theme enthalten, sondern nur im Rahmen einer speziellen Lizenz verfügbar. Im schlimmsten Fall wird ein Plugin gar nicht mehr betreut.

    • Unerfahrene Seiten-Betreiber werden durch die Vielzahl von Plugins für ein WordPress-Theme leicht überfordert und werden am Ende mit einem Theme voller Problem-Plugins allein gelassen.

  • Lizenzkosten: Wie schon bei den Plugins angesprochen, können Drittanbieter-Kosten anfallen: Font-Lizenzen, Plugins, Bildrechte etc.

  • Support:

    • Je nach Anbieter kann es sein, dass man zwar sehr guten, aber bezahlten oder sehr schlechten oder gar keinen Support erhält.

    • Wenn man den Support des Theme-Anbieters nicht nutzen kann, benötigt man einen Entwickler, der hilft. Doch die Anpassungsaufwände für Pre-Built Themes sind in der Regel viermal so hoch wie bei Custom Themes.

  • Content: Viele Demo-Seiten von Pre-Built Themes bestechen durch schöne Content-Bilder und genau passende Inhalte. Wenn der eigene Content dann aber nicht zum Theme passt, wirken die Seiten oft unharmonisch oder leer.

  • Qualität & Sicherheit: Es gibt hochwertige fertige Themes mit gutem Support, die stetig aktualisiert und weiterentwickelt werden und gute Scores bei Performance-Tests erreichen. Aber es gibt auch sehr viele niedrigpreisige Pre-Built Themes, die mittelmäßig oder schlecht sind und auch noch erhebliche Sicherheitslücken aufweisen.

  • DSGVO und GDPR

    • Viele Themes laden externe Quellen (z.B. Webfonts), jQuery oder andere Ressourcen per CDN, ohne vorher die Zustimmung des Besuchers einzuholen.

    • Bei manchen User-Interface-Komponenten ist die individuelle Anpassung für einen Cookie-Consent erforderlich.

Woran erkennt man ein gutes Pre-Built Theme?
  1. Performance, Audits, Responsiveness

  2. Bewertungen, Lebenszeit, Update-Zyklus, Entwickler-Aktivität, Roadmap

  3. Kompatibilität mit Plugins, Page Buildern etc.

Custom Theme

Vorteile:
  • Maßgeschneiderte Lösungen:

    • Individuelles Design: Custom Design, Unternehmens-CI, Farben, Schriften, Layout-Vorgaben etc. können genau eingehalten werden.

    • Individuelle Funktionalitäten: User Interface und User Experience können exakt an die Bedürfnisse angepasst werden, mit stark individualisierten UI-Komponenten.

    • Drittanbieter-Tools lassen sich leichter anbinden.

  • Qualität: Mit einem guten Entwicklungspartner erhält man ein hochwertiges Theme, bei dem auf Performanz, Qualität, Sicherheit, Responsiveness, Erweiterbarkeit, Wartbarkeit und Skalierbarkeit geachtet wurde.

  • Support: Ein guter Entwicklungspartner bietet …

    • Schnelle Hilfe bei Problemen

    • Anpassung und Erweiterung des Themes

    • Updates für Plugins und Prüfung auf Kompatibilität

  • DSGVO und GDPR: Der Entwicklungspartner kann die User-Interface-Komponenten auf Nutzerfreundlichkeit beim Thema DSGVO und GDPR anpassen.

  • Barrierefreiheit: Dieses Thema wird oft unterschätzt und vernachlässigt. Mit einem Custom Theme kann es ganzheitlich angegangen werden.

  • Plugin-Auswahl: Generell gilt „weniger ist mehr“. Der Entwicklungspartner kann hier beraten, eine Empfehlung für hochwertige und vertrauenswürdige Plugins aussprechen und deren Kompatibilität prüfen.

  • Lizenzkosten: Klare Kostenkontrolle und Informationen zu Lizenzen und Einsatzmöglichkeiten.

  • Content: Custom Themes sind „designed for content”. Die Gestaltung wird auf den tatsächlich bestehenden Content ausgerichtet und nicht andersherum.

Nachteile:
  • Kosten: Qualität kostet. Individualität kostet. Wissen & Support kostet. Mit ca. 10.000 € für ein hochwertiges Theme muss man rechnen.

  • Zeitfaktor: Schnelle Lösungen sind hier nur bedingt möglich. Wenn die Zeit fehlt, leidet die Qualität oder der Preis steigt.

Page Builder, Gutenberg Editor, Custom Fields oder gar Headless?

WordPress war ursprünglich eine Blogging-Software, mit der man Blog-Artikel schreiben konnte. Ein Blog-Artikel hatte üblicherweise: Überschrift, Text, Bild, Kategorien und Stichwörter (Tags). Entsprechend übersichtlich und reduziert waren die Eingabefelder für den Redakteur: Title, Content, Tags, Categories.

Custom Fields

Als WordPress mehr und mehr für „normale“ Webseiten mit vielfältigeren Inhalten eingesetzt wurde (und das Content-Feld mit sehr viel HTML gefüllt wurde), wurde das System mit Custom Fields ausgestattet. Über diese ergänzenden Felder kann der Redakteur den Content für die Seiten zusätzlich gestalten. Mit dem Plugin „Advanced Custom Fields“ kann man bei kluger Anwendung auch komplexere Seiten aufbauen und mit Content befüllen. Das zugrundeliegende Prinzip lautet:

  • Definiere Bereiche in einem Seiten-Template, die über die Custom Fields mit Inhalten befüllt werden können: Text, Bild, Datum etc. sind möglich. Die Eingaben des Redakteurs werden an den entsprechenden Stellen in das Template eingefügt. Der Rahmen der Seite ist jedoch nicht veränderbar.

  • Bei fortgeschrittener Anwendung lassen sich nicht nur Text und Bild, sondern auch komplexere Module und Komponenten in den Template-Bereichen ausgeben. Dafür ist eine Verschachtelung der Daten in den Custom Fields notwendig:

    • Dadurch hat der Editor die Möglichkeit mehrere Datensätze zu kombinieren, z.B. Text mit Bild oder andere UI-Komponenten.

    • Die Datensätze werden dann im Template gerendert.

    • Theoretisch lässt sich das beliebig erweitern, um z.B für jedes Modul noch Abstände oder Farben auswählen zu können.

    • Das kommt den Möglichkeiten eines Page Builders schon ziemlich nahe.

Vorteile:
  • Custom Fields eignen sich besonders für Seiten mit aufwendigem Design, bei denen der Redakteur nur gezielt Texte oder Bilder austauschen soll, das Layout aber nicht verändern darf.

  • Die Optionen im Editor lassen sich gezielt einschränken.

  • Der Code ist schlank und das System dadurch sehr performant.

  • Wenn die Optionen für die Datensätze zu ausführlich oder zu stark verschachtelt werden, wird die Eingabemaske immer unübersichtlicher.

Nachteile:
  • Wenn die Optionen für die Datensätze zu ausführlich oder zu stark verschachtelt werden, wird die Eingabemaske immer unübersichtlicher.


Page Builder

Um auch Redakteuren ohne Programmierkenntnisse mehr Gestaltungsmöglichkeiten anzubieten, gibt es eine Vielzahl von Page Buildern auf dem Markt. Diese sind in vielen unterschiedlichen Ausführungen und Funktionsumfängen erhältlich. Page Builder funktionieren ähnlich wie Custom Fields, verfügen aber über bedeutend mehr Funktionen:

  • Aufwendige Frontend-Editoren mit Drag&Drop-Funktion

  • CSS-Builder-Module zur Definition von Abständen, Farben etc.

  • Beliebige Reihenfolgen und Verschachtelungen

  • Grid-Anordnungen

  • Und vieles mehr

Ein paar bekannte Page Builder sind:
  • Elementor (unsere Wahl)

  • Beaver Builder

  • DIVI

  • WP Page Builder

  • Visual Composer

  • Live Composer

Mancher Page Builder gleicht schon einem CSS-Builder. Es ist erstaunlich, was damit möglich ist.

Vorteile:
  • Der Redakteur hat volle Layout-Kontrolle und maximale Flexibilität.

  • Die Basic-Designs der meisten Page Builder sehen bereits sehr gut aus. Ideal, um mit wenig Aufwand und ohne Programmiereinsatz individuelle Layouts zu gestalten.

  • Module lassen sich bequem übernehmen, um damit Seiten aufzubauen.

Nachteile:
  • Module dürfen nicht zu stark verändert werden (z.B. durch CSS im Theme).

  • Inhalte sollten nur bis zu maximal 10 Ebenen im HTML verschachtelt werden. Da die Page Builder aber sehr generisch sind, müssen häufig viele Divs eingefügt werden, um Layouts darstellen zu können.

  • Performance und DOM: Bei Elementor lässt sich sehr gut ein schlankes DOM realisieren, mit anderen Page Buildern haben wir eher negative Erfahrungen gemacht. Sie können bei Performance und SEO nicht überzeugen. Die User sind unzufrieden.

  • Die Ansichten für Smartphones und Tablets müssen berücksichtigt werden.

  • Layouten mit einem Page Builder ist Arbeit! Eine Seite lässt sich nicht einfach mal so zusammenklicken. Entweder man nutzt Demo-Layouts und hat den richtigen Content dafür oder man bleibt auf einer bescheiden gelayouteten Seite sitzen.

  • Die Vielzahl der Einstellungsmöglichkeiten kann überfordern: Wenn man einen Webauftritt mit professionellem Layout/Design haben möchte, muss man sich damit definitiv auseinandersetzen.

  • DSGVO: Bei Schriften werden oft externe Quellen geladen. Dafür muss man aber erst die Zustimmung des Users einholen.

Gutenberg Editor

WordPress verfügt mittlerweile über einen eigenen Page Builder, den Gutenberg Editor. Dieser ist fest im System integriert, kann aber auch deaktiviert werden. Der Editor basiert auf sogenannten „Blöcken“ und ermöglicht dem User, Seiten aus verschiedenen, einzelnen Modulen zusammenzubauen. Standardmäßig sind folgende Blöcke im Gutenberg enthalten: 

  • Titel, Paragraphen (Text)

  • Bild, Video, Audio, Galerie (Media)

  • Aber auch komplette Layout-Elemente wie Spalten oder Media- & Text-Kombinationen

Mittlerweile gibt es bereits zahlreiche Erweiterungen für die Gutenberg Blöcke, z.B. Stackable, die zusätzliche Gestaltungsmöglichkeiten bieten.

Bei den Vor- und Nachteilen unterscheidet sich der Gutenberg Editor nur wenig von den Page Buildern. Sein großes Plus: Er ist ein Standard-Feature von WordPress, das systemseitig beliebig erweiterbar ist. Man kann deshalb davon ausgehen, dass der Gutenberg zum neuen Standard für die Entwicklung von WordPress Webseiten wird, bzw. schon ist.

Weitere Vorteile:
  • Mit dem Gutenberg hat man einen schlanken, performanten und einfach zu bedienenden Page Builder, der – auch ohne zusätzliche Block Libraries – ausreichend Optionen für professionelle Layouts ohne viel Tamtam bietet.

  • Niedrige Kosten: Wenn die Standard-Blöcke des Gutenberg für die gewünschten Layouts ausreichen und man nur einen oder zwei zusätzliche Blöcke benötigt (die auch einzeln als Erweiterung erhältlich sind), kann man auf einen separaten Page gut verzichten.

  • Reichen die Standard-Blöcke nicht aus und werden zusätzliche Block Libraries eingesetzt, hat man schnell wieder den Komplexitätsgrad von Page Buildern erreicht, inklusive der damit verbundenen Probleme.

Nachteile:
  • Reichen die Standard-Blöcke nicht aus und werden zusätzliche Block Libraries eingesetzt, hat man schnell wieder den Komplexitätsgrad von Page Buildern erreicht, inklusive der damit verbundenen Probleme.

Wer den Gutenberg Editor einmal ausprobieren, kann ihn hier testen: https://de.wordpress.org/gutenberg/

Headless WordPress

Der Einsatz von WordPress als Headless CMS ist ein zwar wenig genutzter, aber für bestimmte Zwecke durchaus sinnvoller Ansatz. Die Idee dahinter ist einfach: Die Daten und ihre Darstellung werden komplett getrennt. Die Inhalte liegen in der WordPress Datenbank und werden headless per API an ein Frontend ausgeliefert, das den Content dann rendert.

Das erinnert nicht zu Unrecht an die Anfänge von WordPress, als man nur Titel, Content und Bilder eingeben konnte. Die Darstellung hing vom Theme ab, das man gewählt hatte und das beliebig getauscht werden konnte. Mit dem Einsatz von Page Buildern ist die strikte Trennung von Daten und Darstellung verloren gegangen. Mit dem Headless-Ansatz kehrt sie wieder zurück. Er ist vor allem dann interessant, wenn man dieselben Daten an mehreren Stellen in unterschiedlicher Darstellung einsetzen möchte.

Vorteile:
  • WordPress kann als reiner Daten-Hub eingesetzt werden.

  • Feste Templates, die mit Daten befüllt werden, sind möglich.

  • Headless WordPress Seiten sind ausgesprochen schnell und performant.

  • Das CMS kann ggf. einfach ausgetauscht werden.

Weitere Infos zu Headless WordPress gibt’s hier: https://www.smashingmagazine.com/2018/10/headless-wordpress-decoupled/

Statische Seiten

Natürlich könnte man auch komplett statische Seiten ausliefern, deren Inhalte nicht von Redakteuren oder Editoren bearbeitet werden können. Es gibt Szenarien, für die ein solches Setup Sinn macht. Sie gehören aber eher nicht zu den Anwendungen, für die üblicherweise WordPress eingesetzt wird.


Entscheidungsmatrix - 
Welche Lösung passt für mich?

1. 
Kostenloses oder günstiges Pre-Built Theme mit integriertem Page Builder

  • Ich habe keine Zeit, mein Qualitätsanspruch ist niedrig.

  • Ich habe viel Zeit, aber wenig Budget.

  • Ich habe kein Budget und mein Qualitätsanspruch ist niedrig.

  • Ich benötige nur gelegentlich Support, ein punktuell eingesetzter Freelancer reicht dafür aus. Ich habe kein Problem damit, wenn zeitweise etwas nicht funktioniert.

  • Ich habe Layout- und Design-Kenntnisse sowie die Zeit mich mit dem Page Builder auseinanderzusetzen (oder kenne ihn schon), um die Seiten hochwertig zu gestalten.

  • Ich habe keine Design-Kenntnisse und nutze nur die Standard-Layouts, auch wenn diese nicht so schön und individuell sind.

2. 
Hochwertiges Pre-Built Theme mit integriertem Page Builder

  • Ich habe keine Zeit, aber mein Qualitätsanspruch ist hoch.

  • Ich bin bereit etwas mehr Geld für Lizenzen auszugeben.

  • Ich benötige nur gelegentlich Support, bin bereit dafür zu zahlen und kann ggf. auch länger auf Rückmeldung warten.

  • Ich habe Layout- und Design-Kenntnisse sowie die Zeit mich mit dem Page Builder auseinanderzusetzen (oder kenne ihn schon), um die Seiten hochwertig zu gestalten.

  • Ich habe keine Design-Kenntnisse und nutze nur die Standard-Layouts, aber die Seiten sollen möglichst hochwertig aussehen.

3.
Custom Theme mit Custom Fields + WordPress Agentur

  • Ich habe Budget und Zeit. Mein Qualitätsanspruch ist hoch.

  • Ich habe ganz individuelle Anforderungen bei Layout, Design und Funktionalität.

  • Ich benötige ein komplexes Layout, an dem der Redakteur/Editor nichts verändern, sondern nur Texte und evtl. Bilder austauschen kann.

  • Ich benötige ein Layout und Design, das an meinen Content angepasst ist und diesen unterstützt – nicht umgekehrt.

  • Ich lege viel Wert auf schnellen und zuverlässigen Support.

  • Ich möchte die Seite kontinuierlich ausbauen und zusätzliche Features ergänzen.

  • Ich möchte eine Website, die 100 Punkte bei Google Audits erreicht.

4. 
Custom Theme mit Page Builder (Elementor oder Gutenberg Editor + Stackable-Erweiterung) + WordPress Agentur

  • Ich habe Budget und Zeit. Mein Qualitätsanspruch ist hoch.

  • Ich habe ganz individuelle Anforderungen bei Layout, Design und Funktionalität.

  • Ich benötige ein Layout, das voll flexibel ist, damit man alle Seiten ganz individuell aus einzelnen Bausteinen zusammenbauen kann.

  • Ich benötige ein Layout und Design, das an meinen Content angepasst ist und diesen unterstützt – nicht umgekehrt.

  • Ich lege viel Wert auf schnellen und zuverlässigen Support.

  • Ich möchte die Seite kontinuierlich ausbauen und zusätzliche Features ergänzen.

  • Ich möchte eine Website, die 100 Punkte bei Google Audits erreicht.

5. 
Headless WordPress + Vue.js Website + WordPress Agentur

  • Ich habe Budget und Zeit. Mein Qualitätsanspruch ist hoch.

  • Ich habe ganz individuelle Anforderungen bei Layout, Design und Funktionalität.

  • Ich benötige ein komplexes Layout, an dem der Redakteur/Editor nichts verändern, sondern nur Texte und evtl. Bilder austauschen kann.

  • Ich benötige ein Layout und Design, das an meinen Content angepasst ist und diesen unterstützt – nicht umgekehrt.

  • Ich lege viel Wert auf schnellen und zuverlässigen Support.

  • Ich möchte die Seite kontinuierlich ausbauen und zusätzliche Features ergänzen.

  • Ich möchte eine Website, die 100 Punkte bei Google Audits erreicht.

  • Ich möchte mich nicht langfristig auf WordPress festlegen und das Frontend bei einem Systemwechsel weiterverwenden können.

Ansprechpartner Martin Kirmaier coma AG

Wir freuen uns auf ein WordPress-Projekt mit Ihnen

Sprechen Sie mit mir über Ihre Herausforderungen und Ziele – in einem unverbindlichen Erstgespräch. Gemeinsam finden wir Lösungen, die begeistern.

Martin Kirmaier Vorstand, coma AG martin.kirmaier@coma.de