Photoshop to Wordpress to Web - Teil 1

von Andreas Braun | 0 | 7141 Aufrufe

Der Weg zum eigenen CMS

Im Ersten Teil dieses doch eher längeren Artikels möchte ich mit euch einige der populärsten Themes für Wordpress anschauen, und wir picken uns hier und dort etwas raus, was uns gefällt. Dann gehts ins Photoshop. Dort basteln wir uns mit den gefundenen Sachen und unseren eigenen Ideen ein Layout zusammen mit dem wir zufrieden sind. Im zweiten Teil des Tutorials gehts dann ab in die Entwicklung. Hier wird dann ein gewisser Grundstamm an Programmierkenntnissen in PHP und jQuery wichtig werden. Aber keine Angst. Auch "Nicht-Coder" können hier weitermachen. Die Schritte lassen sich auch ohne entsprechende Kenntnis umsetzen. Wir werden nicht alles händisch komplett neu schreiben, sondern ein Child-Theme erstellen, das Funktionalitäten des Parent-Themes übernimmt, aber eigenständig gestylt werden kann. Das ganze Tutorial hat einen recht hohen Zeitaufwand, darum hier zunächst eine Übersicht aus der ihr euch das für euch Interessante herauspicken könnt.

Anzeige Hier werben

1. Wordpress Vorlagen für Photoshop für "lau"

Wenn ihr euch auch etwas schwer tut, die ersten Schritte beim Designen in einem leeren Photoshop Dokument zu machen, oder wenn ihr eine gute Quelle für Inspiration sucht, solltet ihr nun aufmerksam weiterlesen, denn ich habe ein paar nützliche Tipps für euch ;)

Eine Hauptanlaufstelle um Templates, Plugins oder Themes für alle möglichen Content-Management Systeme zu testen und zu kaufen ist Themeforest.net . Hier findet ihr unter Wordpress -> Popular die beliebtesten Themes für Wordpress. Die "Live Preview" Funktion kann mithilfe einer kleinen Erweiterung für Google Chrome dazu verwendet werden, um einfach an professionelle Layouts zu kommen. Dabei soll es uns aber nur um Inspiration und Vorlage gehen. Wir wollen keine kostenpflichtigen Themes klauen oder kopieren. Installiert (falls ihr Chrome nutzt) die Erweiterung "Awesome Screenshot" . Damit lassen sich Webseiten als fortlaufende Bilddatei speichern. Nach der Installation sucht ein Template auf Themeforest und macht einen Screenshot über "Capture entire page".

Bild zu Photoshop to Wordpress to Web - Teil 1
Menu von Awesome Screenshot in Google Chrome - Capture Page Option

Das Ergebnis wird je nach Theme so ähnlich aussehen:

Bild zu Photoshop to Wordpress to Web - Teil 1
Screenshot eines Templates von Themeforest

Damit hätten wir einen guten ersten Eindruck, wie professionelle Wordpress Seiten aufgebaut sind. In Photoshop können wir diese Vorlage nun nutzen, um unser eigenes Wordpress Layout zu gestalten.

Die "Live Preview" Funktion von Themeforest hilft auch dabei, interessante Features zu testen, wie Lightbox, Carousel, Masonry usw. Ein idealer Einstieg, wenn man eine kleine Schaffensblockade hat.

2. Design in Photoshop

Ich habe mir zunächst überlegt, welche Größe die finale Seite einmal haben wird. Der Trend geht hin zu großflächigen Hintergründen, auf denen zentriert der Inhalt gezeigt wird. Vgl. Dazu die Screenshots im vorherigen Teil. Ich möchte meine Inhalte also mit maximaler Breite von 1280 px zeigen während im Hintergrund die gesamte Bildschirmfläche gefüllt sein soll. Das Ergebnis aus den Vorlagen und meinen Ideen ist dieses Template Layout:

