Seit mitt­ler­weile fünf Jah­ren betreibe ich mei­nen Blog gütselgarten.de. Die tech­ni­sche Ent­wick­lung von Word­Press ver­folge ich aller­dings schon län­ger. Von Anfang an habe ich bei mei­nem Blog auf ein block-basier­tes, käuf­lich erwor­be­nes Theme gesetzt und bewusst auf Page­buil­der ver­zich­tet. In den letz­ten Wochen habe ich die Umstel­lung auf Full Site Editing für mei­nen Blog geschafft.

Alle nach­fol­gen­den Bil­der kön­nen durch Ankli­cken ver­grö­ßert wer­den, sodass die beschrie­be­nen Ein­zel­hei­ten bes­ser nach­voll­zieh­bar sind. Ent­hält Wer­bung durch Mar­ken­nen­nung ohne Gegen­leis­tung.

Spä­tes­tens seit der Ver­sion 6.0 von Word­Press ist das sogen­n­annte Full SIte Editing (FSE) aus­ge­reift. Mit FSE lässt sich das gesamte Lay­out dei­ner Web­site – also Hea­der, Foo­ter, Side­bar und natür­lich Inhalte – direkt im Block-Edi­tor gestal­ten. Viele Dinge, die vor­her über das Theme defi­niert waren, kön­nen jetzt über die soge­nann­ten Tem­pla­tes selbst gestal­tet wer­den. Dabei ver­wende ich das Wor­press-Stan­dard-Theme Twenty Twenty-Five, das kos­ten­los erhält­lich ist.

Testumgebung einrichten

Zunächst habe ich eine Kopie mei­ner Seite im Backend des Hos­ters ange­legt, um dort die Ver­än­de­run­gen aus­zu­pro­bie­ren. Im Menü des Word­Press-Backend gelangt man über Design > Web­site-Edi­tor in den Design-Bereich, indem die Gestal­tung der Web­site erfolgt.

Schriften und Farben festlegen

Zunächst sollte man sich hier mit dem Punkt Stile beschäf­ti­gen. Im Unter­punkt Far­ben defi­niert man eine eigene Farb­pa­lette. Mit die­ser Farb­pa­lette kann man unter dem Unter­punkt Typo­gra­fie Schrif­ten, Schrift­grö­ßen und Text­far­ben für Über­schrif­ten, Text etc. fest­le­gen.

Neben dem Punkt Schrif­ten in der zwei­ten Spalte gibt es ein Sym­bol mit zwei Schie­be­reg­lern. Dort öff­net sich durch Ankli­cken die Schrift­ver­wal­tung. Von hier aus kann ich auf Google Fonts zugrei­fen und die Fonts mei­ner Wahl her­un­ter­la­den. Die aus­ge­wähl­ten Schrift­ar­ten wer­den DSGVO-kon­form lokal ein­ge­bun­den – ganz ohne FTP oder manu­el­les CSS. Wer das schon mal mit einem klas­si­schen Theme ver­sucht hat, wird diese Neue­rung lie­ben.

Eigene Vorlagen für Header, Footer & Sidebar

Dann kann man sich den Punkt Vor­la­gen anse­hen. Dort habe ich eigene Vor­la­gen für Hea­der, Foo­ter und Sei­ten­leiste ange­legt. Mit den ent­spre­chen­den Block­ele­men­ten konnte ich das bis­he­rige Design bis auf kleine Ände­run­gen nach­bil­den. Diese Vor­la­gen las­sen sich dann in die ent­spre­chen­den Tem­pla­tes für Sei­ten und Bei­träge ein­fü­gen. Dabei wäre es auch mög­lich unter­schied­li­che Sei­ten­leis­ten z.B. für Sei­ten und Bei­träge zu gestal­ten.

Templates für Seiten und Beiträge

Wer sich bis hier­hin durch­ge­ar­bei­tet hat, wird auch den nächs­ten Schritt hin­be­kom­men. Für die Sei­ten habe ich ein ein­heit­li­ches Tem­p­late mit Hea­der, Foo­ter und Con­tent-Bereich erstellt. Twenty Twenty-Five ist ein ein­spal­ti­ges Theme. Da ich aber auf die Sei­ten­leiste nicht ver­zich­ten wollte, habe ich im Con­tent-Bereich einen zwei­spal­ti­gen Bereich mit dem Block Spal­ten ange­legt (roter Pfeil). Die linke, brei­tere Spalte ver­wende ich für den eigent­li­chen Con­tent, die schma­lere, rechte Spalte für die Sei­ten­leiste.

Auch für Start­seite, Bei­träge und Archiv­sei­ten gibt es eigene Tem­pla­tes – alle auf Basis von Blö­cken. Ein wert­vol­les Werk­zeug beim Auf­bau von Bei­trä­gen, Sei­ten und Tem­pla­tes ist die Lis­ten­an­sicht. Diese kann über das Sym­bol mit den drei waa­ge­rechte Stri­chen akti­viert wer­den (blauer Pfeil). In der Liste fin­det man alle ein­ge­bun­de­nen Blö­cke, kann von hier aus ein­zelne Blö­cke ver­schie­ben, löschen oder neue Blö­cke dazwi­schen schie­ben – eine Funk­tion, die bei man­chen Page­buil­dern längst nicht so kom­for­ta­bel funk­tio­niert.

