Es ist nun schon wieder eine ganze Weile her, dass ich meine Webseite einem Relaunch unterzogen habe. Ich kenne das genaue Datum nicht mehr sicher, weiß aber, dass es irgendwann im Jahre 2015 gewesen sein muss. Über die Jahre haben sich einige Themen ergeben, dir mir nicht mehr so recht gefallen haben. So habe ich mich bereits seit dem Spätsommer des letzten Jahres mit einem Relaunch meiner Webseite befasst. Hier fasse ich einmal meine Beweggründe, die Arbeitsschritte, das Gelernte und meine nächsten Schritte zusammen.
Gründe für den Relaunch
Wie gesagt, hatten sich so einige Themen gesammelt, die für eine Überarbeitung meiner Webseite sprachen. Dies waren unter anderem:
Design
Ich hatte beim Neubau 2015 auf das Standard-WordPress-Theme Twenty Fourteen gesetzt. Es war damals ziemlich neu und erfüllte alles, was ich als schön empfand: viele Bilder (auch im Hintergrund) und zwei Sidebars. Mittlerweile gefällt mir das alles gar nicht mehr. Es ist mir einfach viel zu bunt und die vielen Bilder lenken vom Lesen der relevanten Inhalte ab. Hier wollte ich auf eine deutlich schlichtere Variante umsteigen. Auch die vielen Meta-Informationen und die Werbung in den Sidebars empfinde ich als nicht mehr wertvoll und kann gern darauf verzichten.
Inhalt
Wie eben schon geschrieben, bestand meine Webseite mittlerweile aus einer Menge von Meta-Informationen, die gut und gerne aufgeräumt werden konnten. Sowohl die Kategorien als auch die Schlagworte hatte ich etwas zu spendabel verwendet. Auch die vielen Links – die immer noch als eigener Inhaltstyp verwaltet werden – brauchen eine Überarbeitung. Vielleicht kann ich hier auf Menüs mit individuellen Adressen umsteigen.
Technik
Zum guten Schluss wollte ich auch die technischen Komponenten einmal überarbeiten. Zwar hatte ich die WordPress-Installation, die Plugins und das Theme immer aktuell gehalten, aber einige der Plugins waren mittlerweile durch Funktionen im WordPress-Core obsolet geworden. Außerdem hatte mich die Debatte über den Datenschutz dazu bewogen, so weit wie möglich auf externe Dienste zu verzichten und somit die dafür notwenigen Plugins zu deinstallieren.
Schritte der Überarbeitung
Hier nun eine Übersicht der Schritte, die ich für den Relaunch gegangen bin. Ich habe während der Arbeit einige Stichpunkte mitgeschrieben und hoffe, dass ich nun nichts Wichtiges vergesse.
1. Arbeitsumgebung herstellen
Zu erst einmal war klar, dass ich den Relaunch nicht direkt auf der bestehenden Webseite durchführen würde. Auch wenn ich nicht sehr viele Leser habe, wollte ich verhindern, dass eventuelle Fehler auf dem Webserver und damit die Nicht-Erreichbarkeit der Webseite für Besucher zu erkennen sind. Außerdem hatte ich noch kein Gefühl dafür, wie lange die Überarbeitung dauern würde, so dass ich mir auch hier nicht unnötig Stress machen wollte.
Da ich bereits für mein WP Wiki Tooltip Plugin eine lokale Entwicklungsumgebung auf Basis von XAMPP habe, sollte eine weitere Version für den Relaunch eigentlich kein Problem sein. Aber wie das immer mit Dingen ist, die man zu selten tut, brauchte ich schon ein paar Stunden, um wieder alle Stellen zu finden:
- Aufsetzen eines neuen virtuellen Hosts
- neues lokales SSL-Zertifikat erstellen
- Inhalte aus dem letzten Backup kopieren
- neue Datenbank über das PhpMyAdmin erstellen und auch hier das letzte Backup einspielen
- den Namen der Domain und die lokalen Pfade in der DB ersetzen (zum Thema „WP-CLI unter Windows“ siehe unten mehr)
Und dann kam wie immer der spannende Moment, wenn man die Domain zum ersten Mal aufruft. Immerhin wurde das gewohnte Bild ausgeliefert, aber leider nur mit der bekannten 404-Fehlerseite 🙁
Die Suche nach diesem Problem hat mich gut eine Stunde gekostet. Hätte ich doch nur früher in die PHP Error-Log geschaut! Ein Plugin hatte sich nicht an die Namenskonventionen von WordPress gehalten und seine Tabelle falsch benannt. Dadurch war sie nicht im Backup und also auch nicht in der neuen DB enthalten. Nun gut, das noch schnell nach geholt und schon kam die gewohnte Webseite auf der Entwicklungsumgebung zum Vorschein 🙂
2. Theme wechseln
Um die oben genannten Gründe für Relaunch abzuarbeiten, startete ich mit dem Wechsel des Themes. Im Vorfeld hatte ich mir verschiedene Templates angeschaut. Unter anderem waren einige Themes von Elmastudio in die engere Auswahl gekommen.
Allerdings wurde vor gut einem Monat die Version 5.6 von WordPress veröffentlicht. Hier ist das neuen Standard-Theme Twenty Twenty-One enthalten. Ich brauchte nicht lang, um mich in dieses Theme zu „verlieben“. Immerhin traf ein zwei meiner Anliegen sofort:
- Das Design ist sehr aufgeräumt. Man wird wenig vom Lesen abgelegt. Es gibt keine Sidebars und nur die Bilder im Inhalt. Alle Meta-Informationen sind auf den Footer zusammen gestaucht. Außerdem wird das Umschalten in einen „Dark Mode“ nativ unterstützt, was ich aus Gründen der Usability sehr angenehm finde.
- Da ich schon vorher über viele Jahre ein Standard-Theme verwendet habe, weiß ich, dass darauf Verlass ist! Selbst nach mehr als fünf Jahren ist der Support und die Lauffähigkeit mit der aktuellen WordPress-Version kein Problem.
Damit war die Entscheidung gefallen und ich habe auf Twenty Twenty-One umgestellt!
Der Umstieg ist natürlich recht einfach: Durch die WordPress 5.6 wurde das Theme bereits mit installiert. Die meisten Einstellungen wurden direkt übernommen. Einige wenige neue Optionen konnten leicht über den Customizer angepasst werden.
Im Weiteren waren nun folgende Arbeiten notwendig:
Erstellung neuer Bildgrößen
Mit dem neuen Theme stehen natürlich auch neue Größen für die Beitrags- und Vorschaubilder zur Verfügung. Also müssen wir alle Bilder neue Bildgrößen erzeugt werden. Dafür habe ich einfach das Plugin „Regenerate Thumbnails“ verwendet. das Plugin liest die neuen Bildgrößen aus und bietet die Konvertierung für verschiedene Elemente an. Außerdem konnte ich direkt die Mediathek ein wenig aufräumen, da man auch die alten Größen löschen lassen konnte.
Umstellung der Social Media Links
Im nächsten Schritt stellte ich fest, dass Twenty Twenty-One ein Menü und einen Wirdget-Bereich im Footer für Links zu sozialen Netzwerken unterstützt. Bisher hatte ich diese Links für das alte Plugin „Link Manager“ verwaltet. Jetzt lassen sich die Links ganz praktisch über ein Menü organisieren. Die Icons werden dabei automatisch für die Verlinkung angezeigt. In der offiziellen Dokumentation zum Theme kann man sie Liste der unterstützten Netzwerke einsehen!
Ich habe dann auch gleich die Chance genutzt, und die Links zu den Meta-Seiten „Sitemap“ und „Kontakt, Impressum, Datenschutz“ in den Footer zu verlagern. Damit verschlankt sich das Hauptmenü auf nur noch drei Punkte.
Widgets aufräumen
Da das neue gewählte Theme ohne Sidebars auskommt, steht nach dem Relaunch nur noch der Footer für Widgets zur Verfügung. Darum musste ich die bisher – zugegebener Maßen etwas zu intensiv – genutzten Widget aufräumen.
Das fiel mir aber gar nicht so schwer: Zum Einen flogen die drei Werbe-Widget sofort raus, was mir gleich mal die externen Dienste von Amazon und Google sparte. Zum Anderen hatte ich die Social-Media-Icons ja schon in den Footer verschoben. Am Ende blieben genau neun Widgets übrig, die ganz nett in einem 3 x 3 Raster im Footer Platz finden.
Neue Startseite
Ich setzte nun ja schon seit einigen Jahren WordPress als CMS ein. Bisher hatte ich immer den Blog als meine Startseite definiert. Über die Zeit führte das zu zwei Problemen:
- Da ich während meiner Wanderungen recht oft kleine Statusmeldungen hier hinterlasse, werden die etwas wichtigeren Beiträge schnell von der ersten Seite verdrängt.
- Ich wollte schon immer einen kleinen Block auf die Startseite stellen, die mich als Inhaber vorstellt, um den Besucher der Startseite herzlich Willkommen zu heißen.
Den ersten Punkt konnte ich schon in meinem alten Theme lösen. Hier gab es die Option, Beiträge als „sticky“ zu markieren. Diese Markierung führte zu einer Anzeige ein einem gesonderten Design ganz oben auf der Startseite. Leider wurden die so markierten Beiträge als eine Art Slider dargestellt, so dass immer nur der aller neueste Beitrag sofort nach dem Laden zu sehen war.
Punkt 2 hätte ich über ein weiteres Widget lösen können, was mir aber erst zu spät bewusst wurde 😉 Da die Widgets nun aber nur im Footer zu finden sind, fällt diese Möglichkeit sowieso aus.
Da ich nun schon beim Relaunch war, kam mir die Idee, einfach einmal eine eigene Startseite zu bauen! Durch die vielen Blöcke, die WordPress und das Theme von Hause aus mitbringen, was das auch im Handumdrehen getan: Einfach einen Block „Medien und Text“ gefolgt von einer Überschrift und einen „Neueste Beiträge“-Block kombiniert; das Ganz mit ein paar Abständen verfeinert und schon sind all meine Wünsch erfüllt. Um die Beiträge auf der Startseite auszuwählen, sammle ich diese in einer eigenen Kategorie…
3. Meta-Daten verschlanken
Im nächsten Schritt habe ich dann gleich einmal die vielen Meta-Daten aufgeräumt. Sowohl die Kategorien als auch die Schlagworte hatte ich in der Vergangenheit etwas zu verschwenderisch genutzt.
Vor allem bei den Kategorien war ich rigide: Alle Kategorien mit bis zu zehn Beiträgen wurden aufgelöst. Die darin enthaltenen Beiträge wurden unter „Dies & Das“ sortiert und die alte Kategorie als Schlagwort vergeben. Das führte zu einer deutlich kürzeren Liste der Kategorien, was auch im neu sortierten Footer besser aussieht. Diesen Schritt muss ich noch für die eine oder andere Wanderveranstaltung nachholen…
Bei den Schlagworten habe ich mir vor allem je angeschaut, die nur wenige Male verwendet wurden. Hier konnte ich das eine oder andere durch die Wiederverwendung ähnlicher Varianten bereinigen.
4. technische Komponenten aufräumen
Da nun die Inhalte überarbeitet waren, konnte ich mich um die technischen Komponenten kümmern. Dazu zähle ich diese drei Teile:
Alte Domains ersetzen
Bei der Überführung der Liveseite auf die Arbeitsumgebung hatte ich festgestellt, dass noch einige alte Domainnamen aus vorherigen Umzügen in der Datenbank verblieben waren. Diese führten unter anderem zu Bildern, die nicht mehr angezeigt werden konnten. Mit mehreren Ersetzungen per WP-CLI war dies aber schnell erledigt.
Vielen Dank an dieser Stelle an Bernhard für die immer wieder hilfreiche Zusammenfassung der vielen möglichen Varianten an Ersetzungen!
Plugins aufräumen
Anschließend warf ich einen Blick in die Liste der Plugins. Hier fanden sich einige, die schon lange deaktiviert und nicht mehr in Verwendung waren. Andere waren zwar noch aktiv, boten aber kaum noch sinnvollen nutzen. Alles in allem verabschiedete ich mich von mehr als zehn Plugins und verschlankte die Liste so um ca. ein Drittel.
Externe Dienste abschalten
Eines meines Hauptziele des Relaunch war ja, auch die Anzahl der externen Dienste deutlich zu verringern. Nun war es an der Zeit, sich die eingesetzten Dienste genau anzuschauen und entsprechend zu bewerten. Folgende Punkte vielen dem Relaunch zum Opfer:
- Jetpack: Anfänglich brauchte ich Jetpack vor allem wegen der zusätzlichen Möglichkeiten, die es für die Galerien von Bilder mitbrachte. Später gab es ganz nette Option für das Teilen von Beiträgen und eigene Statistiken. In der Kritik stand das Plugin schon seit langen in Bezug auf den Datenschutz.
- Google Adsense: Wie schon oben beschrieben, brachte mir die Einblendung von Werbung rein gar nichts. Dafür den Anbietern so einige Daten meiner Leser. Also raus damit 😉
- Amazon Werbung: Analog zu Google Adsense
- Google Analytics: Grundsätzlich ist es ja schon schön zu wissen, wie viele Besucher die eigene Webseite im Monat so hat und welche Themen oder Beiträge oft ge-/besucht werden. Mit war mittlerweile dafür aber der Preis, den meine Leser an Datenschutz dafür bezahlen zu groß. Ich bin auf das Plugin Koko Analytics umgestiegen, das alle Daten in der lokalen WordPress-Datenbank speichert und trotzdem die wichtigsten Auswertungen liefert.
5. Livegang
Als nun alles auf meinem lokal Rechner vorbereitet war, hieß es, den Relaunch auf den externen Server zu spielen. Hierfür hatte ich mir gleich den 1. Januar vorgenommen, um dieses lang ersehnte Thema gleich zu Beginn des Jahres abzuschließen.
Tatsächlich verlief der Livegang auch ohne große Probleme, so dass ich sehr schnell noch einige inhaltliche Themen und das Schreiben dieses Beitrages beginnen konnte. Die Schritte waren am Ende dieselben, die es auch für die lokale Kopie gebraucht hatte:
- Datenbank exportieren
- Dateisystem zusammen packen
- alles auf den Server kopieren
- dort entpacken
- Datenbank einspielen
- Dateien entpacken
- Konfiguration wieder herstellen
- Pfade und Domainnamen in der DB ersetzen
Ende musste dann natürlich noch alles getestet werden und … tada, hier ist die neue Seite! 😎
Learnings
Wie immer gab es natürlich auch bei diesem Projekt etwas zu lernen. Bei mir waren es im wesentlichen zwei Themen, die ich schon lange auf Webservern benutzte, die mir aber unter Windows nicht zur Verfügung standen:
1. WP-CLI unter Windows
Das Kommandozeilen-Werkzeug für WordPress ist immer wieder ein tolles Helferlein für viele Arbeiten am CMS. Um es auch unter Windows nutzen zu können, sind gar nicht so viele Schritte notwendig. Hier habe ich ein überschaubares How-To gefunden, was ich leicht umsetzen konnte.
2. MySQL in der Windows-Konsole
Um Arbeiten an einer Datenbank durchzuführen, nutze ich auch ganz gerne direkt die Shell. Auch das geht auf einem Linux-System ganz gewohnt von der Hand. Unter Windows hatte ich mir das noch nicht angeschaut. Als ich nun „mal eben schnell“ einen Dump der Db erzeugen wollte, stand ich vor dem Problem, MySQL gar nicht in der Shell verfügbar zu haben. Aber auch hier konnte ein kleines Tutorial fix Abhilfe schaffen.
Nächste Schritte
Wie so oft, ist dieser Relaunch wieder einmal nur der Beginn von einigen weiteren Schritten. Es gibt noch ein paar Arbeiten, die ich binnen der Weihnachtsferien nicht geschafft habe, die aber für den Livegang auch nicht unbedingt notwendig waren:
- Entwicklung eines Child-Theme
Bisher komme ich ganz gut mit dem neuen Theme aus. Allerdings gibt es schon zwei Punkte, die ich unbedingt überarbeiten will, was die Einführung eines Child-Themes unabdingbar macht:- Das Theme unterstützt spezielle Beitragsformate. Diese werden aber nicht immer so ausgegeben, wie ich es gebrauchen kann. Unter anderem wird bei dem Format „Status“ das Beitragsbild nicht auf den Archivseiten ausgegeben.
- Das Theme bietet nicht die Möglichkeit, die Suche im oberen Bereich der Webseite anzuzeigen. Da ich dieses Element aber für fundamental halte, will ich das entsprechend auch zugänglich machen.
Mein Fazit zum Relaunch
Der Umstieg auf einen neues Theme mit aufgeräumten technischen Unterbau war mit WordPress wieder einmal gar nicht so kompliziert. Ich habe meine persönlichen Ziele mit der Überarbeitung erreicht und bin auch mit dem Ergebnis zufrieden.
Ich hoffe, auch euch gefällt das Ergebnis und ihr könnt das eine oder andere Wissenswerte für euer Projekt mitnehmen!
