Einerseits werden viele Dinge immer einfacher, und andererseits dann wieder doch nicht. Wer eine WordPress-Website selbst erstellen will, der stößt auf Begriffe wie Theme, Child Theme, Vorlagen, Page Builder und Gutenberg. Sie kennen sich eh aus und wissen genau, was Sie für Ihre Website benötigen? Wir gratulieren herzlich. Für alle anderen gibt es diesen WordPress Leitfaden.

Was ist WordPress?

WordPress wurde erst einmal als Blog-System entwickelt. Man sollte ohne jegliche technische Kenntnisse tagebuch-artige Inhalte ins Netz stellen können. Später kamen dann weitere, für die Erstellung von Websites hilfreiche Fähigkeiten hinzu, sodass man WordPress längst nicht mehr als Blog-System ab tun kann.

Im Kern stellt WordPress eine Art Werkzeugkasten dar. Entwickler (Programmierer/innen) können sich daran bedienen, um Themes und Plugins zu programmieren, die eine Website nicht nur gut aussehen lassen (die Aufgabe von Themes), sondern auch um viele interessante Funktionen (die Aufgabe von Plugins) erweitern.

Ohne ein Theme würde WordPress keine Inhalte zeigen. Na gut, stimmt so nicht ganz. Denn in Zukunft kann WordPress sogar die Ausgabe von Inhalten am Kühlschrank-Display, auf digitalen Werbeplakaten oder sonstigen Geräten unterstützen. Aber lassen wir das Stichwort Headless CMS beiseite, und reden nur über WordPress als System zur Erstellung von Websites, wie es sich 2022 darstellt.

Was tut WordPress nun genau

WordPress unterstützt einerseits Redakteur/innen dabei, Inhalte in die Datenbank zu schreiben, die im Hintergrund arbeitet, und andererseits bei Aufruf einer Seite der Website die entsprechenden Inhalte aus der Datenbank auszulesen und zu zeigen. Das betrifft neben den Inhalten von Seiten und Beiträgen auch die Menüs und die Inhalte von Fußzeilen und Seitenleisten.

Es ist aber nicht Aufgabe von WordPress, sich um das Aussehen der Website zu kümmern. Dazu braucht es ein Theme. Lesen Sie bitte weiter im WordPress Leitfaden.

WordPress installieren

Um es klar zu machen- wir reden in diesem WordPress Leitfaden von der frei verfügbaren Software WordPress, die auf der Website wordpress.org beherbergt wird. Wir beziehen uns nicht auf die Plattform wordpress.com, die in den USA daheim ist.

Was ist der Unterschied?

Zur WordPress Website – Der Ablauf

So können Sie rasch eine WordPress Website bei Ihrem Hosting Provider anlegen.

1. Sie rufen die Bestellseite des Hosting Providers auf, und suchen nach einer Produktbezeichnung wie Webhosting
2. Sie geben bei der Bestellung Ihre gewünschte Domain an.
3. Sie werden nach Abschluß der Bestellung eine Begrüßungsmail erhalten, darin befinden sich die Zugangsdaten zu Ihrem Kundenbereich beim Provider.
4. Sie melden sich am Kundenbereich an.
5. Sie suchen nach »Software Installation« oder gleichlautenden Menüpunkten.
6. Sie wählen die Software WordPress aus (die finden Sie häufig in der Kategorie »Blog«), und folgen der Anleitung am Bildschirm.
7. Nach einigen Minuten können Sie sich bei Ihrer WordPress Website anmelden. Die Anmeldeseite finden Sie meist unter ihredomain/wp-admin/.

Noch ein Hinweis: die Preisunterschiede bei Website-Hosting Produkten ergeben sich aus den Ressourcen, die Ihrer Website zur Verfügung gestellt werden. Unserer Erfahrung nach sind diese erst ausreichend, wenn der monatliche Preis für das Hosting ab etwa € 7,- aufwärts beträgt.

Wozu braucht es ein Theme?

In der Frühzeit von WordPress war man sehr stark auf Themes angewiesen, um ein bestimmtes Aussehen der Website zu erreichen. Das Theme hatte damals einfach alles bestimmt: Farben, Schriftarten, Layout. Eine Änderung solcher Basis-Eigenschaften war nicht möglich, alles war im Theme fix verdrahtet. Später ermöglichten manche Themes dann zumindest eine halbwegs interessante Gestaltung der Startseite von Websites. Auch das war aber fix verdrahtet, Abweichungen von der Vorgabe waren kaum möglich.

Nach wie vor können Sie unter einer Vielzahl von kostenlosen Themes auswählen. Die meisten Menschen versuchen ihr optimales Theme anhand der Bilder und der Farbkombination auszuwählen, wie es in der Theme-Vorschau gezeigt wird. Das sollten aber keine Auswahlkriterien sein. Viel wesentlicher ist die Flexibilität des Themes. Mehr dazu weiter unten.

