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?

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

Nachteile

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:


Nachteile:

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:


Nachteile:


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:

Nachteile:


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:

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.