Internetkurse Köln

Schauen Sie hier öfter mal vorbei? Dann ist Ihnen wahrscheinlich aufgefallen, dass Internetkurse Köln irgendwie anders aussieht als zuvor. Grund dafür ist das Redesign mit Gutenberg Theme Zakra. Ich hatte mich an dem guten alten Radiate Theme, das wie Zakra aus dem Haus Themegrill stammt, einfach sattgesehen. Ein neuer Look musste her. Dabei sollte es auf jeden Fall einer sein, der sich ganz im WordPress-Sinne auch wieder austauschen lässt. Trennung von Form und Inhalt, you know? Also begab ich mich schon vor Monaten auf die Suche nach einem für meine Vorstellungen passenden Gutenberg Theme. Das Ergebnis liegt nun vor.

Warum Redesign mit Gutenberg Theme?

Ich kann es nur noch einmal wiederholen und werde auch nicht müde, dies immer wieder zu tun: Trennung von Form und Inhalt. Denn das bedeutet, dass es jederzeit möglich ist, ein Theme auszutauschen, ohne dabei den Content zu verlieren.

Ja, sicher, es braucht auch hier ein paar Handgriffe. Selbst wenn Sie das eine Standardtheme gegen ein anderes austauschen, kann es gut sein, dass das neue Theme Ihr primäres Menü nicht sofort als solches erkennt. Oder Sie müssen Ihre Widgets neu zuordnen. Und natürlich müssen Sie Ihre eigenen Templates für das neue Theme neu erstellen. Aber das ist alles Kinderkram im Vergleich dazu, wenn Sie ganz bei Null wieder starten müssen, weil das alte Theme seinen eigenen Page Builder genutzt hat. Denn dessen Shortcodes versteht dann kein anderes Theme.

Gutenberg gehört die Zukunft

Nun gibt es aber seit rund einem halben Jahr Gutenberg.¹ In seinen Anfängen nur als Ersatz für den alten TinyMCE Editor (heutzutage: Classic Editor) angesetzt, entwickelt sich Gutenberg selbst immer mehr zu einer Art Page Builder. Das soll wohl auch weiter fortgeschrieben werden. Die Unterstützung für den alten TinyMCE ist jedenfalls begrenzt.

Das sind keine guten Nachrichten für all jene, die einen anderen Page Builder im Einsatz haben. Sofern deren Entwickler sich (noch) keine Gedanken gemacht haben, wie es weitergehen soll, wenn es keinen Classic Editor mehr gibt, könnte spätestens dann ein Relaunch angesagt sein. Der wäre dann nämlich nötig, weil Gutenberg die Shortcodes des Page Builders nicht versteht, Sie also auch Ihre Inhalte neu erstellen müssen.

Dem TinyMCE werden allerdings nicht nur Nutzer von Page Builder Themes nachtrauern. Bei Gutenberg ist wahrlich (noch) nicht alles Gold, was glänzt. Zum Beispiel ist Gutenberg mal noch so gar nicht barrierefrei. Für Sehbehinderte ist Gutenberg jedenfalls viel zu grenzenlos. Und selbst für uns durchschnittlich Sehende ist die Arbeit mit verschachtelten Blöcken nicht immer ein Quell der Freude.² Dennoch war für mich seit den frühen Erfahrungen mit dem Gutenberg Plugin (das es übrigens immer noch gibt) bereits klar: Hier entsteht die Zukunft von WordPress. Grund genug, kurz über lang auf Gutenberg zu setzen.

Welches Gutenberg Theme soll es sein?

In meinen Augen braucht es für ein Redesign mit Gutenberg Theme vor allem erst einmal etwas sehr Schlichtes. Wobei schlicht bedeutet, dass es Nutzern den Rahmen für ihre eigenen Ideen bietet. Dafür sollte es für alle Gutenberg Blöcke mit ihren Klassen passende Definitionen mitbringen. Ein paar Theme-Optionen im Rahmen des Customizers wären auch nicht schlecht. Wesentlich für mich ist vor allem aber auch der Aspekt des Leichtgewichtigen. Mit anderen Worten: Für das Redesign mit Gutenberg Theme braucht es so viel Funktion wie nötig und so wenig wie möglich.

Nach diversen Tests, die in den letzten Wochen und Monaten durchgeführt habe, habe ich mich schließlich für das freie WordPress Theme Zakra entschieden. Denn das entspricht, solange man nicht auf die dumme Idee kommt, den Demo-Content zu installieren, so ziemlich genau den genannten Ansprüchen.

Interessante Features des Zakra Themes

