Was bisher geschah

Bei WordPress (WP) war es in der Vergangenheit üblich, sämtliche gestalterischen Anforderungen über ein Theme umzusetzen, von denen es tausende kostenlos sowohl über das offizielle WP-Theme-Repository, als auch über kostenpflichtige Plattformen gab und nach wie vor gibt. Um selber ein Theme zu entwickeln, bedurfte es früher ausreichender Kenntnisse über PHP, HTML, CSS und je nach Anforderungen noch über weitere Programmiersprachen.

Die meisten Endanwender waren damit überfordert, daher wurden im Laufe der Zeit Plugins und Themes in der WP-Community entwickelt, die es den Endanwendern ermöglicht haben, über intuitive Benutzeroberflächen eigene Anpassungen vorzunehmen. Diese Entwicklung ging so weit, dass ganze Themes mithilfe solcher Erweiterungen ohne Programmierkenntnisse direkt im Website-Dashboard angefertigt werden konnten.

Das Problem dabei bestand darin, dass sich diese Erweiterungen wie eine komplett neue Anwendungsschicht über WordPress legten, indem mit der Installation und Aktivierung dieser häufig eigene Benutzeroberflächen und Skripte auf der WP-Site implementiert wurden. Damit konnten zwar viele Elemente auf der Website im Frontend ohne Programmierkenntnisse erstellt und angepasst werden. Nur leider hatte dies in den meisten Fällen negative Auswirkungen auf die Ladezeit und den Ressourcen-Verbrauch zur Folge, mit entsprechenden Konsequenzen für die Website-Besucher und die Auffindbarkeit bei den gängigen Suchmaschinen wie Google, Bing und Co.

Prominente Beispiele derart Ressourcen- hungriger Erweiterungen sind „Divi“, „Elementor“ oder „Visual Composer“ bzw. „WP Bakery“ und ebenfalls die Produkte von „Thrive Themes“ aufseiten der Plugin-Hersteller, sowie „Avada“, „Enfold“ oder „ThemeX“ aufseiten der Themes.

Daher hat das federführende WP-Konsortium (hinter welchem maßgeblich das US-Unternehmen „automattic“ steht) beschlossen, eine eigene Lösung für die Endanwender zu entwickeln, welche so stark im WordPress-Core verankert ist, dass individuelle Gestaltungsmöglichkeiten für die Endanwender gleichzeitig möglichst einfach und ohne Programmierkenntnisse genutzt werden können, und gleichzeitig die Performance der Website nicht beeinträchtigt wird.

Im ersten Schritt wurde im Jahr 2018 der „Gutenberg Editor“ veröffentlicht und im WP-Core integriert. Der Kern dieser Entwicklung besteht darin, sämtliche Elemente mithilfe sogenannter „Blöcke“ zu erstellen und anzupassen, daher wird der Gutenberg-Editor auch „Block-Editor“ genannt.

Damit ist es seither möglich, den Content-Bereich, also die Inhalte auf einer WP-Site, mithilfe von Blöcken individuell zu gestalten. Weiterhin steht der „Classic Editor“ zur Verfügung, falls die Umstellung auf Gutenberg erst zu einem späteren Zeitpunkt oder auch gar nicht erfolgen soll. Der Content-Bereich umfasst dabei alle Inhalte, die zwischen dem Header, Footer und etwaiger Sidebars einer WP-Site dargestellt werden.

In einer weiteren Phase dieser Entwicklung wird das Blöcke-Konzept auf das gesamte Theme ausgebaut, und damit das sogenannte „Full Site Editing“ oder kurz „FSE“ ermöglicht. Die ersten Themes, die FSE ermöglichen, wurden bereits im Theme-Verzeichnis veröffentlicht und können in Kombination mit dem „Gutenberg Editor“ Plugin genutzt werden. Dieses Plugin enthält immer den letzten Entwicklungsstand der Block-basierten Gestaltungsmöglichkeiten, von denen dann einige erprobte Funktionen in die jeweils nächste offizielle Version von WordPress aufgenommen werden. Daher sollte das offizielle Gutenberg-Plugin auch nicht auf Produktiv-Seiten eingesetzt werden, weil manche Dinge noch nicht gut funktionieren. Das was gut funktioniert, ist ja bereits im aktuellen offiziellen WP-Release enthalten.

Grafik, um die Entwicklungsphasen von WP-Core, dem Gutenberg-Plugin und FSE-Themes anhand eines Zeitstrahls aufzuzeigen

WWW – Warum WordPress Wirrwarr?

Wir beschreiben diese Gegebenheiten aus dem einfachen Grund, weil diese Phasen mit erheblichen Änderungen einhergehen und gleichzeitig der Parallel-Betrieb der früheren Plugins, Themes, und Pagebuilder noch eine Weile möglich sein wird, so der Wille des WP-Konsortiums.