Theme-Einstellungen und Vorlagen

Bei heutigen Themes finden Sie eine Vielzahl von Einstellungsmöglichkeiten für Layout, Schriftarten, Farben und mehr. So kann dasselbe Theme ganz unterschiedlich aussehende Websites ermöglichen. In diesem Sinne wählt man ein Theme besser nicht nach Screenshots aus, die mithilfe von Fotos einen bestimmten Verwendungszweck suggerieren (Website für Rechtsanwälte, Swimming Pool Hersteller, oder Rauchfangkehrer). Das sagt leider nichts über die Qualität eines Themes aus.

Manche Themes bieten auch eigene Vorlagen (Templates, Starter-Designs) an. Mit deren Hilfe kann man schnell eine gut abgestimmte Kombination von Farben, Schriftarten und Layout in die eigenen Theme-Einstellungen importieren. Mit Vorlagen beschäftigen wir uns weiter unten.

Bei Plattformen wie ThemeForest lassen sich unzählige Premium-Themes beschaffen, die man lizensieren muss. Viele dieser Themes verkaufen sich über schöne Fotos, die in den Screenshots und Demo-Vorlagen enthalten sind, oder über den Einsatz imposanter Slideshows. Demo-Bilder müssen Sie sowieso ersetzen, denn häufig dürfen diese in der eigenen Website gar nicht genutzt werden.

Wir stellen zunehmend fest, das solche Themes eher schlecht zu konfigurieren sind. Bereits kleine Änderungen – etwa wegen der nötigen Übersetzung auf Deutsch – zerstören das Layout der Demo-Vorlage. Andere Inhalte müssen in extra vorbereitete Felder eingetragen werden, die Sei erst finden müssen. Die flexiblen Möglichkeiten der Page Builder, die aber sowieso installiert werden müssen, werden dafür nicht genutzt.

Themes mit Lock-In Effekt?

Manche Themes liefern allerdings auch weitergehende Funktionalitäten mit. Das können Slideshows sein, Veranstaltungskalender, »Custom Post Types« (eigene Beitragsformen) für die Präsentation eines Portfolios, und mehr. Ein Sonderfall sind Themes, die sogar ihren eigenen Page Builder (s.u.) mitbringen. Vertreter dieser Variante sind die Premium Themes Divi, Avada oder Enfold, das sind durchaus eierlegende Wollmilchsauen.

Die genannten Themes Divi, Avada und Enfold wirken auf erstem Blick interessant, da sie ja alles aus einer Hand anbieten: Design und Layout der gesamten Website, Inhaltsgestaltung mit eigenem Page Builder. Das hat ganz klar seine Vorteile. Aber auch seine Nachteile. Zum einen sind Sie ganz auf die mitgelieferten Eigenschaften angewiesen. Zum anderen sind diese theme-internen Page Builder häufig so umgesetzt, dass das Theme später nicht ohne weitgehendem Verlust der Inhalte gegen ein anderes ersetzt werden kann.

Der Grund: die Umsetzung der Page Builder Bausteine erfolgt mit Hilfe von sogenannten Shortcodes. Das sind WordPress-Spezialbefehle der Form [shortcode attr="beispiel"], die in diesem Fall von den Theme-Entwicklern selbst eingebracht wurden, und ohne aktivem Theme nicht korrekt interpretiert und ausgeführt werden.

Wird ein solches Theme deaktiviert, weil es gegen ein anderes ersetzt wurde, dann erscheint im Inhaltsbereich so etwas wie (im Beispiel von Avada):

[fusion_tabs design="classic" layout="horizontal" justified="no" hide_on_mobile="small-visibility,medium-visibility,large-visibility" class="search_type_tabs"] [fusion_tab title="By Event"] IHR INHALT [/fusion_tab] [fusion_tab title="By Participant"] IHR INHALT [/fusion_tab] [/fusion_tabs]

Grund: WordPress weiß nun nicht mehr, was es mit diesen Spezialanweisungen tun soll. Also werden die jetzt einfach ausgegeben. Es müssen daher bei einem Themewechsel die Inhalte vollständig neu angelegt werden. Programmierte »Übersetzungshilfen« gibt es derzeit noch kaum, bzw. funktionieren diese nicht ausreichend gut.

Wir empfehlen daher die Nutzung eines Page Builders, der für die Umsetzung der gewünschten Darstellung unsichtbare HTML-Kommentare anstelle von Shortcodes benutzt. Sollten Sie eines Tages den Page Builder wechseln wollen, dann werden Ihre Inhalte weiterhin zwar erst einmal ohne Styling, aber auch ohne seltsamen Programmiercode dargestellt. Ein Vertreter solcher freundlichen Page Builder ist Elementor (s.u.).

