Ich habe mein Blog auf ein neues WordPress-Theme umgestellt. Nach vielen Jahren mit dem Theme Apex läuft „Nur ein Blog“ jetzt mit Twenty Twenty-Five, dem Standardtheme von WordPress.
Nicht, weil Apex plötzlich schlecht geworden wäre. Im Gegenteil: Es hat über lange Zeit ziemlich genau das gemacht, was ich von einem Blog-Theme wollte. Es war schlicht, übersichtlich und hat sich nicht wichtiger genommen als die Inhalte.
Aber irgendwann merkt man einem Theme eben doch an, aus welcher WordPress-Generation es stammt.
Ich wollte ein wenig mehr gestalten können, ohne dafür gleich in PHP-Dateien herumzuschreiben oder für jede Kleinigkeit ein zusätzliches Plugin zu installieren. Gleichzeitig sollte mein Blog danach aber nicht aussehen wie eine völlig neue Website. Ich wollte im Grunde dasselbe Blog – nur auf einer moderneren technischen Grundlage und an einigen Stellen besser aufgeräumt.
Nach ein wenig Herumprobieren bin ich bei Twenty Twenty-Five, kurz TT5, gelandet.
Und dann begann eine zweitägige Operation am lebenden Objekt. Nicht, dass ich schon fertig bin. Gerade die Feinarbeiten werden mich noch beschäfigten. Aber ich möchte euch nachfolgend ein wenig Einblick geben, was mich die zwei Tage so beschäftigt hat.
Warum Twenty Twenty-Five?
Twenty Twenty-Five ist ein Block-Theme. Header, Footer, Startseite, Einzelbeiträge, Archive, Suchergebnisse und andere Bereiche bestehen aus Blöcken und können direkt im WordPress-Editor verändert werden.
Das klang interessant.
Und ist es auch.
Der sogenannte Site Editor ist allerdings sehr gewöhnungsbedürftig. Es gibt Templates, Template-Teile, Gruppen, Zeilen, Spalten, Abfragen und darin wieder eigene Vorlagen. Manchmal klickt man auf etwas und kann es bearbeiten. Manchmal ist es gesperrt. Und manchmal stellt man fest, dass man gerade einen Footer bearbeitet hat, den das verwendete Template gar nicht benutzt.
Das ist nicht immer intuitiv.
Dafür kann ich heute Dinge verändern, für die ich früher vermutlich ein Child Theme oder zumindest eigenes CSS gebraucht hätte.
Ohne KI hätte ich das nicht geschafft
An dieser Stelle gehört auch dazu, wie ich den Umbau gemacht habe.
Ich habe dafür intensiv ChatGPT verwendet.
Nicht in dem Sinn, dass ich gesagt hätte: „Mach mir ein neues Blog“, und danach wäre alles fertig gewesen.
Das funktioniert ohnehin nicht.
Ich saß selbst im WordPress-Backend und habe jeden Block verschoben, jede Einstellung geändert und jede gestalterische Entscheidung getroffen. ChatGPT war daneben gewissermaßen mein permanenter Begleiter.
Ich habe Screenshots aus dem WordPress-Editor geschickt und gefragt: Welcher Block ist das? Wo muss ich hinein? Warum ist diese Spalte so schmal? Warum wird mein neuer Footer nicht angezeigt? Wie bekomme ich drei Überschriften auf dieselbe Höhe? Warum erscheinen die Fediverse-Reaktionen zweimal?
Dann ging es Schritt für Schritt weiter.
Das war für mich vermutlich der entscheidende Punkt.
Eine ausführliche Dokumentation über Full Site Editing hätte ich wahrscheinlich nach einiger Zeit entnervt zur Seite gelegt. Tutorials hätten fast immer eine etwas andere WordPress-Version oder eine etwas andere Ausgangslage gezeigt.
Ich konnte stattdessen immer genau bei dem Problem weiterfragen, das gerade vor mir lag.
Und manchmal lag auch ChatGPT falsch. Dann habe ich gezeigt, was tatsächlich passiert, und wir haben einen anderen Weg gesucht. Oder ich wusste aus vorherigen Schritten schon ein wenig mehr und bin selbst drauf gekommen.
So wurde aus dem Ganzen eine Art gemeinsames Herantasten.
Kein Testblog
Vernünftige Menschen hätten vermutlich zuerst eine Testinstallation eingerichtet.
Ich nicht.
Ich habe ein aktuelles Backup gemacht, Apex installiert gelassen und Twenty Twenty-Five direkt auf meinem laufenden Blog aktiviert.
Operation am lebenden Objekt.
Das Risiko war überschaubar. Die Artikel, Kommentare und Seiten verschwinden bei einem Themewechsel ja nicht. Im schlimmsten Fall hätte das Blog eine Zeit lang ziemlich seltsam ausgesehen und ich hätte wieder auf Apex zurückgeschaltet.
Und tatsächlich sah manches zwischendurch etwas seltsam aus.
Aber das gehört dazu. An dieser Stelle einen herzlichen Dank, die mir dazwischen Feedback gaben und mir sogar Screenshots schickten.
Ich bin sicherlich noch nicht fertig. Manches gehört noch geschraubt, geputzt und umgeordnet. Aber ich froh schon so weit gekommen zu sein. Und für den Start am Sonntag Nachmittag bin ich wohl ganz gut weiter gekommen.
Der Header wurde persönlicher
Eine der ersten Fragen war: Was soll eigentlich ganz oben stehen?
Zunächst wollte ich mein bisheriges nureinblog.at-Logo verwenden.
Dann habe ich mich anders entschieden.
Im Header ist jetzt mein Foto zu sehen, daneben:
Nur ein Blog
Das passt für mich besser.
„Nur ein Blog“ ist keine Marke und kein Medienprojekt. Es ist mein persönliches Blog. Also darf dort auch gleich der Mensch sichtbar sein, der darin schreibt.
Das Logo ist deshalb aber nicht verschwunden. Es ist jetzt im Footer zu finden.
Auch die Navigation wurde aufgeräumt.
Oben befinden sich jetzt vor allem jene Dinge, die etwas über mich und das Blog erzählen oder beim Navigieren helfen: „Über mich“, meine „Grundsätze“, meine „Projekte“, das Archiv und RSS.
RSS bleibt dabei ganz bewusst prominent im Hauptmenü.
Man könnte RSS natürlich irgendwo klein in den Footer verbannen oder nur durch ein Symbol darstellen. Ich möchte aber gerade sichtbar machen, dass dieses Blog über diese feine Technik abonnierbar ist.
Das gehört für mich zum offenen Web.
Rechts gibt es außerdem weiterhin eine Suche.
Grundsätze und Projekte
Die Navigation hat jetzt zwei Dropdown-Menüs.
Unter Grundsätze finden sich unter anderem mein Open Blogging Manifest, meine Kreativitätserklärung, die Barrierefreiheitserklärung und meine eigenen Fediverse-Regeln.
Unter Projekte finden sich solche wie barcamper.at und weitere Projekte, die mit meinem Blog verbunden sind.
Impressum, Datenschutz und ähnliche Dinge sind natürlich weiterhin gut im Footer erreichbar. Sie haben nur einen anderen Platz bekommen.
Ein richtiger Footer
Der Footer ist einer der Bereiche, bei denen mir das Block-Theme besonders gut gefällt.
Früher war er eher ein notwendiger Abschluss der Seite.
Jetzt besteht er aus mehreren Spalten.
Links befindet sich das Logo mit einer kurzen Beschreibung des Blogs (an der feile ich noch weiter).
Daneben gibt es Bereiche für Blog, Stöbern und Website.
Dort finden sich beispielsweise „Über mich“, „Grundsätze“, „Projekte“, Archiv, RSS, Microblog, Kontakt, Barrierefreiheit, Datenschutz und Impressum.
Das ist eigentlich eine kleine zweite Navigation, nur mit einer anderen Aufgabe als das Hauptmenü.
Der Header soll übersichtlich bleiben.
Der Footer darf ausführlicher sein.
Die Startseite wurde deutlich umgebaut
Die Startseite. besteht weiterhin aus zwei Spalten.
Links stehen wie bisher die aktuellen Artikel.
Wie bisher nicht mit dem vollständigen Artikeltext, sondern mit Titel, Datum, einem kurzen Auszug und einem Link zum Weiterlesen. Zusätzlich wird angezeigt, ob und wie viele Kommentare es zu einem Artikel gibt.
Das ist kompakter und macht es leichter, mehrere Beiträge zu überblicken.
Rechts befindet sich eine neue Seitenleiste.
Ich wollte dabei nicht einfach meine alte Sidebar nachbauen.
Stattdessen soll dieser Bereich künftig stärker beim Stöbern im Blog helfen.
Dort können beispielsweise die neuesten Kommentare, ausgewählte Themen oder andere kuratierte Inhalte stehen.
Eine große Schlagwortwolke möchte ich dort eher nicht mehr haben.
Bei mehr als 3.500 Artikeln hilft eine riesige Sammlung von Schlagwörtern ohnehin nur bedingt bei der Orientierung.
Ich möchte lieber einige Themen bewusst hervorheben.
Das passt zu meiner schon länger bestehenden Idee, mein Blog stärker zu kuratieren.
Nicht jede Seite braucht eine Sidebar
Bei Einzelartikeln habe ich mich bewusst gegen eine Sidebar entschieden.
Wer einen längeren Artikel liest, soll möglichst wenig Ablenkung daneben haben.
Trotzdem war mir wichtig, dass jemand, der über einen direkten Link, eine Suchmaschine, RSS oder das Fediverse auf einem einzelnen Artikel landet, nicht in einer Sackgasse landet.
Deshalb bleiben unter einem Artikel die Schlagwörter und die Navigation zum vorherigen bzw. nächsten Beitrag.
Später kann ich dort auch noch stärker mit Artikelserien oder bewusst ausgewählten passenden Beiträgen arbeiten.
Ich habe daher auch die automatische Anzeige der vier neuesten Beiträge entfernt. Die bringt wenig Mehrwert. Wer einen Artikel gelesen hat, braucht nicht unbedingt noch einmal die vier Artikel gezeigt zu bekommen, die ohnehin gerade auf der Startseite stehen.
Keine automatischen Beitragsbilder mehr
Twenty Twenty-Five wollte auf der Einzelansicht zunächst sehr prominent ein Beitragsbild anzeigen.
Das habe ich entfernt.
Wenn ein Artikel ein Bild braucht, füge ich es selbst an jener Stelle ein, an der es zum Text passt.
Ich brauche kein Theme, das aus jedem Blogartikel automatisch eine kleine Magazinseite macht. Das bin nicht ich.
Auch die Zeile mit „Verfasst von Robert Lender in Kategorie …“ ist verschwunden.
Dass die Artikel von mir sind, dürfte bei einem persönlichen Blog ausreichend klar sein.
Und Kategorien verwende ich nach außen ohnehin kaum mehr. Für die Navigation im Blog sind mir die Schlagwörter wichtiger.
Fediverse-Reaktionen und Kommentare
Ein wenig interessanter wurde es beim Zusammenspiel von WordPress, ActivityPub und Webmentions.
Unter meinen Artikeln werden Reaktionen aus dem Fediverse angezeigt, also beispielsweise Likes und Reposts.
Dafür gibt es inzwischen einen eigenen Block des ActivityPub-Plugins.
Den habe ich bewusst vor den normalen Kommentarbereich gesetzt.
Nach dem Umbau erschienen Likes und Reposts allerdings plötzlich nochmals bei den Kommentaren.
Zuerst vermutete ich das ActivityPub-Plugin als Ursache.
Die Lösung lag aber woanders.
Im Webmention-Plugin war noch eine Einstellung aktiviert, mit der unterschiedliche Webmention-Typen getrennt von Kommentaren dargestellt werden.
Das dürfte eine Einstellung gewesen sein, die bei meinem früheren Theme sinnvoll war.
Mit dem neuen ActivityPub-Reaktionsblock war sie nun doppelt.
Nach dem Abschalten ist die Trennung wieder sauber:
Fediverse-Likes und Reposts stehen bei den Fediverse-Reaktionen.
Kommentare und echte Antworten stehen bei den Kommentaren.
So soll es sein.
Auch die Suche musste umgebaut werden
Eine Sache fiel mir erst später auf.
Die Suchergebnisse zeigten jeden gefundenen Artikel vollständig an.
Bei einem längeren Artikel musste man also erst durch den ganzen Beitrag scrollen, um zum nächsten Suchtreffer zu gelangen. Danach kamen teilweise auch noch die Fediverse-Reaktionen.
Für eine Suche ist das ziemlich unpraktisch.
Deshalb sieht die Suchausgabe jetzt ähnlich wie die Startseite aus: Titel, Datum, kurzer Textauszug und Weiterlesen-Link.
Die Kommentaranzahl lasse ich dort sogar weg.
Bei der Suche möchte ich möglichst schnell die Treffer überfliegen können.
Ein paar unsichtbare Abstände
Einige Zeit ging übrigens für Dinge drauf, die man später hoffentlich überhaupt nicht bemerkt.
Zum Beispiel gab es vor der Seitennavigation einen riesigen leeren Bereich.
Der Übeltäter war der WordPress-Block „Keine Ergebnisse“.
Der wird zwar bei vorhandenen Beiträgen nicht angezeigt, seine umgebende Gruppe brachte aber weiterhin einen großen Abstand mit.
Ich habe die Gruppe nicht gelöscht. Dazu war mir die Struktur des Templates noch etwas zu heikel.
Ich habe einfach ihren Rand beziehungsweise Abstand auf null gesetzt.
Das gleiche Problem gab es sowohl auf der Startseite als auch bei den Suchergebnissen.
Manchmal ist Webdesign eben auch: Warum ist hier plötzlich ein Leerraum?
Große Bildschirme sind auch ein Thema
Auf meinem normalen Bildschirm sah die Seite irgendwann gut aus.
Dann habe ich sie auf einem sehr großen Bildschirm angesehen bzw. wurde von Leser:innen darauf gestossen (Danke!).
Plötzlich lagen die Artikel weit links und die Sidebar weit rechts. Dazwischen befand sich eine halbe österreichische Kleinstadt.
Auch Header und Footer verwendeten zunächst andere Breiten als der Hauptbereich.
Das wurde ebenfalls angepasst.
Die gesamte Website darf jetzt maximal 1600 Pixel breit werden:
.wp-site-blocks {
max-width: 1600px;
margin-left: auto;
margin-right: auto;
}
Header und Footer verwenden innerhalb dieses Rahmens ebenfalls die verfügbare Breite.
Der eigentliche Text eines Artikels bleibt dagegen bewusst schmaler.
Aktuell habe ich beim Textblock eine maximale Breite von 780 Pixeln eingestellt.
Das ergibt bei meiner derzeitigen Schrift ungefähr 85 Zeichen pro Zeile.
Damit kann ich gut leben. Ihr auch?
Die Sache mit den Schriften
Auch die Schrift hat mehr Zeit beansprucht als ursprünglich gedacht.
Twenty Twenty-Five verwendet standardmäßig Manrope.
Die hat mir für mein Blog nicht besonders gefallen.
Sie wirkte auf mich etwas zu glatt und zu sehr nach modernem Website-Template.
Danach habe ich ABeeZee ausprobiert.
Optisch gefiel sie mir wesentlich besser.
Dann kam allerdings erstes Feedback, dass längere Texte damit nicht besonders angenehm zu lesen seien.
Also wieder zurück an den Start.
Aktuell verwende ich Atkinson Hyperlegible Next.
Die Schrift wurde ausdrücklich mit Blick auf gute Lesbarkeit und unterscheidbare Zeichen entwickelt und ist trotzdem eine serifenlose Schrift.
Das gefällt mir.
Für normalen Text verwende ich derzeit ungefähr:
18 Pixel Schriftgröße, Zeilenhöhe 1,6 und keinen zusätzlichen Zeichenabstand.
Ob das die endgültige Lösung bleibt, wird sich beim längeren Lesen zeigen.
Und Google Fonts?
Ein wichtiger Punkt war für mich von Anfang an klar:
Ich möchte nicht, dass beim Aufruf meines Blogs wegen einer Schriftart eine Verbindung zu Google aufgebaut wird.
Das halte ich schon allein aus Datenschutzgründen für unnötig.
WordPress kann Schriften inzwischen lokal speichern.
Im Browser habe ich deshalb kontrolliert, woher die verwendeten WOFF2-Dateien tatsächlich geladen werden.
Die mit Twenty Twenty-Five gelieferten Fonts kommen beispielsweise aus:
nureinblog.at/wp-content/themes/twentytwentyfive/assets/fonts/...
Meine zusätzlich installierten Fonts liegen unter:
nureinblog.at/wp-content/uploads/fonts/...
Beides kommt also von meinem eigenen Server.
Keine Verbindung zu fonts.googleapis.com und keine zu fonts.gstatic.com.
Das Plugin OMGF, das ich früher gerade deshalb eingesetzt hatte, ist bereits deaktiviert.
Und trotzdem werden die Fonts weiterhin lokal geladen.
Ein Plugin weniger.
Das freut mich fast genauso sehr wie das neue Theme.
Noch nicht fertig
Natürlich ist der Umbau nicht vollkommen abgeschlossen.
Ich muss mir die mobile Darstellung noch genauer ansehen.
Abstände und einzelne Schriftgrößen werden sicher noch ein wenig angepasst.
Die ausgewählten Themen auf der Startseite müssen sinnvoll befüllt werden.
Und wahrscheinlich werde ich in den nächsten Tagen immer wieder auf irgendeine Seite stoßen, die ich beim Umbau vergessen habe.
Aber die grundsätzliche Struktur steht.
Und sie gefällt mir.
Eigentlich ist es immer noch dasselbe Blog
Das war mir bei diesem Umbau wichtig.
Ich wollte aus „Nur ein Blog“ kein Magazin machen.
Keine riesigen Hero-Bilder, keine Karten mit Schatten, keine animierten Elemente und keine Startseite, die zuerst erklären muss, wo man überhaupt die Artikel findet.
Es ist weiterhin ein Blog.
Oben steht, wer hier schreibt.
Darunter kommen die Artikel.
Man kann kommentieren, per RSS abonnieren, im Archiv stöbern und Reaktionen aus dem Fediverse sehen.
Nur die technische Grundlage hat sich deutlich verändert.
Und einige Dinge sind jetzt dort, wo sie aus meiner Sicht besser aufgehoben sind.
Vielleicht ist das überhaupt die angenehmste Form eines Relaunchs:
Wenn man danach merkt, dass sich ziemlich viel geändert hat – und das Blog trotzdem noch immer nach dem eigenen Blog aussieht.