• WordPress Theme Zakra bietet die Wahl zwischen Boxed und Wide Layout.
• Dabei kann man unterschiedlichen Seitenarten und jeder Seite / jedem Beitrag individuell ein Layout zuordnen. Insgesamt gibt es fünf Layouts, zwei davon mit Sidebar rechts oder links.
• Dies ist vor allem in Hinblick auf die variable Nutzung von Sidebars interessant. So kann zum Beispiel eine einzelne Seite sehr wohl über eine Sidebar verfügen, wenngleich Seiten generell keine Sidebar haben sollen.
• Und apropos Sidebar: Widget Areas gibt es reichlich.
• Zudem bietet das Zakra Theme unterschiedliche Header- und Footer-Styles.
• In Sachen Schriftarten bietet das Theme die Wahl, ob Google Fonts genutzt werden sollen oder nicht.
• Schließlich ist es auf Basis von underscores.me entwickelt, das als Starter-Theme von der WordPress Mutter Automattic unterstützt wird und grundlegende Programmierstandards nutzt.

Warum Sidebar – und wenn ja wie viele?

Über die Bedeutsamkeit von Sidebars kann man sicherlich streiten. Schauen Sie überhaupt noch in Richtung Sidebar? Twenty Seventeen hatte bereits auf die Sidebar für Seiten verzichtet, gab nur noch für Beiträge und Archive eine aus. Das aktuelle Standardtheme Twenty Nineteen bietet hingegen schon gar keine mehr an. Für die Arbeit mit Gutenberg Blöcken ist so eine Sidebar auf jeden Fall eher hinderlich.

Hinderlich ist die Sidebar für Gutenblöcke schon ein allein, weil sie das Arbeiten mit der Klasse alignfull quasi unmöglich macht. alignfull bedeutet, dass das so definierte Element die komplette zur Verfügung stehende Breite nutzt. Das soll eigentlich die Fensterbreite sein. Wenn vor dem Fensterende aber eine Sidebar die Breite begrenzt, ist dort Ende Banane. Ein Theme, das sich noch nicht auf Gutenberg eingelassen hat und über eine Sidebar verfügt, zeigt den Inhalt dann trotzdem an. So gut es eben geht.

Das Beispiel zeigt das Problem. Zwar kann auch Radiate sehr wohl die Komponenten darstellen. Der gewünschte Effekt der fensterfüllenden Breite des Cover-Blocks im Gegensatz zu der weiten (alignwide) Darstellung der Überschrift und des Spaltenblocks bleibt jedoch aus.

Cover-Block statt Headerbild

Zuletzt hatte ich für diese Website auf Headerbilder gänzlich verzichtet. Grund dafür war vor allem, dass die vorhandenen Bilder nicht über ein Format verfügten, das sich in einen Container von sagen wir 1500 x 500 Pixeln einpassen wollte. Und wenn man dann beim Orginalformat bleibt, entsteht unweigerlich ein wahrlich formatfüllender Header. Der bedeutet aber, dass man immer weit scrollen muss, um zum Content gelangen. Davon bin ich nicht der größte Fan. Auch wenn es im Einzelfall hübsch sein kann.

Ich aber nutze nun Cover-Blöcke statt Headerbilder – und dies auch nur auf genau drei Seiten. Die Bilder habe ich zuvor bearbeitet, damit sie der gewünschten Größe von 1500 x 500 Pixeln entsprechen. Schön an Cover-Blöcken ist zudem, dass sie neuerdings über den Fokuspunkt verfügen. Der sorgt dafür, dass sich ein Bild, dessen wesentliche Aussage sich zum Beispiel im rechten Drittel des Bildes befindet, so definieren lässt, dass dieser Bereich auf Mobilgeräten auch zu sehen ist. So etwas lässt sich zwar auch für Headerbilder definieren, erfordert dann aber gute CSS-Kenntnisse.

Gutenberg und das Panel »Erweitert«

Zusätzliches CSS für Gutenblöcke

Man lernt ja nie aus. Bislang dachte ich, die Möglichkeit, jedem Gutenblock über das Panel Erweitert eine zusätzliche CSS-Klasse zuordnen zu können, wäre nur für eigene Klassen gedacht. Bei meiner Arbeit ist mir dann irgendwann aufgefallen, dass sich hier natürlich auch grundlegende, im Theme hinterlegte Klassen anwenden lassen. So zum Beispiel die Klassen alignwide und alignfull.

Meine Startseite arbeitet nun mit allen drei Breiten:

• der in den Theme-Optionen gewählten Container-Breite
• der weiten Breite (alignwide), die sich bei Theme Zakra berechnet aus 100% + 14vw bei einem linken Außenabstand von -7vw. Dabei steht vw für Viewport Width, also die Browserfenster Breite.
• der vollen Breite (alignfull).

Nun verfügt aber nicht jeder Gutenblock über die Möglichkeit des alignwide / alignfull. So zum Beispiel auch nicht der Überschriftblock. Will man eine Überschrift nun aber genauso die weite Breite zuordnen, dann reicht es, als zusätzliches CSS alignwide einzutragen. Dieses Vorgehen funktioniert auch bei anderen Gutenberg Themes, so zum Bespiel bei Twenty Nineteen. Die Ausgabe mag anders aussehen, weil das Theme es anders definiert, aber die Zuordnung der Klasse zu dem Überschriften-Element funktioniert.