Manche Themes, wie etwa Jupiter X, lassen zwar die Nutzung eines fremden Page Builder Plugins zu, bieten aber eigene sogenannte Custom Post Types. Damit können in diesem Theme zusätzliche Inhaltsarten, wie beispielsweise Portfolios oder Veranstaltungen, auch ohne entsprechende Plugins erstellt werden. Das klingt erst einmal gut. Aber wer die theme-eigenen Inhaltsarten nutzt, hat sich damit dem Theme zur Gänze ausgeliefert.

Solche Themes werden daher als Themes mit Lock-In Effekt bezeichnet, denn ein Wechsel zu einem anderen Themes bedeutet, dass diese Inhalte neu erstellt werden müssen. Die im Theme eingebauten Custom Post Types sind dann ja nicht mehr vorhanden.

The lock-in problem is when a user is forced to continue using a theme because their data would be lost to them if they switched to another theme. 

Justin Thadlock

Die »allmächtigen« Themes sind daher mit Vorsicht zu genießen. Man kann rasch mit Hilfe von importierbaren Vorlagen ein sinnvolles Ergebnis erzielen, und das Arbeiten geht mehr oder weniger leicht von der Hand. Die Schattenseite ist, dass man von einem solchen Theme später nur mehr mit enorm viel Aufwand loskommt. Es kommt der Neuerrichtung der Website gleich.

Solche Themes erkennen Sie daran, dass gerne auch diese Funktionen zusätzlich angeboten werden:

• Post Types (z.B. Veranstaltungen, Portfolios)
• Taxonomien (z.B. Veranstaltungskategorien, Portfolio-Kategorien, etc.)
• Custom Fields (z.B. für MP3-Downloads, Adressen, etc.)
• Shortcodes (um das Aussehen des Inhalts zu beinflussen, also interne Page Builder)
• SEO Einstellungen (um die Website suchmaschinenfreundlich zu gestalten)
• Kontaktformulare
• Google Analytics Tracking Code und andere Tracking Codes einbauen
• Slideshows durch Fremd-Plugins (sehr häufig »Revolution Slider«)

Wir raten dagegen dazu, für die aufgezählten Funktionalitäten vom Theme unabhängige Plugins einzusetzen. Diese können im Fall des Falles gegen andere getauscht werden, ohne dass nun deswegen gleich die komplette Website inhaltlich und design-mäßig erneuert werden muss.

Mit dem Theme mitgelieferte Slideshows oder Page Builder von Dritten lassen sich übrigens nicht so einfach selbst aktualisieren, sondern man muss auf die Aktualisierung des Themes warten. Das kann im Fall von aufgetauchten Sicherheitslücken unangenehm sein, weil diese Sicherheitslücke u.U. nicht rasch genug behoben wird.

Was soll ein Theme anbieten?

Wir empfehlen, sich ein Theme auszusuchen, das sich nur auf Grundeinstellungen beschränkt, dafür aber eine vielfältige Gestaltungsmöglichkeit zulässt:

• Layout
• Farben
• Typographie (Fließtext, Überschriften)
• Generelle Gestaltung von Seiten
• Generelle Gestaltung von Beiträgen
• Generelle Gestaltung von Kategorien/Archiven/Beitragsseiten/404-Seite
• Gestaltung von Kopf- und Fußbereichen

Darüber hinaus sollte ein Theme kein zusätzliches Angebot machen. Denn die konkreten Inhalte werden mit Gutenberg (s.u.) oder Page Buildern (s.u.) gestaltet. Das gibt Ihnen die Möglichkeit, das Theme einmal zu wechseln, ohne deswegen alle Inhalte neu erstellen und gestalten zu müssen.

Vertreter solcher Themes sind u.a.

• Blocksy
• Kadence
• GeneratePress
• OceanWP
• Astra

Widgets

WordPress hatte schon nahezu von Beginn an mit sogenannten Widgets aufgewartet. Widgets sind Inhaltsbausteine, die auf vordefinierten Widget-Areas (Plätze), wie Seitenleiste oder Fußzeile, untergebracht werden können, sodass sie auf der ganzen Website sichtbar sind. Häufig genutzte Widgets sind etwa Text-, Bild-, Navigationsmenü oder Suchformular-Widgets. Widgets kann sich bildlich vorstellen als eine Art Plastikbausteine (denken Sie an die Marke mit den 4 Buchstaben E, G, L, O), die man auf die Grundplatte, die Widget-Area, stecken kann.

Aktuell stellt WordPress um auf die Nutzung von Gutenberg-Blöcken (s.u.) auch für die Widget-Areas. In Block-Themes wie Twenty Twenty-Two gibt es gar keine Widget-Areas mehr, an deren Stelle treten Template-Teile.

