Jul 31 2012

Neues Design – ein anderes Theme für meinen Blog

Homepage-Besucher erwarten von modernen Websites, das sie ein für alle Endgeräte optimiertes Design bieten, d.h. die Darstellung und Bedienung soll sowohl auf Desktop-PCs wie auf Notebooks und Tablets sowie auf Smartphones einwandfrei sein.

Nun ja, bei professionellen Seiten, die Benutzer von bspw. Smartphones unterwegs einen Nutzen bieten – wie Fahrplanauskünfte, Wetterbericht, Stadtplänen, Veranstaltungsinformationen und ähnliches sind die verschiedenen Apps absolut sinnvoll.

Für einen rein privaten Blog jedoch finde ich das »responsive Design« bis hin zu einer Größe von 240 x 320 px allerdings ein wenig übertrieben.

 

Der Grund für meine Entscheidung, ein neues Theme zu wählen, lag darin begründet, dass das Theme, für das ich mich ursprünglich entschieden hatte, wohl nicht gepflegt wird und es somit keine Aktualisierungen mehr hierfür gibt – falls es sie jemals gegeben hat.

Das ist sehr schlecht, denn mit Einführung der Wordpress-Version 3.4 wurden einige Theme-Funktionen als überholt (deprecated) gekennzeichnet und werden eher früher als später nicht mehr unterstützt.

Bei meiner Suche habe ich also weniger auf »responsive« geachtet, entscheidend waren für mich Aktualität, Optik, Funktionalität und Anpassungsfähigkeit.

Bei themify.me bin ich fündig geworden und habe mich dort für das kostenlose Theme »iTheme2« entschieden. Das Grunddesign spricht mich sehr an und ich kann es flexibel an meine Vorstellungen anpassen. Ferner geht aus dem Changelog hervor, dass dieses Theme regelmäßig aktualisiert wird.

 

Für die Leser, die selbst einen Blog betreiben – oder es in Zukunft tun wollen – und mit dem Gedanken spielen, ein derartiges Projekt umzusetzen, habe ich nachstehend die erforderlichen Arbeitsschritte chronologisch zusammengefasst.

 

Nachdem ich das Theme ausgewählt hatte, standen zuerst verschiedene Vorbereitungen auf dem Plan:
  • Neues Verzeichnis unterhalb vom »html«-Verzeichnis auf meiner Homepage angelegt.
  • Sub-Domain mit dem Namen dieses Verzeichnisses in der Backend-Verwaltung (Confixx) meines Hosters erzeugt und den »html«-Ordner verwiesen.
  • Neue Datenbank in der Backend-Verwaltung (Confixx) angelegt.
  • Meinen kompletten Blog mit allen Verzeichnissen auf die Sub-Domain kopiert.
  • Bestehende Datenbank als »SQL«-Datei exportiert und auf meinem Rechner gespeichert.
  • Diese Datenbank in einen Editor geladen und alle Verweise mittels »Suchen und Ersetzen« von der Urspungs-Domain auf die Sub-Domain umschreiben lassen (je nachdem, wie umfangreich die Datenbank ist, kann dies einige Zeit in Anspruch nehmen).
  • In der WordPress-Verwaltung das neue Theme installiert und aktiviert.
  • Die ».htaccess«-Datei aus dem bestehenden in den neuen Theme-Ordner der Sub-Domain kopiert und die Einträge an die Sub-Domain angepasst.

 

Das Anlegen einer Sub-Domain zum Testen hat den Vorteil, dass dies nicht auf dem »scharfen« System geschieht und man sich nicht den kompletten Blog zerschießt, sollte bei der Modifizierung des neuen Themes etwas schiefgehen.

Wer dies lieber möchte, kann auf seinem PC auch einen Webserver installieren und diesen an die diversen Einstellungen seines Hosters anpassen.

 

Im Vorfeld hatte ich gelesen, dass man in dem von mir gewählten neuen Theme spezielle »custom«-Dateien anlegen kann, daher habe ich mich für diese Variante entschieden und nicht für ein Child-Theme.

 

Nach der Aktivierung des neuen Themes habe ich mit der Anpassung begonnen.

Im »Backend« von iTheme2 können viele Änderungen vorgenommen werden, doch hier beschränkte ich mich auf das Notwendigste. Ich wusste, es gibt verschiedene Skins. Zuerst habe ich nach dem entsprechenden Ordner gesucht, den Skin »grey« komplett kopiert, als Kopie in den Skin-Ordner eingefügt, in »custom« umbenannt und diesen Skin im Backend ausgewählt. Danach meinen Footer-Text in das entsprechende Feld im Backend hineinkopiert und das war es dann auch mit Ausnahme der später aktivierten Slider-Funktion und Layout-Änderung (Content-Siedebar-Tausch) mit der Theme-Verwaltung.

 