Da ich in Photoshop keine besonderen Techniken angewandt habe, um das Layout zu erstellen, lasse ich an dieser Stelle ein Anfänger-How-To aus, da dies wohl den Rahmen sprengen würde. Nur ganz knapp zusammengefasst:

  • Dokumentgröße 1600x6000 px
  • Zusammengehörige Teile in eigene Layergruppen zusammengefasst (damit man leichter repositionieren kann)
  • Grafiken: Bis auf die Icons aus eigener Hand
  • Icons: Mit dem Flaticon Plugin für Photoshop gefunden. (siehe dazu meinen Artikel Photoshop to Web Pentalogie
Front-page Layout
Bild zu Photoshop to Wordpress to Web - Teil 1
So sieht das Photoshop Dokument aus. Es zeigt viele unterschiedliche Bereiche, wie Textboxen, Bilderpräsentationen, Slider, Carousel usw.
Single-Page Layout
Bild zu Photoshop to Wordpress to Web - Teil 1
Dies ist das Design einer Wordpress Spezialseite, die zur Präsentation eines Bildes dient.
Login / Register Layout
Bild zu Photoshop to Wordpress to Web - Teil 1

Im zweiten Teil gehen wir daran, das Layout in sinnvolle Teile zu zerlegen, die separat entwickelt werden können. Bei einem Projekt mit vielen Elementen ist dies ein wichtiger Schritt um den Überblick zu behalten. Divide-and-Conquer ist die Devise an dieser Stelle.

3. Installation XAMPP und Wordpress

Als erstes sollten wir uns eine lokale Entwicklungsumgebung einrichten. Dazu bauen wir auf XAMPP als Lokalen Server und Wordpress in der Version 3.9.1.

Material zum Mitmachen:
Wordpress 3.9.1
XAMPP

Beides herunterladen und XAMPP installieren. Dabei einfach alles auf default Werte belassen. Die Zip Datei von Wordpress entpacken und in den Ordner htdocs kopieren. Der Ordner sollte dann einen Ordner wordpress enthalten.

Für eine ausführliche Anleitung zur Installation von XAMPP empfehle ich diesen Artikel hier:

XAMPP - Lokaler Testserver - Einrichtung und Verwendung

Startet nun den XAMPP Server (php und mysql) -> Bei Fehlern schließt Skype (Skype verwendet einen der Ports, den auch XAMPP benötigt). Das ist immer ein Hauptgrund warum der XAMPP nicht startet. Vor der Wordpressinstallation benötigen wir noch eine Datenbank. Der Artikel zur Installation (siehe blauer Kasten erklärt auch, wie man mit phpMyAdmin in die MySQL Datenbankverwaltung gelangt. Erstellt dort eine neue Datenbank Typ "Kollokation" mit dem Namen "wpdev" .

Wir können nun die Installation beginnen. Dazu im Browser auf den "localhost" wechseln und den Ordner "wordpress" öffnen. Gebt folgende Daten ein:

Bild zu Photoshop to Wordpress to Web - Teil 1

4. Child-Theme "needles"

Erstellung eines Child-Themes basierend auf "Basic"

Nach langatmigem Herumprobieren mit verschiedenen kostenlosen Themes und dem Versuch ein eigenes von Grund auf selbst zu schreiben, bin ich an dem Punkt angelangt, der mir für meine Ansprüche der passende zu sein scheint. Ich werde mir ein Child-Theme anlegen. Ein Child-Theme ist prinzipiell eine Kopie des Parent-Themes. Man kann es aber erweitern und verändern ohne dabei destruktiv vorzugehen, und das Parent-Theme umzuschreiben. Der Grund war hauptsächlich der, dass beim Selber schreiben das ein oder andere Feature vergessen wird, und man am Ende mit einem Ergebnis dasteht, welches nur den minimalen Funktionsumfang von Wordpress darstellt. Vor allem beim Umgang mit den Artikeln gibt es viele Arten Informationen darzustellen, die auch bis ins kleinste Detail geändert werden können. Daher nehme ich mir was schon da ist und setz darauf auf.

Material zum Mitmachen:

Basic Theme

Um ein Child Theme zu erstellen geht man folgendermaßen vor:
  • Das Parent-Theme "Basic" als Zip herunterladen oder über den Theme Browser im Adminpanel von Wordpress installieren, aber nicht aktivieren (oder einfach entpacken und in den themes Ordner kopieren)
  • Wechselt in den Ordner eurer Wordpress Installation z.B. (C:\Xampp\htdocs\wordpress\wp-content\themes\)
  • Hier muss ein Ordner mit dem Namen eures Eltern Themes sein. In meinem Fall "Basic"
  • Erstellt nun im gleichen Verzeichnis (\themes\) einen neuen Ordner mit dem Namen eures Themes (bei mir "basic_needles")

Das Verzeichnis "themes" sollte nun so aussehen:

Bild zu Photoshop to Wordpress to Web - Teil 1
Ordnerstruktur im Explorer
  • Im Ordner "basic_needles" eine neue CSS Datei "style.css" erstellen und folgenden Code reinpacken
  • Speichern und schließen
Die style.css im root verzeichnis des themes  
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
/*
Theme Name: Needles
Theme URI: http://www.needles-online.de/files/needles
Description: Mein Child Theme basierend auf Basic von Themify
Version: 1.0
Author: Andreas Braun
Author URI: http://www.needles-online.de/about
Tags: needles,child,theme,flat,responsive
Template: Basic
*/

Wichtig für euch ist die Zeile : "Template: Basic"

Ersetzt "Basic" mit dem Namen eures Eltern Themes, falls ihr ein anderes Theme als Basis habt. Der Name ist dabei der Theme Name des Eltern Themes. Der steht in der style.css des Eltern Themes. Es ist nicht unbedingt der Name des Ordners in dem das Theme liegt, also aufpassen. Sonst erscheint euer Child Theme nicht im Adminpanel von Wordpress.

  • Damit im Admin-Panel an der Stelle eures Themes ein Bild zu sehen ist, solltet ihr ein "screenshot.png" im Ordner "basic_needles" ablegen mit den Maßen : 600 x 450.
  • Kopiert nun aus dem Eltern-Theme noch folgende Dateien: functions.php , index.php , header.php , footer.php und legt diese im "basic_needles" Ordner ab

Der Inhalt des Ordners "basic_needles":

Bild zu Photoshop to Wordpress to Web - Teil 1

Habt ihr alle Schritte befolgt, könnt ihr nun im Admin-Panel von Wordpress den Browser "refreshen" und solltet nun euer Theme angezeigt bekommen.

Bild zu Photoshop to Wordpress to Web - Teil 1

Zu sehen ist hier das "Basic" Theme und das Child-Theme "Needles" mit dem hübschen Screenshot. Klickt auf "Aktivieren"

Das Elterntheme "Basic" kommt mit umfangreichen Demoinhalten für Wordpress daher. Da unser Child Theme davon "erbt" werdet ihr beim Aktivieren gefragt, ob ihr den Demo-Content importieren wollt. Klickt auf "Ja". Dies kann einige Zeit dauern. Also Geduld. Hat der Import geklappt, Könnt ihr euer Werk begutachten indem ihr im Browser "http://localhost/wordpress" eingebt oder "Visit Site" im Admin Panel aufruft.

Unser bisheriges Ergebnis sollte nun so im Browser aussehen:

Bild zu Photoshop to Wordpress to Web - Teil 1

Ziemlich farblos und wenig spektakulär. Aber keine Angst wir sind auf dem Weg.

In Teil 2 machen wir uns an die Zerlegung des Layouts. Danach entwickeln wir die einzelnen Teile als statische Seitenelemente. Es wird leider sehr viel Programmieraufwand erforderlich sein, um die Seite so entstehen zu lassen, wie ich es im Layout vorgesehen habe, zumal ich mir selbst die Vorgabe gestellt habe, kaum Wordpress Plugins zu verwenden.

Die Vorgaben für das Wordpress Template

Folgende Vorgaben habe ich mir gestellt bei der Entwicklung des Templates:

  • Keine Wordpress Plugins für Slider, Carousel, Lightboxen usw verwenden
  • Responsives Verhalten über CSS
  • Selbst erstellte Inhaltsseiten für die dynamische Darstellung der Wordpress Posts, Gallerien usw

Es sind zwar wenige, dafür aber inhaltlich sehr umfangreiche Vorgaben, mit denen wir an den Start gehen. Daher wollen wir nicht mehr Zeit verlieren und gleich in die Entwicklung einsteigen.

Wir sehen uns hoffentlich in Teil 2 wieder, wenn wir zusammen mit mit PHP, Javascript, HTML und CSS in den Kampf ziehen.

Über den Autor: Andreas Braun
hat keine Beschreibung angegeben. Eine Beschreibung kann man unter dem Punkt "Profil bearbeiten" im Kontrollzentrum eintragen.
Profilseite betrachten