Aber die Bedeutung von Widgets hat sowieso stark nachgelassen. Website-übergreifende Seitenleisten werden in modernen Websites kaum mehr verwendet (am ehesten noch in Blog-Bereichen), und die Gestaltung der Fußzeile erfolgt meist in den jeweiligen Theme-Einstellungen oder unter Nutzung der Fähigkeiten guter Page Builder (s.u.).

Hooks, Actions und Filter

Gestatten Sie einen kurzen technischen Ausflug im WordPress Leitfaden, denn diese drei Begriffe könnten für Sie ebenfalls einmal von Bedeutung sein.

 WordPress hat für die erzeugte HTML-Struktur (jede Webseite ist ein HTML-Dokument) und unabhängig vom eingesetzten Theme einige Haken vorbereitet, auf englisch Hooks. Auf diesen Haken können nun Themes, Plugins oder auch Sie selbst etwa mit Hilfe eines Plugins wie Code Snippets die Ausführung von eigenen Funktionen »aufhängen«. Dadurch werden solche eigenen Funktionen an diesen Stellen ausgeführt.

Die Hooks haben Namen wie:

• wp_head
• wp_footer
• the_content
• comment_form_after

Daran lässt sich schon ganz gut erkennen, wo der Haken angeboten wird.

Es stehen zwei Arten von Funktionen zur Verfügung:

• Actions sind solche Funktionen, die etwas zusätzlich darstellen. Das können beispielsweise Buttons sein, Text-Hinweise, Werbebanner oder ähnliches.
• Filter verändern bestehenden Inhalt bevor er angezeigt wird, sodass dessen (sichtbare) Ausgabe verändert wird. Beispielsweise möchten Sie die Länge des Textauszugs Ihrer Beiträge auf 25 Zeichen beschränken.

Mit Hilfe von Hooks und daran anbringbaren Actions und Filter kann nun eine WordPress Website nahezu unbegrenzt vollkommen verändert werden, unabhängig von den Möglichkeiten, die Ihr Theme anbietet. Manche Themes bringen sogar zusätzliche Hooks ins Spiel, so dass Sie beispielsweise eine Produktdetail-Seite in Ihrem Onlinshop weitgehend verändern können. Nahezu alle Plugins benötigen die Standard-Hooks von WordPress unbedingt, weil die ja entweder zusätzliche Inhalte ausgeben, oder Änderungen an bestehenden Inhalten vornehmen.

Einfache Code-Beispiele finden Sie etwa bei diesem Artikel auf addictedtocode.de

Ende des Technik-Ausflugs.

Was ist ein Child Theme, wann braucht man eines?

In manchen Fällen wird man mit der Frage konfrontiert, ob man ein Child Theme installieren möchte. Das passiert beim Importieren von kompletten Demo-Vorlagen (s.u.), oder wenn man im Internet nach Lösungsvorschlägen für theme-technische Fragen sucht.

Child Themes wurden von WordPress schon vor vielen Jahren ins Spiel gebracht, um Änderungen an Theme-Dateien vornehmen zu können, ohne dass diese Änderungen bei einer Aktualisierung des Themes wieder verloren gehen. Bei Child Themes werden nur Kopien einzelner Dateien des Original-Themes in das Verzeichnis des Child Themes abgelegt. Alle anderen Dateien sucht WordPress im Verzeichnis des Original-, also Eltern-Themes. Das hat Vor- und Nachteile.

Vorteil

Ihre eigener Code für Theme-Dateien bleibt erhalten, auch wenn alle Eltern-Theme Dateien aktualisiert werden.

Nachteil

Die Kopien der Theme-Dateien, die man ändern musste, werden ja den Aktualisierungen des Original-Themes vorenthalten. Das führt aber im Lauf der Zeit dazu, dass sich die (eingefrorenen) Versionen der kopierten Dateien zunehmend von den aktuellen Theme-Versionen unterscheiden, und es daher später einmal zu mysteriösen Fehlfunktionen der Website kommen kann.

Wann benötigt man ein Child Theme?

Wenn Sie keine Änderungen am Theme vornehmen müssen, die nicht auch auf andere Art durchführbar ist, dann verzichten Sie auf die Nutzung eines Child Themes. Änderungen, für die Ihr Theme keine Umsetzung anbietet, können Sie auch mit Plugins, wie Code Snippets erreichen. Im Fall eines Online-Shops stehen für eine Umgestaltung von Produkt-Seiten, der Kassa-Seite oder der E-Mail Vorlagen spezielle Plugins zur Verfügung.

Eigenen CSS Code tragen Sie auch besser unter Nutzung des Plugins Code Snippets ein. Denn wer dafür die von WordPress vorgesehen Umsetzung in den WordPress Einstellungen (Design / Customizer / Zusätzliches CSS) benutzt, füllt damit die WordPress Datenbank mit unnötig vielen Zwischenspeicherungen an, das mussten wir mittlerweile feststellen.