HTML-Anker

Im selben Panel, in dem sich das zusätzliche CSS hinterlegen lässt, findet sich auch die Möglichkeit des HTML-Ankers. Damit ist es viel leichter als früher mit dem Classic Editor, Sprunglinks innerhalb einer Seite zu nutzen. Also Links, die nicht auf eine andere Seite verweisen, sondern auf ein Element, also zum Beispiel eine Überschrift, auf derselben Seite.

Das Vorgehen ist denkbar einfach: Der Block, der Ziel des Sprunglinks sein soll, bekommt einen eindeutigen Namen, den man als HTML-Anker hinterlegt. Zum Beispiel ziel01. Der Link, der zu diesem Ziel führen soll, heißt dann einfach #ziel01.

Redesign mit Gutenberg Theme und Demo-Content?

Der gute Eindruck ändert sich gewaltig, wenn man den für Zakra zur Verfügung gestellten Demo-Content installiert. Allein aus Gründen, mir einen Eindruck zu verschaffen, habe ich zum ersten Mal überhaupt zu einem Theme Demo-Content installiert. Gefallen hat mir das, was dabei passiert ist, aber überhaupt nicht.

Besonders für Einsteiger wirkt das Ganze sicherlich sehr attraktiv: Mit einem Klick sieht die Website plötzlich tatsächlich so aus, wie das Vorschaubild es verspricht. Darüber hatte ich kürzlich erst gebloggt: Wie sich die WordPress Startseite gestalten lässt.

Das mag aber auch nur auf den ersten Blick für Einsteiger hilfreich erscheinen. Denn es sind gerade Einsteiger, die sich wahrscheinlich der Konsequenzen gar nicht bewusst sind. So ist es mir ergangen, wie dem Nutzer, der sich im WordPress Forum beschwert hat:

• Auch meine Testinstallation hieß plötzlich Zakra.
• Ich hatte Plugins, die ich nicht haben wollte.
• Meine Startseite war plötzlich meine Blogseite,
• die Content zeigte, den ich nicht wollte.

Demo-Content nicht für Redesign geeignet

Die Antwort von Zakra besagt, dass das Ganze ja nun nicht für bestehende WordPress Websites gedacht sei, sondern für frische, leere Installationen. Nutzer können diese dann modifizieren. Aber auch dann bleibt mindestens mal fraglich, was die Umbenennung des Site Title soll.

Der Test sorgte nun dafür, dass meine Testumgebung tatsächlich so aussah wie das Zakra Main Demo. Aber bei allem wäre ich gerne noch mehr vorgewarnt gewesen, was dabei alles installiert wird. Nett wäre, wenn es vorher eine Abfrage gäbe: Planst du einen Online-Shop und willst du dafür Woocommerce installieren? Hast du vor, mit dem Page Builder Elementor zu arbeiten? Ich wollte keins von beidem, hatte es nun aber installiert.

Nach dem Test mit dem Demo-Content aufräumen

Das alles hinterher wieder loszuwerden, braucht weit mehr Kenntnis, als es mit einem Klick einfach zu installieren. Einen Reset Button habe ich jedenfalls nicht gefunden. Also heißt es, selbst zu deaktivieren und zu löschen, was sich deaktivieren und löschen lässt.

Wocommerce räumt nämlich zum Beispiel hinter sich nicht besonders auf. Zig Tabellen in der Datenbank und auch Verzeichnisse im Uploads-Ordner, die man nach dem Deaktivieren und Löschen des Plugins noch manuell löschen muss. Ähnliches gilt für den Elementor. Darüber hinaus noch Beiträge, die man manuell löschen muss. Und auch all die Bilder, die sich nun in der Mediathek befinden und dort eigentlich nichts zu suchen haben.

Deshalb kann ich nur raten: Wenn schon Redesign dieser Tage, dann Redesign mit Gutenberg Theme – und dies bitte schön ohne Demo-Content!

---

Anmerkungen

(1) Wer noch so gar keine Idee von Gutenberg hat, kann ja mal bei der Gutenberg Fibel vorbeischauen. Übersichtlich zeigt und erklärt Jessica Lyschik dort das Arbeiten mit den unterschiedlichen Gutenblöcken. (back)

(2) Was aber mal wirklich ein Quell der Freude ist, ist die wunderbar leichte Auszeichnung von Code. Gut, das mag nur für Menschen wie mich interessant sein. Aber Sie glauben nicht, wie sehr mich der TinyMCE in solchen Fragen manchmal an den Rand der Verzweiflung getrieben hat. Und jetzt mit Gutenberg? Ein Klick! Das treibt mir fast Pipi in die Augen… (back)

---

Beitragsbilder: Britta Kretschmer