Andreas Bruns

Softwareentwicklung für Oldenburg und Bremen

Neue responsive Firmen-Website und WordPress-Umzug

Das Layout meiner vorherigen Firmen-Website habe ich vor etwa einem Jahr mit dem CSS-Framework Blueprint gestaltet. Das Design gefällt mir zwar sehr gut, allerdings passt sich das Layout bei Besuchern mit geringen Bildschirmauflösungen, wie Handys, nicht an. Das Buzzword lautet hier Responsive Webdesign. Außerdem habe ich für mein Blog das Hosting-Angebot von wordpress.com genutzt. Natürlich würde ich den Blog lieber in meine bestehende Website integrieren.

Jetzt ist meine neue responsive Firmen-Website mit dem umgezogenen Blog fast fertig. Aber die Aufgaben meiner Roadmap habe ich noch nicht komplett abgearbeitet:

  1. was will ich eigentlich ?
  2. wie möchte ich das realisieren ?
  3. lokale WordPress-Installation für Tests
  4. WordPress-Theme auswählen oder selber erstellen ?
  5. Theme den eigenen Bedürfnissen anpassen
  6. benötigte WordPress-Plugins installieren
  7. WordPress für Produktion installieren und konfigurieren
  8. bestehende Artikel in neues WordPress kopieren
  9. Datensicherung planen

Dann mal los…

1. was will ich eigentlich ?

  • ein responsives Design für die Website
  • der Blog soll in die Website integriert werden
Alte Website mit Blueprint

Alte Website mit Blueprint

2. wie möchte ich das realisieren ?

  • bestehende Website auf Blueprint-Basis erweitern
    => sehr individuell und aufwendig
  • Website per WordPress-Hosting bereitstellen
    => einfach, aber viele Einschränkungen bei Erweiterungen
  • Website mit eigenem WordPress bereitstellen
    => einfach und wenig Einschränkungen => das mach ich !!!

3. lokale WordPress-Installation für Tests

WordPress benötigt einen Webserver (z.B. Apache), PHP und MySQL, was bereits alles auf meinem MacOS installiert ist. Aber bevor ich mein System kaputt konfiguriere, wähle ich lieber einen sichereren Weg – zur Auswahl steht:

  • innerhalb einer Virtual-Machine, wie VirtualBox
  • Software MAMP : Local server environment – Macintosh, Apache, Mysql and PHP
  • BitNami WordPress Stack: Run WordPress on local server or in the cloud

Ich habe mich für BitNami entschieden und es lief problemlos ohne mein restliches System negativ zu beeinflussen.

BitNami WordPress-System

BitNami WordPress-System

4. WordPress-Theme auswählen oder selber erstellen ?

  • es gibt bereits viele kostenlose WordPress-Themes, z.B. hier
  • man nutzt einen Theme-Builder, z.B. WP Theme Generator
  • es gibt viele Tutorials, wie man sein eigenes WordPress-Theme erstellt, z.B. hier: Elmastudio
  • bei selbst entwickelten Themes sollte man auf ein solides Grundgerüst, wie roots.io (nutzt HTML5 Boilerplate, Bootstrap und Grunt), aufbauen
  • lohnt sich der Aufwand, ein eigenes Theme zu erstellen, das auch noch responsive ist ?
    => ich habe mich für das kostenlose responsive Theme  YOKO von Elmastudio entschieden

5. Theme den eigenen Bedürfnissen anpassen

  • Farben anpassen
  • Schriften anpassen
  • Bilder hochladen und einbinden
  • direkt das CSS oder die PHP-Seiten ändern: Admin-> Design -> Editor

6. benötigte WordPress-Plugins installieren

Bei der lokalen WordPress-Installation sind natürlich einige WordPress-Plugins nicht vorhanden, die standardmäßig schon bei dem WordPress der Hosting-Lösung installiert sind. Für mich waren die folgenden Plugins relevant, wobei sich natürlich ein Blick auf die vielen Top-10-Plugins (z.B. Elmastudio) im Internet lohnt.

  • Bild einblenden:
    => Image Widget
  • Programmcode formatiert anzeigen:
    => SyntaxHighlighter Evolved
  • YouTube-Videos anzeigen:
    => vorherige Einträge [youtube="http://youtube.com/abcdef"] genügt http://youtube.com/abcdef

7. WordPress für Produktion installieren und konfigurieren

  • Webspace mit PHP- und MySQL-Unterstützung wird benötigt
  •  mein Webspace unterstützt beides und WordPress konnte aus einer Administrator-Website heraus installiert werden
  •  falls WordPress nicht aktuell ist, bietet es selber eine Aktualisierung an
  • evtl. deutsches Sprachpaket in der Du- oder Sie-Version installieren
  • evtl. deutsche Sprache in wp-config.php aktivieren: define('WPLANG', 'de_DE');

8. bestehende Artikel in neues WordPress kopieren

  • WordPress bietet unter Werkzeuge die Funktionen „Daten importieren“ und „Daten exportieren“
  • im Praxiseinsatz werden leider die Zeichen innerhalb des Sourcecode-Plugins ebenfalls umgewandelt: ein „>“ wird also umgewandelt zu einem „“>“
  • also müssen alle Beiträge noch einmal überprüft und korrigiert werden – das habe ich leider noch nicht gemacht :-/

9. regelmäßige Datensicherung durchführen

  • beim WordPress.org-Hosting sorgt hoffentlich WordPress.org für eine Datensicherung
  • natürlich sollte man sich darauf  nicht verlassen und selber auch regelmäßig Datensicherungen durchführen
  • und bei einer eigenen WordPress-Installation mit eigner MySQL-DB ? Dann natürlich erst recht !!!

Fazit – Umzug ist fast geschafft

Nur noch alle Artikel auf Fehler überprüfen, automatische Datensicherung aufsetzen und im alten Blog verkünden, dass alle Abonnenten jetzt diesem Blog folgen dürfen.

Und wie steht es jetzt mit responsive Webdesign? Das funktioniert schon fast alles. Mit Quirktools.com (Samsung Galaxy 3/4) sehe ich aber schon, dass das Bild der Bremen-Skyline verzerrt wirkt und noch angepasst werden muss.

Quirktools - Layout im Samsung Galaxy 3/4

Quirktools – Layout im Samsung Galaxy 3/4

Kommentare sind geschlossen.