Wenn sich Ihre Änderungswünsche mit solchen Plugins nicht umsetzen lassen, oder wenn Sie wissen, dass Sie ausschließlich nur in der Theme Datei functions.php etwas tun müssen (die gefundene Anleitung aus dem Internet sagt Ihnen das), dann erst ziehen Sie dafür ein Child Theme in Betracht. Entweder liefert Ihr Theme ein solches Child Theme bereits mit, oder Sie können es mit einem Plugin wie dem Child Theme Configurator selbst erstellen.

Was tun Page Builder?

Vielleicht können Sie sich noch an die frühen Websites erinnern: Textwüsten, in denen nur ab und zu ein Bild für etwas Abwechslung gesorgt hatte. Mehrspaltigkeit war nur unter Aufbietung von Gewalt zu erreichen. Naja, okay, es wurden dafür Tabellen missbraucht. Schlimm genug. Tabellen sollte wirklich nicht für Layout-Aufgaben eingesetzt werden, sondern nur zur Darstellung von Daten.

Also hatten sich Entwickler Möglichkeiten einfallen lassen, wie man wenigstens die Homepage einer WordPress Website, das ist die Startseite (Frontpage), interessant aufbereiten konnte. Das Ergebnis waren Themes mit fix vorgebenen Arten die Startseite mit einem besonderem Layout auszustatten.

Findige Köpfe hatten sich in Folge eine Möglichkeit ausgedacht, wie eine solche Layout-Gestaltung für alle Seiten machbar wäre, und nicht nur für die Startseite. Die Gattung der Page Builder war geboren.

So arbeitet man mit Page Buildern

Das Arbeitsprinzip von Page Buildern ist üblicherweise immer dasselbe, nur die Bezeichnungen für deren Bestandteile sind oft unterschiedlich.

Um Inhalt in Ihre Seite einbringen zu können, benötigen Sie dafür erst einmal einen Container (andere Bezeichnungen: Zeile, Abschnitt). Darin befindet sich mindestens eine Spalte (oder auch mehrere), und erst in einer Spalte befinden sich Inhaltselemente, wie Absätze, Überschriften, Bilder oder Formulare.

Das folgende Bild zeigt Ihnen die Arbeit im Page Builder Elementor. Der gezeigte Abschnitt (blaue Umrandung) beinhaltet zwei Spalten (gepunktete Umrandung der gerade aktiven linken Spalte). In der linken Spalte befinden sich Überschrift und Text, in der rechten Spalte sitzt ein Bild.

Der Vorteil dabei: Sie können für nahezu alle diese Bestandteile deren Aussehen bestimmen, und diese Bausteine später auch verschieben, kopieren, duplizieren oder als eigene Vorlage speichern.

Sie legen Rahmen und Hintergründe fest, bestimmen die Breite von Abschnitten und Spalten, und stellen diverse Abstände nach innen sowie nach außen ein. Bei manchen Page Buildern können Sie auch Animationen aktivieren, etwa ein Einfliegen des Objekts von der Seite beim Scrollen.

So besteht der gesamte Inhalt einer Seite aus einer Abfolge an Containern mit den jeweiligen Inhalten darin, damit Sie die Seite auch wirklich abwechslungsreich gestalten können.

Damit steigt zwar der Aufwand für die redaktionelle Arbeit, aber Sie können sich durch den Import von Vorlagen entweder ganzer Seiten oder von Teilen helfen lassen.

Einige Page Builder

Das sind einige bekannte und weithin genutzte Page Builder zusätzlich den o.a. theme-eigenen Page Buildern:

• Elementor
• Site Origin Page Builder
• Oxygen
• Thrive Architect
• Brizy
• Brix

Nahezu alle Page Builder werden als Freemium Modell zur kostenlosen Nutzung angeboten. Wer weitergehende Funktionen benötigt, greift zur jeweiligen Premium Version, und genießt dann auch Support durch die Theme-Hersteller. Das empfehlen wir, da die Nutzung eines solchen Page Builders eine Kernfunktion Ihrers digitalen Angebots darstellt, und daher friktionsfrei funktionieren sollte. Fragen können schnell auftauchen, und sollen zeitnahe und profund beantwortet werden.

Wo viel Licht ist, ist starker Schatten.

Johann Wolfgang von Goethe: Götz von Berlichingen

Hat die Nutzung von Page Buildern auch Nachteile? Durchaus. Zum einen kämpfen die Entwickler Teams mit Performance Problemen ihrer Page Builder. Das bessert sich gerade, reicht aber noch nicht aus. Zum anderen ist die Zahl der Entwickler bei Unternehmen immer begrenzt im Vergleich zur Mitarbeit an WordPress durch die große Open Source Gemeinde. Und das bedeutet, dass manche nötigen Entwicklungen auf sich warten lassen. Und zuletzt wäre es fein, wenn Ihr Wunsch Page Builder nicht mit Short Codes arbeiten würde, damit Sie bei einem Wechsel keinen Buchstabensalat in Ihrer Website entfernen müssen.