Das klingt zunächst toll, denn „je mehr Möglichkeiten desto besser!“ könnten wir annehmen. Es hat aber enorme Auswirkungen auf die Art und Weise, wie WordPress nach außen hin dargestellt wird. Vor allem kann es die Suche nach der „richtigen“ Dokumentation, Anleitungen, Tipps und Tricks zur Bedienung, Entwicklung und Erweiterung einer WP-Site enorm belasten.

Wenn zum Beispiel jemand versucht, eine schöne Bildergalerie auf seiner WP-Site einzusetzen, bietet WordPress bereits eine einfache Lösung über einen der Standard-Blöcke. Wem dieser nicht reicht, findet im Netz zahlreiche Lösungen, welche wiederum den Einsatz völlig unterschiedlicher Erweiterungen voraussetzen.

Mal basiert die Lösung auf einem sogenannten „Single-Purpose“ Plugin, welches zu nichts anderem als der Erstellung ausgefallener Fotogalerien genutzt werden kann. Mal beschreibt die Lösung bestimmte Verfahren, die nur von bestimmten „schwergewichtigen“ Themes oder Pagebuildern umgesetzt werden können.

Immer häufiger tauchen Anleitungen auf, die auf den Einsatz von Gutenberg-optimierten Block-Bibliotheken setzen, welche im Gegensatz zu den Single-Purpose Plugins noch weitere Blöcke mit sich bringen, um zum Beispiel Info-Boxen, Speisekarten, Diashows und andere gestalterische Entfaltungsmöglichkeiten mit sich bringen.

Wichtige Fragen

Für viele Hersteller von Plugins und Themes, genauso wie für die Website-Entwickler, Designer und Endanwender, stellen sich daher einige Fragen wie zum Beispiel:

  • Wohin führt diese Entwicklung von WordPress?
  • Wie lange können die bisher eingesetzten Themes und Plugins noch genutzt werden?
  • Wie lange werden diese mit Aktualisierungen versorgt, z.B. um Sicherheitslücken zu schließen oder die Kompatibilität mit anderen Plugins zu gewährleisten?
  • Wie lange können noch ältere WP-Sites sicher genutzt werden?
  • Muss ich jetzt mein bisherige System aufgeben und zu Gutenberg wechseln?
  • Wird mein bisheriger Pagebuilder nicht doch noch mit der Gutenberg-Performance aufschließen können?
  • Woher bekomme ich als Laie als auch professioneller Anwender Unterstützung, um die Vielzahl an Möglichkeiten der Website-Entwicklung mit WP zu durchblicken und abzuwägen?

und viele weitere Fragen, die seit der Entscheidung von WordPress, die bisherige Architektur in eine Block-basierte Zukunft zu führen, in der Community auftauchen.

Lösungsansätze

Um es kurz zu machen: Gutenberg ist die Zukunft von WordPress, und es wird im Laufe der Zeit immer einfacher werden, damit zu arbeiten.

Es gibt mittlerweile zahlreiche Lösungen rund um Gutenberg, die sowohl den Einstieg als auch den Umstieg erleichtern.

Einige Anbieter entsprechender Lösungen kommen in Form sogenannter „General Purpose“ Themes, die in Kombination mit den Standard-Blöcken von WordPress bereits ein „Pagebuilder-artiges Erlebnis“ ermöglichen.

Viele dieser Anbieter haben neben dem Theme auch das eine oder andere Plugin in ihrem Arsenal, welche die Funktionen der Standard-Blöcke sinnvoll erweitern und ergänzen.

Diese bekanntesten und in unseren Augen besten Anbieter in dieser Riege sind: GeneratePress, Blocksy, Kadence, Neve und Astra. Diese basieren vorrangig auf der Nutzung des Gutenberg-Block-Editors und des Standard-Customizers von WordPress.

Doch es gibt noch weitere Anbieter, die grundsätzlich eher dem Feld der bisherigen Pagebuilder zuzurechnen sind, die aufgrund ihrer besonderen Ansätze, wie eine WP-Site gebaut werden kann, hier besondere Beachtung finden sollten: Bricks, LiveCanvas und der OxygenBuilder.

Während der OxygenBuilder eine sehr spezielle Rolle einnimmt, indem er nämlich die Theme-Funktion komplett deaktiviert, finden wir vor allem die Ansätze von Bricks und LiveCanvas sehr spannend, weil diese ebenfalls eigene Benutzeroberflächen mit sich bringen, allerdings auf sehr ausgeklügelte Art und Weise mit dem Gutenberg-Editor harmonisieren.

Wir empfehlen, sich auf einer frischen WP-Installation ohne zusätzliche Plugins und mit einem der oben genannten General-Purpose Themes mit dem Gutenberg-Editor vertraut zu machen. Dabei sind vor allem das Blocksy und Kadence Theme sehr benutzerfreundlich und deren Bedienung relativ schnell zu erlernen. Beide Themes bringen auch vorgefertigte Templates mit sich, die den Lern-Effekt beschleunigen können, indem du dir sämtliche Details anschaust und versuchst, diese nachzubauen.