Danach folgten die Änderungen an den Dateien:
  • Hintergrundfarbe sowie das -bild (habe ich zuvor in meinem Grafik-Programm erstellt) in der »style.css« des ausgewählten Skins geändert.
  • Eine »custom_style.css« sowie eine »custom_funktions.php« erzeugt.
  • In die »custom_funktions.php« alles Relevante aus der »funktions.php« meines bisherigen Child-Themes hineinkopiert.
  • In der »custom_style.css« Anpassungen aus der »style.css« des Themes durchgeführt sowie die individiuellen CSS-Klassen und -IDs aus der »style.css« meines alten Child-Themes eingefügt und an das neue angepasst.
  • An ein paar weiteren Theme-Dateien winzige Änderungen durchgeführt und sie notiert, damit sie bei einem Update wieder eingespielt werden können. Ja, ich weiß, eigentlich soll man das nicht, doch bei »Kleinigkeiten« sehe ich das nicht so eng. ;-)

 

Abschließend kam die »Zitterpartie« an die Reihe:
  • Kompletten neuen Theme-Ordner aus dem Sub-Domain-Blog in den bestehenden Blog kopiert.
  • Beide Datenbanken exportiert und auf meinem PC gespeichert.
  • Die Datenbank des Sub-Domain-Blogs mit dem neuen Theme in einen Editor geladen und den oben beschriebenen Vorgang umgekehrt durchgeführt, d.h. alle Einträge der Sub-Domain wieder auf die ursprüngliche umschreiben lassen.
  • Alle Tabellen aus der Datenbank des bestehenden Blogs gelöscht.
  • Datenbank der Sub-Domain mit dem neuen Theme in die zuvor geleerte Datenbank importiert.

 

Nach einem »Stoßgebet« habe ich den Blog unter der bestehenden Domain im Browser aufgerufen … hurra, es hat alles geklappt.

 

Nachdem das neue Design »scharf geschossen« war, habe ich noch einige Layout- und Style-Änderungen, vor allem das »Feintuning« bei gewissen Elementen (mein Schatz würde jetzt wieder »Pixelschubserin« sagen) vorgenommen.

Das neue Theme besitzt dem Anschein nach ein »responsive Design« … zumindest funktioniert es auch bei modernen Smartphones ab einer Größe von 320 Pixeln Breite. Auf den Handys von zwei Kollegen, auf dessen Geräten ich es habe testen lassen, schaut es jedenfalls gut aus.

Natürlich wurde das neue Design in den aktuellen, gängigen Browsern getestet – Firefox 14.0.1, Chrome 20, IE 9, IE 10 Preview, Opera 12 und Safari 5.1.7. Im IE funktioniert es bis zur Version 7. Ach ja, mit dem Konqueror kann man sich meinen Blog übrigens auch ansehen.

 

Beim Lesen dieser Zeilen hört sich diese Überarbeitungs-Aktion für mich total einfach an. Das war es jedoch nicht so wirklich. Mein bester Helfer bei den Anpassungen war neben meinem Schatz (hauptsächlich Hilfe in Sachen php) das PlugIn »Firebug« im Firefox.

Gute Anregungen habe ich mir auch bei H.-Peter Pfeufer geholt. An dieser Stelle ein ganz liebes Danke für das fleißige Bloggen und Hilfen für andere Webmaster – auch für die, die keine Ahnung von »php« haben. :-) H.-Peter hat seine Seite übrigens ebenfalls redesigned – das neue Layout gefällt mir.

 

Auf jeden Fall bin ich froh, dass im Großen und Ganzen alles gut funktioniert hat, vor allem aber darüber, dass ich nach Tagen und halben Nächten (nebenbei muss ich ja auch noch arbeiten) damit fertig geworden bin.

Jetzt kann ich mich wieder auf das Wesentliche konzentrieren – das Bloggen.

 

Artikel zum »später Lesen« markieren:
An Kindle senden
An Instapaper sendenAn Pocket sendenAn Readability senden
Bitte teilen, wenn Euch der Artikel gefällt.

Weitere interessante Artikel zum Thema:

Autor: Martina Schein • Kategorie: Blog-Info • 3 Schlagworte: , , , ,