Was ist Gutenberg?

In Reaktion auf die wunderbare Welt der Page Builder hatten die WordPress Entwickler sich ihren eigenen Weg ausgedacht, wie sich Inhalte interessant aufbereiten lassen. Das Ergebnis ist der aktuelle WordPress Block-Editor. Er wird vielfach als »Gutenberg« bezeichnt, weil WordPress den Block-Editor erst mal nur als Plugin Namens Gutenberg angeboten hatte. Wer heute WordPress installiert, sollte aber das Plugin Gutenberg nicht auch noch zusätzlich installieren, außer man möchte die Entwicklung des Editors mitverfolgen. Weil man es aber so gewohnt ist, spreche ich weiterhin von Gutenberg, meine damit aber den internen WordPress Editor, und nicht das Plugin.

Gutenberg geht einen etwas anderen Weg als Page Builder. Alle inhaltlichen Elemente sind  Blöcke, daher die Bezeichnung Block-Editor. Eine Dreiteilung Abschnitt/Spalte/Inhaltselement wie bei Page Buildern gibt es nicht. Jeder Block kümmert sich gleichermaßen um den Inhalt und um dessen Gestaltung.

Beispiele für Blöcke sind:

• Absatz
• Überschrift
• Bild
• Galerie
• Video
• etc.

Die Gestaltung der meisten Blöcke betrifft die Breite, Hintergrundfarben, Anordnungen und dergleichen. Der allgemeine Vorteil der Blöcke ist, dass ihr HTML-Code relativ schlank gehalten ist, und damit die Performance einer Website auch ohne Nutzung von Cache-Plugins gut sein kann.

Viele WordPress-Nutzer/innen arbeiten ungern mit Blöcken, da die Gestaltungsmöglichkeit im Vergleich zu Page Buildern derzeit (Stand Mai 2023) immer noch deutlich zu wünschen übrig lässt.

Ein anderer Nachteil ist die vergleichsweise geringere Benutzungsfreundlichkeit, wie es von Teilnehmer/innen unserer Kurse manchmal geäußert wird. Was für eine Person nicht benutzungsfreundlich wirkt, mag für eine andere Person dagegen großartig sein. Und so erscheint Gutenberg für die redaktionelle Arbeit einfach zu nutzen, aber wenn es um die Aufbereitung der Inhalte geht, dann können die Blöcke mit ihren aktuell vorhandenen Eigenschaften noch sehr »dünn« wirken, vor allem im Bereich des Resposive Design.

Einige Gutenberg Block Plugins

Plugin Entwickler füllen diese Lücke, indem sie zusätzliche Blöcke mit umfassender Gestaltungsmöglichkeit anbieten. Solche Gutenberg Block Plugins sind etwa (Auswahl):

• Greenshift – animation and page builder blocks (das setzen wir hier ein)
  • Pro-Version (Affiliate-Link)
• Kadence Blocks
• Otter – Page Builder Blocks & Extensions
• GenerateBlocks
• Advanced Gutenberg
• Stackable – Page Builder Gutenberg Blocks
• Qubely

Die Gestaltung unserer eigenen Webseite erfolgte zuerst auf Basis von Stackable in der Premium Version, später sind wir umgestiegen zu Greenshift.

Block-Themes

Ende Jänner 2022 ist WordPress 5.9 erschienen, und hat das erste Block-Theme namens Twenty Twenty-Two mitgebracht. Einstellungen für Layout und Design werden bei diesem Theme nur mehr über Gutenberg-Blöcke gemacht, das Prinzip nennt sich Full Site-Editing.

Bei Block-Themes werden im Site-Editor mit Hilfe von Template-Teilen (wie Header und Footer) Templates (»Vorlagen«) für Seiten, Beiträge, Archive, Kategorien, etc., zusammengefügt. Die Block-Themes bringen fertige Templates und Template-Teile mit, es lassen sich aber auch zusätzlich eigene individuelle Template-Teile und Templates erstellen für Seiteb, Beiträge, Archive, Such-Seiten, 404-Seiten, etc.

Es können Layout, Farben und Typographie der Website im Stil-Editor festgelegt werden. Und Block-Themes liefern auch neue inhaltliche Vorlagen (»Pattern«) mit. Damit kann der Inhalt von Seiten so zusammengestellt werden, wie man es schon länger bei Anbietern wie Square Space oder wix kennengelernt hat.

