WordPress Theme Wechsel - Schritt für Schritt

WordPress Theme Wechsel - Schritt für Schritt

Dieser Artikel wurde zuletzt aktualisiert am 12.05.2019

Mein WordPress Theme Wechsel zu Astra Pro. Auf j0e.org ist es mal wieder so weit. Das alte Beans Framework eingestellt und mit Astra ersetzt.

Ein Wechsel auf ein anderes WordPress Theme ist gar nicht so ohne, besonders wenn viel Custom Code verwendet wurde. In diesem Artikel möchte ich beschreiben, in welchen Schritten ich den Text, den Code und die Bilder auf die neuen Gegebenheiten angepasst habe.

WordPress Staging Seite für den Übergang

WordPress Staging Seite mit Plesk erstellen - Extension WordPress Toolkit
WordPress Staging Seite mit Plesk erstellen. Mit der Extension WordPress Toolkit.

Eine Staging Seite ist eine Kopie der öffentlichen Seite, an der du herumdoktern und entwickeln kannst. Sehr praktisch ist so eine Spielwiese auch zum Testen von neuen Plugins. Oder eben beim Wechsel auf ein neues Theme.

Ich habe das mit einem Klick im Webhosting-Panel Plesk gemacht. Dafür brauchst du aber auch noch die Extension WordPress Toolkit installiert.

Alternativ kannst du auch das WordPress Plugin WP Staging nutzen. Sehr einfach kannst du eine Staging Seite mit MalCare erstellen. Der Dienst erstellt die Kopie sogar auf deren Server.

Ab jetzt arbeiten wir an der Kopie weiter!

Egal was ab jetzt auch passiert, wir können uns jeder Zeit wieder eine Kopie von der Live-Webseite erstellen.

Neues Theme installieren

Der wichtigste Schritt ist nun der Wechsel auf das neue WordPress Theme. Dazu hab ich einfach das neue Theme installiert, das alte deaktiviert und anschließend das neue aktiviert. In einer perfekten Welt wäre dieser Artikel nun schon zu Ende.

Alles, was schiefgehen kann, wird auch schiefgehen

Murphys Law

Wie Murphys Gesetz schon besagt, geht dabei so einiges schief. Genauer gesagt müssen wir Einstellungen und stylische Änderungen auf das Ziel-Theme ummünzen.

Child Theme nutzen

WordPress Child Theme
Im Child Theme können die Theme-Dateien updatesicher verändert werden.

Bei vielen aktuellen Themes kannst du sehr viele Einstellungen im Customizer machen. In diesem Fall kannst du dir ein Child Theme sparen.

Möchtest du aber etwas tiefer eingreifen, solltest du unbedingt ein Child Theme nutzen. Ich muss so einige Änderungen an den Theme-Dateien direkt machen, deshalb brauche ich auch ein Kindtheme.

Layout und Farben

Astra Layout Einstellungen
Astra Layout Einstellungen

Die ersten Anpassungen betreffen das Layout. Gesamtbreite, Inhaltsbreite und gegebenenfalls die Sidebar. Vielleicht auch noch weitere Inhaltstypen, falls du diese nutzt.

Nachdem ich auch die Farben geändert habe, ähnelt die Testseite schon sehr dem Original. In meinem Fall ist das auch gewünscht.

Bis jetzt habe ich alle Anpassungen im WordPress Customizer gemacht.

Menü- und Widget-Positionen können je nach Theme anders heißen und zugeordnet sein. Das solltest du kurz prüfen, ob alles am richtigen Fleck ist.

Bei den Menüs musste ich nichts ändern. Lediglich das Social-Media-Icons-Menü musste ich an einem neuen Punkt aktivieren. Bei den Widgets ist auch alles Standard. Ich hatte keine besonderen Widget-Positionen genutzt.

LESEN
Neuer Workflow für Divi 2.5 von Elegant Themes

Startseite und Landingpages

Der Blick auf die neue Startseite war bei mir nicht sehr erfreulich. Die schön gestaltete Startseite ist nun eine einfache Blogliste. Zuvor konnte ich auf das CSS Framework UIkit zurückgreifen. Astra bietet diesen Luxus leider nicht.

Für aufwendige Seiten bieten sich Page Builder wie Elementor an. Ich habe meine alte Homepage mit Gutenberg nachgebaut.

Die Frage ist schon bei der Wahl des Themes zu klären. Kommt das Theme schon mit einem Page Builder? So wie Divi mit dem Divi Builder ausgeliefert wird. In so einem Fall wäre es nicht sehr schlau, noch einen zusätzlichen visuellen Editor zu installieren.

Plugins ersetzen oder einsparen

WordPress Plugins sind Fluch und Segen zugleich. Die Erweiterungen können einen Blog so viel besser machen, gleichzeitig machen Plugins deinen Blog aber auch langsamer, fehleranfälliger und unsicherer.

Während des Wechsels auf mein neues Theme habe ich also jedes einzelne Plugin noch mal überdacht und drei davon komplett gelöscht.

Zwei andere Plugins habe ich durch ein aktuelleres ersetzt. Derzeit überlege ich noch, ob ich nicht Jetpack auch komplett entsorgen soll.

Bilder auf neue Größen anpassen

