Das eigene Wordpress Template - Schritt für Schritt - Teil 2 - Layout

“Zeichne zuerst und entwickle erst später. Dies spart nicht nur Zeit sondern auch Ärger”

Wer seine Idee vom geplanten Template zuerst auf ein Blatt Papier zeichnet spart sich Zeit und Ärger. Zum einen können Striche wieder wegradiert werden, zum anderen kann so das Bild von der geplanten Seite überall schnell und einfach dagestellt werden.

Schritt 1 - Wie stelle ich ein solches Template dar, bzw. wie zeichne ich es

Beim Zeichnen sind euch natürlich keine Grenzen gesetzt. Ihr könnt einfach ein Bild von der Webseite zeichnen, wie sie nach der Erstellung des Templates aussehen soll. Was es euch einfacher macht ist, wenn ihr berücksichtigt wie man ein solches Template später umsetzen kann. Grundsätzlich besteht jedes Template aus einer Struktur von Elementen. Dabei möchte ich auf zwei verschiedene Arten von Strukturen für Templates eingehen:

  • 960 Grid System Wieso 960 ? Es wird davon ausgegangen das 960px die best möglichste Breite ist, für die Anzeige einer Webseite. Eine Einführung und ein Tutorial, das euch hilft einen Überblick zu bekommen und die Anwendung dieses Systems zu verstehen findet ihr unter http://blog.florenz.co.uk/tutorial/960-gridsystem-einfuehrung-tutorial-anleitung/.
  • Spalten / Box Layout Ihr stellt euch euer geplantes Template als Seite mit Spalten und Boxen vor. Z.B. könnt ihr eine Box als Header über die gesamte Seite haben, dann darunter befinden sich zwei Spalten, eine für Content und eine für die Sidebar. Ihr überlegt euch also die Struktur eurer Seite, was es später vereinfacht das Template zu erstellen. Yaml ist ein Framework mit dessen Hilfe ein flexibles Layout auf Basis einer float-Umgebung erstellt werden kann. Yaml verwendet dabei Boxen und Spalten und bietet einen riesigen Baukasten an. In einer ausführlichen Dokumentation wird erklärt wie Yaml verwendet und eingesetzt werden kann. Durch die vorhandenen Bausteine, kann man sich so schnell und einfach eine Struktur für eine Webseite bauen. Layout Beispiele von Yaml findet ihr unter http://www.yaml.de/fileadmin/examples/index.html und mit dem Yaml Builder, könnt ihr euch ein Layout durch klicken zusammenbauen. Bitte beachtet: Solltet ihr das Framework verwenden, ist zur kostenlosen Nutzung eine Rückverlinkung in der Fußzeile oder im Impressum nötig. Mehr zur nicht kommerziellen und kommerziellen Verwendung des Frameworks findet ihr unter Yaml Lizenz.

Schritt 2 - Das geplante Template zeichnen

  • Ich habe mit diesem Schritt immer gute Erfahrung gemacht, so konnte ich schnell erkennen ob das Bild was ich mir vorstelle auf Papier überhaupt gut aussieht. Ein Template kann man natürlich auch ohne Zeichnung auf einem Papier erstellen.
  • Danach geht es darum, den Entwurf zu digitalisieren. Dies ist nur der Fall, wenn ihr den Entwurf verfeinern wollt oder / und ihn anderen Person präsentieren wollt.

  • Bildbearbeitung Eine Möglichkeit ist es, das geplante Template durch mehrere Bilder mit einem Bildbearbeitungsprogramm zu erstellen. Meiner Meinung nach ist das aber viel Arbeit und besonders im privaten Bereich in der Betrachtung von Zeit/Ergebnis nicht sinnvoll.

  • Wireframe oder Mock-Up Programme Mit diesen Programmen ist es möglich Prototypen von GUIs oder Webseiten zu erstellen. Meisten sind eine große Reihe an HTML-Elementen vorhanden, die man einfach als Bilder an die gewünschte Stelle verschieben kann. Damit müsst ihr die HTML-Elemente wie in der Bildbearbeitung nicht selber erstellen.Pencil ist ein solches Programm, welches kostenlos ist und als Plugin für Firefox existiert. Daneben existiert aber auch eine Standalone Version.

Schritt 3 - Das geplante Template als HTML umsetzen

An diesem Punkt wisst ihr wie eure Webseite aussehen soll und habt entweder eine Zeichnung oder eine Grafik von eurem Layout. Um nicht vom Ziel abzuweichen, solltet ihr bei diesem Schritt eure Zeichnung oder Grafik immer wieder mit dem Umgesetzten vergleichen. Damit verhindert ihr, dass eure Umsetzung sich zu weit von eurem Entwurf entfernt. Bevor jetzt aus dem Entwurf ein Template mit PHP-Dateien wird, solltet ihr den Entwurf zuerst als eine einzige HTML-Seite umsetzen. Falls ihr unterschiedliche Seiten - was auch die Struktur angeht - für Startseite und z.B. Kategorieseite habt dann wäre es am besten für jede eine HTML-Seite umzusetzen. Der Vorteil bei einer HTML-Seite ist in diesem Fall, falls euch die Seite von der Struktur nicht gefällt, könnt ihr schnell und einfach die Struktur ändern. Wenn ihr das Layout schon auf die einzelnen WP Template Dateien verteilt habt, wird es deutlich schwieriger das Layout zu ändern. Zudem befindet sich dann evtl. schon PHP Code in den Seiten, wodurch das Editieren noch aufwendiger wird. Solltet ihr euch entschieden haben Yaml einzusetzen und z.B. eines der Standard-Layouts eurem Entwurf grob entspricht, dann könnt ihr auch einfach dieses verwenden und entsprechend anpassen. An diesem Punkt ist jetzt ein Entwurf vorhanden und eine Umsetzung davon als HTML Seite. Es ist klar, dass der Entwurf und die Umsetzung auch voneinander abweichen können. Zum Beispiel könnte ein bestimmter Teil aus dem Entwurf nicht realisiert werden, wodurch sich die Umsetzung im Aussehen natürlich verändert. Aber durch das Prüfen des Entwurfes mit der Umsetzung während man bei der Umsetzung ist, geht man sicher das am Ende nicht ein Apfel raus kommt, wenn eine Birne entworfen wurde.