Schau auch mal in der hervorragenden Gutenberg-Fibel vorbei, dort werden dir die einzelnen Möglichkeiten des Block-Editors näher gebracht, was die spätere Hinzunahme weiterer Block-basierter Plugins vereinfacht.

Wem die Möglichkeiten der Standard-Blöcke von WordPress nicht reicht, denen empfehlen wir aus der großen Auswahl vor allem die folgenden Block-Plugins:

Block-Bibliotheken

Hierbei handelt es sich um Plugins, die neben einer Vielzahl zusätzlicher Blöcke auch vorgefertigte Sektionen oder ganze Seiten-Templates mit sich bringen. Einige davon enthalten zwar wieder den Ballast, den wir von einigen Pagebuildern kennen, daher nennen wir hier nur welche mit minimaler Belastung der Ladezeiten:

  • Getwid (kostenlos)
  • Kadence Blocks (kostenlose und kostenpflichtige Versionen erhältlich)
  • Otter (falls du Lottie-Animationen einsetzen willst)
  • Stackable (kostenlos und kostenpflichtig)

Block-Verbesserer

Zu dieser Gattung zählen wir Plugins, die sowohl einzelne als auch im Zusammenspiel mit anderen Blöcken sinnvoll eingesetzt werden. Wenn z.B. ein Block mit einem Overlay-Farb-Effekt oder auch besonderen Abständen versehen werden soll, kann das mit dem Container-Block von GenerateBlocks sehr einfach umgesetzt werden. Die besten Plugins dieser Kategorie sind:

  • GenerateBlocks
  • Editor Plus

Funktioniert das auch mit komplexen Websites?

Auch hier zunächst eine schnelle Antwort: Ja, das funktioniert sogar sehr gut!

Wir erklären eben, was uns zu dieser Annahme qualifiziert:

Seit 2016 haben wir eine Vielzahl der Möglichkeiten evaluiert, um sowohl einfache als auch komplexe Anforderungen auf einer WP-Site umzusetzen, zum Beispiel

  • Automatisierte und DSGVO-, Mobile- und Budget-freundliche Marketing- & Sales-Funnel
  • Affiliate-Websites für Marketer und Vertriebler
  • Einfache Portfolio-Websites für Anwälte, Fotografen oder Wirtshäuser
  • Event-Systeme für DJs, Künstler oder Veranstalter
  • Kurs-Systeme für Coaches, Mentoren oder Trainer
  • Mitglieder-Systeme für Clubs, Firmen oder Vereine
  • Online-Shops für Händler, Hersteller oder Lieferanten

als auch Kombinationen von Teil-Funktionen der oben genannten Einsatzbereiche, entweder auf einer einzelnen WP-Site implementiert, oder auch innerhalb eines Multi-Domain-Netzwerkes.

Dabei kamen viele der anfangs erwähnten Pagebuilder zum Einsatz, vor allem aus dem Grund, weil unsere Kunden die Website anschließend eigenständig weiterentwickeln und pflegen wollten und es den Gutenberg-Editor entweder noch nicht gab, oder dieser noch nicht reif genug war.

Teilweise haben wir solch komplexe WP-Sites vollständig für unsere Kunden entwickelt, häufig in direkter Zusammenarbeit und klar definierter Arbeitsteilung, und manchmal nur in unterstützender Funktion, zum Beispiel im Rahmen einer Schulung.

Seit 2020 haben wir damit begonnen, bestehende Websites ausschließlich auf Gutenberg-basierende Lösungen zu „portieren“ und haben uns stets über bessere Ladezeiten, zufriedenere Besucher und Kunden, sowie letztendlich mehr Umsatz für unsere Kunden freuen dürfen. Wobei letzteres vor allem dann zum Tragen kam, wenn es uns erlaubt war, nicht nur die Website zu modernisieren, sondern auch über das Online-Marketing Neukunden für unsere Kunden zu gewinnen.