Bei mir hat sich die Gesamtbreite von 1046 px auf 1180 px erweitert. Die Inhaltsbreite der Blogposts mit Sidebar ist von 705 px auf 800 px gewachsen.

Bei älteren Posts, wo noch die alte Bilderbreite vorhanden ist, schaut es jetzt nicht sehr schön aus, wenn bei den Bildern auf der rechten Seite etwas fehlt. Eine Möglichkeit wäre es, alle Bilder zu zentrieren. Das ist besonders dann eine brauchbare Option, wenn die Auflösung der Bilder nicht für die neue Seite ausreicht.

Ich möchte aber alle meine Bilder auf die neue Größe neu generieren lassen. Hört sich vielleicht wild an, ist aber mit den richtigen Plugins ganz einfach. Zuerst musst du die neuen Größen in Einstellungen –> Medien einpflegen.

WordPress Bildergröße Vorgaben: Einstellungen --> Medien
WordPress Bildergröße Vorgaben: Einstellungen –> Medien

Die Höhe lasse ich immer auf 0. Damit verändert WordPress die Höhe nicht. Das ist wichtig, falls du mal Bilder hochlädst, die mehr hoch als breit sind. Das Seitenverhältnis bleibt natürlich erhalten. Diese Einstellung betrifft aber nur die neuen Bilder. Für die Anpassung der alten Bilder benötigen wir ein Plugin.

Regenerate Thumbnails ist kostenlos im WordPress Plugin erhältlich. Nach der Installation findest du im Menü Werkzeuge –> Vorschaubilder regenerieren.

Regenerate Thumnails passt alle Bilder an die neuen Einstellungen an
Regenerate Thumbnails passt alle Bilder an die neuen Einstellungen an

Wahlweise kannst du alle Bilder neu generieren, oder auch nur die Beitragsbilder. Mit einem Klick auf Regeneriere Vorschaubilder gehts los. Je nachdem wie viele Bilder du hast, kann die Aufgabe schon einige Zeit in Anspruch nehmen. Alternativ kannst du auch nur einzelne Bilder in der Mediathek neu erstellen.

Ich nutze dafür das ShortPixel Plugin. Dessen Aufgabe ist es, alle hochgeladenen Bilder für das Internet zu optimieren. Dadurch wird die Dateigröße deutlich geschrumpft, was wiederum die Ladezeit deiner Seite deutlich verringert.

Außerdem kann ShortPixel auch alle vorhandenen Bilder regenerieren und dabei auch gleich optimieren. Ein richtig tolles Plugin, das auf keinem meiner Blogs fehlen darf.

LESEN
Layers: Erstelle dein eigenes Wordpress Design

functions.php überprüfen

Meine functions.php im WordPress Child Theme
Meine functions.php

Bevor ich live gehe, nehme ich mir noch die Datei functions.php vor. Sagt dir der Name nichts, kannst du diesen Absatz wohl überspringen. In der functions.php kannst du ganz viele Änderungen an deinem Theme machen, die du in den Einstellungen nicht findest.

Hooks und Filter erlauben dir, Code Snippets auf deiner Seite einzufügen, oder definierte Bereiche zu verändern.

Bei all meinen Themes ist die functions.php meines Child-Themes vollgepackt mit Änderungen. Zum Beispiel füge ich in den Google Tag Manager Code hier in meine Seite ein.

Beim Wechsel des Themes muss ich also überlegen, welchen Code ich aus meiner alten functions.php übernehmen muss.

style.css überprüfen

Das gleiche Spiel noch einmal. Sagt dir der Name style.css nichts, kannst du diesen Abschnitt überspringen.

In der Datei style.css deines Child-Themes kannst du CSS-Anpassungen vornehmen. CSS-Anweisungen bestimmen das Aussehen deiner Webseite.

Auch hier habe ich wieder Unmengen an Code, den ich teilweise in mein neues Theme übernehmen muss.

Neues Theme live schalten

Hab ich endlich alle notwendigen Anpassungen vorgenommen, und das neue Theme zeigt alle meine Posts und Seiten so an, wie es das soll, erfolgt der Wechsel von der Staging-Seite auf die Live-Domain.

Je nach Staging-Umgebung können die Änderungen mit einem Klick auf die Live-Seite zurückgespielt werden.

Sind die Änderungen nicht zu zahlreich, kannst du das neue Theme auf der Live-Seite aktivieren und die Änderungen von der Staging-Seite einfach nachziehen.

Je nach Umfang deiner Seite kann so ein Theme-Wechsel von einer Stunde bis zu einigen Tagen dauern. Ich persönlich scheue mich auch nicht davor, Änderungen direkt an den aktiven Seiten vorzunehmen. No Risk no Fun :D

Hast du alles fertig, solltest du noch alle Pages einzeln überprüfen, ob auch alles wie gewünscht dargestellt wird. Hast du wirklich viele Posts, solltest du zumindest Stichproben machen. Zumindest die Posts mit dem meisten Traffic sollten auf jeden Fall gecheckt werden. Der Teufel steckt ja bekanntlich im Detail.

Fazit

Keine Angst vor einem WordPress Theme Wechsel. Sicher bedeutet das Einiges an Aufwand und Probleme sind auch vorprogrammiert. Mit etwas Vorbereitung ist der Switch aber schnell erledigt und macht sogar Spaß.

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Nach oben scrollen