Plugins – die unvermeidlichen Erweiterungen

Ohne Plug­ins kommt heute keine Word­Press-Seite aus. Obwohl das Thema Twenty Twenty-Five nur Basis­funk­tio­nen zur Ver­fü­gung stellt, ist die Liste mei­ner Plug­ins nicht län­ger gewor­den:

Alle Pug­ins ver­wende ich als kos­ten­lose Basis­ver­sio­nen, sodass weder für das Thema noch für die Plug­ins Kos­ten anfal­len.

Umstellung auf Full Site Editing: Lohnt sich der Aufwand?

Die Umstel­lung war nicht tri­vial und hat Zeit (und manch­mal Ner­ven) gekos­tet. Zum Glück gibt es im Inter­net zahl­rei­che Res­sour­cen, die Hil­fe­stel­lun­gen anbie­ten. Da ich mir nicht alle Ein­zel­hei­ten auf ver­schie­den Sei­ten zusam­men­su­chen wollte, habe ich mir auf der Online-Lear­ning-Platt­form Udemy den Kurs ”Word­press Guten­berg & Full Site Editing” von Andrew Wil­liams gegönnt. Den Kurs kann ich nur emp­feh­len, da er auf alle wich­ti­gen Details ein­geht. Bitte nicht vom Preis abschre­cken las­sen: Auf Udemy gibt es immer wie­der mal Rabatt­ak­tio­nen, die her­vor­ra­gende Kurse für klei­nes Geld anbie­ten. Die Bear­bei­tungs­zeit für den Kurs von sie­ben Stun­den hat sich gelohnt.

Bei mei­nen Recher­chen habe ich fest­ge­stellt, das so man­cher Gar­ten­blog mit einem Thema arbei­tet, das nicht mehr wei­ter­ent­wi­ckelt wird und keine Sicher­heits­up­dates mehr erhält. Nach der Umstel­lung sollte mein Blog in die­ser Hin­sicht erst mal wie­der fit für die nächs­ten Jahre sein. Full Site Editing wird in Zukunft sicher­lich zum Stan­dard für Word­Press-Blogs wer­den.

Erhöhte Zugriffszahlen nach der Umstellung

Nach der Umstel­lung haben sich die Zugriffs­zah­len – gemes­sen mit dem Plugin Sta­tify – im Ver­gleich zu den Vor­mo­na­ten des letz­ten Jah­res mehr als ver­dop­pelt. Woran kann das lie­gen?

Das Thema Twenty Twenty-Five ist ein sehr schlan­kes Thema. Wäh­rend mein bis­he­ri­ges Thema 48 MB Spei­cher­platz brauchte, sind es nach der Umstel­lung nur noch etwa 8 MB. Ich nehme an, dass die Seite dadurch schnel­ler gewor­den ist. Lei­der habe ich es ver­säumt, die alte Seite zu tes­ten. Nach der Umstel­lung auf Full Site Editing sieht es im Page­Speed Insight-Test gut aus.

Ein wei­tere Punkt, der hier eine Rolle spie­len könnte, bezieht sich auf die Bar­rie­re­frei­heit. Twenty Twenty-Five bie­tet hier­für die bes­ten Vor­aus­set­zun­gen. Wenn man auf Schrift­grö­ßen, Kon­trast zwi­schen Schrift und Hin­ter­grund und Bild­be­schrei­bun­gen über ALTERNATIVER TEXT ach­tet, ist es nicht schwer, eine weit­ge­hend bar­rie­re­freie Web­site zu erstel­len. All diese Punkte spie­len offen­sicht­lich beim Google-Ran­king eine zuneh­mende Rolle.

Fazit

Die Umstel­lung auf das neue Theme hat sich gelohnt. Es war sehr span­nend, die neuen Tech­ni­ken aus­zu­pro­bie­ren und in mei­nen Blog zu inte­grie­ren. Inzwi­schen durfte ich eine wei­tere Web­site für die Wol­ken­schie­ber e.V (eine Initia­tive für trau­ernde Kin­der und Jugend­li­che) auf­set­zen. Auch den nächs­ten Relaunch der Web­site unse­res Hos­piz­ver­eins, an der ich seit 2002 mit­ar­beite, wer­den wir in den nächs­ten Wochen in Angriff neh­men.

weitere Informationen

Ein kom­plet­ter Leit­fa­den für Anfän­ger zur voll­stän­di­gen Bear­bei­tung von Word­Press-Sei­ten

Word­Press Guten­berg & Full Site Editing – Udemy Course

Check­liste: 11 Tipps für eine bar­rie­re­freie Web­site

Wol­ken­schie­ber e.V.