Die Herangehensweise an dieser Stelle im Detail zu erklären, würde den Rahmen und auch die Intention dieses Artikels übersteigen und wird zu einem späteren Zeitpunkt genauer erläutert. Doch wer sich genug Zeit nimmt und folgende Schritte berücksichtigt, schafft die Umstellung vermutlich auch aus eigener Kraft:

  1. Frisches WP auf Sub-Domain oder Unterverzeichnis installieren und abhärten (DEV-Site)
  2. Styleguide aus der bisherigen Website extrahieren – z.B. mithilfe der genialen Hoverify-Browser-Extension, und in einem Dokument notieren
  3. Seiten-Struktur (Seiten, Posts, Custom Post Types, Menus, Widgets etc.) und Template-Struktur aus der bisherigen Website nachbilden, z.B. mithilfe einer Mindmap oder dem genialen Wireframe-Tool octopus.do (low-fi) oder claritee.io (high-fi)
  4. User Journey und Funktionen von der bisherigen Site erfassen und prüfen, welche Plugins diese Funktionen ermöglichen und entweder bereits Gutenberg-kompatibel sind, oder entsprechende Alternativen suchen
  5. Ggf. müssen Design-Assets wie Logo oder Bilder nachgebaut oder optimiert werden. Das betrifft vor allem vektorbasierte Elemente, also Icons oder Illustrationen, die besser als SVG-Datei eingebettet werden sollten. Eventuell sollten auch Fotos und Videos optimiert werden.

Nach dieser Bestandsaufnahme geht es im nächsten Schritt darum, die neue Seite zu entwickeln

  1. Strukturen und Styles auf der neuen Seite umsetzen, teils per Custumizer, teil durch Blöcke, oder auch mithilfe des genialen CSSHero Plugins
  2. Dummy-Content einsetzen, z.B. mithilfe des lustigen FakerPress Plugins
  3. Für die Funktionen benötigte Plugins installieren und konfigurieren
  4. Testen, testen, testen bis alles funktioniert
  5. Alte Website archivieren und DEV-Site auf die Haupt-Domain umziehen

Dies ist nur eine grobe Darstellung der einzelnen Schritte und je nach Komplexität und Umfang einer Website oder eines Vorhaben, kann sowohl der Ablauf als auch die Anzahl der Unter- und Teilbereiche variieren.

Zudem sollte auch überlegt werden, ob die User-Journey der bisherigen Seite nicht auch vereinfacht werden kann. Oder auch, ob es bisher schon guten Traffic gibt, der wirksam und sinnvoll auf die entsprechenden Ziele auf der neuen Website umgeleitet werden muss, um schon bestehende, gute Rankings für diese Seiten bei Google zu erhalten.

Schlusswort und Fazit

Wie du siehst, hat WordPress einen Weg eingeschlagen, der es uns je nach Blickwinkel leichter oder schwerer macht, die eigene Website künftig und weiterhin mit WP zu betreiben. Vielen fehlt schlichtweg die Geduld, sich mit den Möglichkeiten und Methoden von WP auseinanderzusetzen, sich dem Wirrwarr zu stellen. Doch zum Glück gibt es aufgrund der riesigen Verbreitung von WP Unmengen an Hilfsmaterial und Dienstleister in unterschiedlicher Qualität, häufig sogar kostenlos, wie z.B. über die WordPress Meetup-Gruppen in verschiedenen Gemeinden weltweit, sowie den zahlreichen Online-Communities.

Wer sich darüber hinaus aber gar nicht mit den Möglichkeiten auseinandersetzen will und zudem von dem Wartungs-Aufwand einer WP-Site zurückschreckt, denen helfen heutzutage Webseiten-Baukästen wie Jimdo, Squarespace und Webflow, die aufgrund ihrer einfachen Bedienung und der Anzahl ansprechender Vorlagen und überschaubaren kosten boomen.

Was hältst denn du der aktuellen Entwicklung von WordPress?
Was sind momentan deine größten Herausforderungen bei der Umsetzung oder Erweiterung deiner WordPress-Site?

Hinterlasse uns deine Meinung gerne über einen Kommentar oder schreib eine Nachricht!

Schreibe einen Kommentar

ORDER mCloud 01

Mit Klick auf den "Jetzt mCloud bestellen" Button bestätige ich meine Kenntnisnahme der AGB und stimme ihnen zu. Ich bestätige mit diesem Klick, dass ich die Widerrufsbelehrung zur Kenntnis genommen habe.

MailPoet Umstellung
mPress Support 15 Min

mPress Support - Bestellformular

Damit wir die Prüfung durchführen können, laden Sie bitte unser "mPress-Admin" Plugin herunter, installieren und aktivieren es auf Ihrer WP-Site. Anschließend bestätigen Sie bitte die Aktivierung über die Mail mit der Auftragsbestätigung.

Wir berechnen den mPress-Support mit 25 € zzgl. 19% MwSt. je Viertelstunde bei minutengenauer Abrechnung. Es gelten unsere AGB & Datenschutzbestimmungen.

ORDER mHost Litespeed Registrierung
  • Zurück
  • Weiter

Hier Verfügbarkeit prüfen (neues Fenster):

Die zusätzlichen Dienste sind nicht in dieser Bestellung enthalten. Ein Kundenbetreuer wird sich bei dir bei melden für weitere Details.

Prüfe mit unserem Domain-Checker, ob deine Wunschdomain verfügbar ist:

[ajaxdomainchecker width=“70%“ button=Check]