Innerhalb der Template-Teile setzt man Gutenberg-Blöcke ein, die für die Ausgabe auch von Website-übergreifenden Inhalten (Logo, Website-Titel, Navigation, etc.) sorgen. In einem Artikel auf ewerkzeug.info finden Sie dazu Überblick und Anleitung.

Gibt es auch Vorlagen für WordPress?

Die Kombination von Theme, PageBuilder und/oder Gutenberg ist erstmal nur ein Werkzeug, mit dem Sie arbeiten können. Üblicherweise beginnen Sie also bei Null, und Sie können damit nahezu jede Website, die Sie kennen, nachbauen.

Wenn Sie aber mit vorbereiteten Materialien arbeiten möchten, dann können Sie das auch tun. Denn Sie können komplette Vorlagen-Websites übernehmen, die Sie dann anpassen. Solche Vorlagen werden von den meisten Theme-, Gutenberg Block- und Page Builder Entwicklern angeboten. Eine Vorlage benötigt daher immer das spendierende Theme oder zugehörigen Page Builder oder Gutenberg Plugin.

Beim Theme Blocksy nennt sich das etwa »Starter Sites«. Sie müssen nur angeben, ob Sie eine Starter Site für Gutenberg/Stackable oder für Elementor importieren möchten, denn das Theme Blocksy selbst bringt ja kein Werkzeug für die Gestaltung von Inhalten mit.

Elementor und Stackable bieten Ihnen je nach Lizensierung ebenfalls Vorlagen zum Import an. Dabei handelt es sich um fertig konfigurierte Kombinationen der jeweiligen Bausteine. Das sind entweder Blöcke bei Gutenberg/Stackable oder fertige Kombinationen von Abschnitt/Spalte/Element bei Elementor (dort nennt sich das dann Template, also Vorlage auf Deutsch). Elementor bietet mit der Elementor Kits Library auch den Import ganzer Websites an.

Auch für den WordPress internen Block-Editor gibt es seit August 2021 Vorlagen. Eine Übersicht über die Block-Vorlagen (»Pattern«) erhalten Sie im Verzeichnis bei wordpress.org. Hier ein Beispiel:

Wireframes

Und die Teams von Stackable und Elementor bieten neben deren Vorlagen (»UI Kits« bzw. »Block Designs«) nun auch Wireframes an, darunter kann man so etwas wie abgespeckte Vorlagen verstehen. Hier geht es nicht mehr um Demo-Bilder und Farben, die ablenken würden, sondern die Anordnung von Elementen steht im Vordergrund.

---

Hat die Nutzung von Vorlagen auch Nachteile? Leider ja.

Zum einen müssen Sie selbst erst entdecken, wie Sie die Inhalte und vor allem die Demo-Bilder der Vorlagen identifizieren und durch Ihre eigenen Inhalte ersetzen können. Das ist oft gar nicht so einfach.

Zum anderen ist die Wahrscheinlichkeit hoch, dass Sie nicht alle Links der Demo-Inhalte finden, die Besucher/innen Ihrer Website aber zielsicher solche Links bald nutzen werden, und dadurch irgendwo landen. Vielleicht auf Ihrer 404-Datei nicht gefunden-Seite oder sie bleiben auf der Seite mit dem Fake-Link.

Und schließlich kann es passieren, dass Sie beim Import von ganzen Demo-Website-Inhalten nicht genau genug die Fragen am Bildschirm gelesen haben, und versehentlich alle Ihre eigenen, bereits bestehenden Inhalte verlieren. Wir empfehlen daher (wie in so vielen anderen Fällen) vorher ein Komplettsicherung der Website durchzuführen.

Wenn Sie dagegen einzelne Wireframes als Vorlage für Ihre Inhalte wählen, werden Sie solche Fallen vermeiden.

Wie geht es mit WordPress weiter?

WordPress will (derzeit noch) zwei unterschiedlichen Ansprüchen genügen:

• Die redaktionelle Arbeit an einer WordPress-Website soll einfach sein
• Verschiedene Gestaltungs- und Funktionalitätsansprüche sollen auch ohne millionenschweres Budget umsetzbar sein.

Das führt in der Realität dazu, dass die Arbeit in einer frischen Installation von WordPress erst einmal leicht von der Hand geht, aber seitens der Besitzer/innen rasch hohe Ansprüche an die Website gestellt werden.

»Ich brauche eine kleine Website, nicht mehr als 8 bis 10 Seiten Umfang. Da soll man nur die Kurse sehen, die ich anbiete. Die Kurse soll man buchen können. Die Kunden sollen Rechnungen erhalten und Erinnerungsmails. Gebuchte Termine sollen in der Kundenverwaltungssoftware eingetragen werden. Achja, und es soll natürlich dreisprachig ausgeführt werden. Und meine Kunden können in einem eigenen Bereich Materialien downloaden und Videos ansehen. Später braucht es dann eine Schnittstelle zu einm Buchhaltungs- und Faktura-System.
Aber sonst eine einfache Website, bitte, mit nur ganz wenigen Seiten.«

Der unbekannte Auftraggeber

Machbar ist das alles, aber die Befriedigung solcher Ansprüche führt zu einer komplexen Verflechtung von WordPress-Zusatzsoftware, deren Bedienung nicht mehr ganz trivial bleiben kann.

Der Gutenberg Block-Editor wurde ein Kernbestandteil von WordPress und wird das auch bleiben. Die flexiblen Gutenberg Blöcke können bereits jetzt auf Widget-Plätze in klassischen Themes gesetzt werden, die bisherigen Widgets werden wohl bald nur mehr in Form von Gutenberg Blöcken existieren.

Gutenberg greift darüber hinaus nach den Sternen. Naja, nicht ganz, aber immerhin nach Kopf- und Fußzeile, sowie nach der Gestaltung von Seiten generell, und das nennt sich Full-Site-Editing (FSE). Damit wird von den Themes in Hinkunft immer weniger an Unterstützung bei der Website-Gestaltung benötigt. Denn die Arbeit an Design und Layout erfolgt bei den neuen Block-Themes wie Twenty Twenty-Two nur mehr mithilfe der Einstellungen von Gutenberg-Blöcken.

Aber auch Page Builder mischen sich in die Gestaltung von Kopf- und Fußzeile ein. Daher gibt es besonders für die gemeinsame Nutzung mit Elementor das Theme Hello Elementor, das gar keine Einstellungen und Besonderheiten anbietet. Denn der Page Builder Elementor übernimmt in diesem Fall auch die Gestaltung aller anderen Teile einer Website. Das Theme braucht es nur mehr, weil es technisch von WordPress einfach benötigt wird. Zu tun hat es aber nichts mehr.

WordPress Leitfaden – Fazit

Gibt es eine allgemein gültige und immer passende Vorgangsweise bei der Erstellung von Websites mit WordPress? Natürlich nicht. Folgende Kombinationen und Varianten haben wir als erste grobe Leitlinie zusammengetragen.

Anforderung	Umsetzung
Sie wollen rasch eine herzeigbare Website haben, ohne sich mit der Qual der Wahl bei Plugins auseinandersetzen zu müssen. Ein Wechsel zu einem anderen Theme in Zukunft ist unwahrscheinlich. Die Gestaltung der Website muss keine anspruchsvollen und komplexen Vorgaben erfüllen.	Nutzen Sie ein mächtiges Theme mit eingebautem Page Builder, und importieren Sie eine für Sie passende Vorlage als Basis Ihrer Arbeit. Alternativ arbeiten Sie mit einem Block-Theme wie Twenty Twenty-Two, und setzen nur Gutenberg-Blöcke ein.
Sie wollen bei Ihrer Website Ihre eigenen Corporate Design Anforderungen umsetzen können, die Gestaltung von Inhalten kann eher einfach bleiben.	Nutzen Sie ein Theme, das sich nur um Design und Layout kümmert. Für die Inhalte setzen Sie den WordPress internen Block Editor Gutenberg ein.
Sie brauchen für Ihre Website umfassende Gestaltungsmöglichkeiten. Wie Sie diese erhalten, ist nebensächlich, aber Ihre Ideen sollen umzusetzen sein.	Nutzen Sie ein Theme, das sich nur um Design und Layout kümmert. Für die Inhalte setzen Sie einen mächtigen Page Builder ein.
Sie brauchen für Ihre Website umfassende Gestaltungsmöglichkeiten, wollen aber möglichst nahe am WordPress-Block Editor Konzept bleiben.	Nutzen Sie ein Theme, das sich nur um Design und Layout kümmert. Für Erstellung und Gestaltung von Inhalten setzen Sie ein Gutenberg Block Plugin ein.
Sie möchten mit Vorlagen arbeiten, wollen sich technisch um nichts kümmern und kommen mit Basic-Funktionen für eine Website aus.	Nutzen Sie einen Anbieter wie wix oder Square Space, oder wordpress.com Hinweis: Achten Sie auf die laufenden Kosten bei den Anbietern. Wenn Sie dann doch einmal die Website von wix oder Square Space wegsiedeln wollen, müssen Sie in jedem Fall mit einer neuen Website beginnen. Sehen Sie auch nach, ob Sie Domain-Mailadressen (@ihre-domain) einfach einrichten können.

Haben Sie Fragen oder Anmerkungen zu unserem WordPress Leitfaden? Nutzen Sie bitte die Kommentarfunktion.

Können wir Sie bei Ihrem Projekt unterstützen? Treten Sie mit uns in Kontakt.

Sie wollen mit WordPress raschestmöglich umgehen können? Melden Sie sich zum Praxiskurs WordPress Basic an.