Eigenes WordPress Theme mit YAML erstellen – Teil 3

Im dritten Teil meines Tutorials möchte ich euch nun zeigen, wie man die erstellte Designskizze (Mockup) in YAML umsetzt. Damit man diesen Teil direkt mit machen kann, wäre es sinnvoll, eine entsprechende Testumgebung zu haben.

Testumgebung aufsetzen

Dafür möchte ich auf einen Artikel verweisen, den ich vor ca. 1 Jahr veröffentlicht habe. Hier hatte ich beschrieben, wie man eine WordPress Testversion auf  einem USB Stick erstellt (geht natürlich auch auf der Festplatte 😉 ). Ich werde für mein Tutorial die WordPress Version 2.9.1 verwenden.

Damit ich einige Artikel in meinem Tutorial Blog habe, nutze ich die WordPress eigene Export/Import-Funktion. Damit gelangen alle Artikel und Bilder von meinem Golfblog auf meine lokale Version (beim Import „Anhänge“ anklicken). Die Plugins lasse ich erstmal komplett außen vor. So kann ich quasi mit einem „sauberen“ Blog starten. Im Laufe des Tutorials werden wir dann sicherlich auch ein paar interessante Plugins einbauen.

WP Theme Verzeichnis

WP Theme Verzeichnis

Nun fehlen noch die benötigten YAML-Dateien. Diese laden wir uns von der YAML-Seite. Hier gibt es eine sehr schöne Ausgangsbasis für ein neues YAML Projekt, das „Simple Project“. Ladet euch das zip-File runter und entpackt es in dem Verzeichnis, wo die WordPress Themes liegen (../tutorial/wp-content/themes).

Tutorial Verzeichnis mit YAML Projektstruktur

Tutorial Verzeichnis mit YAML Projektstruktur

Lest euch bitte auch noch die 5 Regeln auf der YAML-Seite und die Empfehlung für die Projektstruktur durch. Das „Simple Project“ entspricht dieser Projektstruktur bereits, so dass wir direkt damit arbeiten können. Das Theme Verzeichnis und das Unterverzeichnis „Tutorial“ sollten jetzt bei euch so aussehen, wie auf den Bildern.

Zum Abschluß benennen wir nun noch die Datei „my_layout.html“ in „index.php“ um und verschieben diese in den Ordner „css“. Im Unterverzeichnis „css“ ändern wir die Datei „my_layout.css“ in „style.css“ um. Damit haben wir die Dateien so genannt, wie es bei WordPress üblich ist.

Wenden wir uns nun zunächst der Strukturierung des Design zu.

Designskizze in Bereiche strukturieren

Mockup der neues Startseite

Mockup der neues Startseite

Im letzten Teil des Tutorials haben wir mit Balsamiq eine Designskizze erstellt. Basis unseres heutigen Tutorials ist zunächst das Design für die Startseite. Diese muss nun in einzelne Bereiche aufgeteilt und in die YAML Strukturen überführt werden.

Schauen wir uns dazu nochmals die skizzierte Startseite an. Die Struktur meines Beispiels ist eigentlich recht einfach zu definieren. Klar dürfte sein, dass wir dort eine Sidebar auf der rechten Seite haben  und eine Fußzeile am Ende der Seite. Dann haben wir den Hauptbereich mit den Artikeln.

Schließlich haben wir noch den Headerbereich mit einem Menü. Zunächst hatte ich gedacht, den Bereich des Werbebanners auch im Header unter zu bringen. Dann habe ich mir aber überlegt, dass dieser Bereich zukünftig auch noch andere Informationen enthalten kann und deshalb in einem eigenen Bereich untergebracht werden sollte.

Die Aufteilung ist auch unter dem Gesichtspunkt, dass dieser Bereich auf anderen Seiten, wie zum Beispiel der Artikelanzeige oder einem Archiv, anders aussehen könnte. Was immer gleich bleiben wird, ist der Bereich mit dem Headerbild und dem Menü.

Somit haben wir in der Designskizze 5 Bereiche definiert, die es nun gilt in die YAML Struktur zu integrieren. Die Bereiche sind:

Sidebar Bereich

Sidebar Bereich

Header Bereich

Header Bereich

Teaser Bereich

Teaser Bereich

Content Bereich

Content Bereich

Footer - Bereich

Footer - Bereich

Designbereiche in YAML integrieren

Yaml Container aus der Projektvorlage "Simple Project"

Yaml Container aus der Projektvorlage "Simple Project"

Nun wird es das erste Mal ein wenig Spannend. Wie bilden wir jetzt die definierten Bereich in YAML ein. Dazu sollte man sich nochmals vor Augen führen, dass YAML ein absolut flexibles Framework ist, welches auf einer „Spaltentechnik“ aufbaut. Die komplette Seite wird quasi innerhalb der Container „page_margin“ bzw. „page“ abgebildet.

Eine weitere Basis des Frameworks bilden drei „Content“-Bereiche. Sie werden gebildet aus den Containern „col1“, „col2“ und „col3“. Zusätzlich gibt es noch die Basiscontainer „Header“ und „Footer“. Im Verzeichnis „css/screen“ findet ihr die Datei „basemod.php“ der Simple Project Vorlage. Dort sind diese Container definiert.

In der Projektvorlage sind die Container in der Reihenfolge „col1“, „col3“, „col2“ formatiert. Die mittlere Spalte bildet also der Container 3 und dieser ist in der Breite flexibel.

Die richtigen Container für unser Design finden

Wie passen nun unsere Bereiche in die dafür vorgesehenen Container? Die Zuordnung des Header- und Footer-Bereich ist simpel, da es diese Bereich auch bei YAML schon gibt. Nun haben wir also noch drei Container übrig. Ein kleiner SEO-Hinweis noch vorab. Man sollte immer darauf achten, dass der eigentliche Content im HTML-Code so weit oben steht, wie möglich.

Bezogen auf das YAML Framework bedeutet dies, dass man den Content idealerweise immer in „col1“ platziert, da die Anordnung der Container ihrer Nummerierung entspricht.

Nachdem Header und Footer zugeordnet sind könnten wir unseren Content-Bereich also in „col1“ platzieren. Nun haben wir noch 2 Container übrig, deren Anordnung aber etwas schwierig werden könnte. Wir könnten unseren Teaser-Bereich in „col2“ und die Sidebar in „col3“ einbauen.

Yaml Container Einstellungen für unser Design

Yaml Container Einstellungen für unser Design

Damit haben wir aber ein Problem, was die Anordnung unseres Teaserbereichs angeht. Dieser soll ja zwischen Header und Contentbereich liegen. Die „col2“ mit entsprechenden CSS-Formatierungen dorthin zu bekommen ist nicht so einfach möglich. Also müssen wir uns noch etwas anderes überlegen.

Grundsätzlich gibt es zwei Lösungsalternativen. Wir verwenden „col2“ gar nicht und blenden diese aus. Nun können wir einen zusätzlichen DIV-Container definieren, nennen diesen „teaser“ und nutzen ihn für unseren Teaserbereich. Die andere Variante, für die ich mich entschieden habe, ist es, den Inhalt von „col1“ und „col2“ zu tauschen.

Da wir für mein Design nur 2 Spalten benötigen kann ich nun auch „col1“ für den Teaser-Bereich verwenden und „col2“ für den Content-Bereich. Die entsprechenden Einstellungen sind auf dem linken Bild zusehen. Ändert einfach die Einträge in der Datei „basemod.css“, die im Verzeichnis „screen“ liegt, entsprechend.

WordPress Template Dateien anlegen

Nun sind wir nur noch wenige Schritte von dem ersten Aufruf unseres Blogs mit dem neuen Basislayout entfernt. Wir müssen nun die richtigen Template Dateien für unser WordPress Theme erstellen.

Als erstes müssen wir ein paar Kommentarzeilen in die style.css Datei eintragen, damit WordPress unser Theme auch erkennt und die Infos in der Adminoberfläche anzeigt. Die dargestellten Kommentarzeilen einfach in der Datei style.css in den oberen Kommentar rein schreiben. Natürlich könnt ihr unnötige Zeilen aus der YAML Projektvorgabe entfernen.

* Theme Name: WordPress Tutorial
* Description: WordPress theme based on YAML
* Version: 0.1
* Author: Juergen Allmich
* Tags: variable width, two columns, widgets

Nun erstellen wir die benötigten Dateien für WordPress und schreiben dort den Code hinein. Beginnen wir mit der Header Datei. Der einfachste Weg, diese Datei zu erstellen, ist die Datei „index.php“ als Basis zu nutzen.

Wir editieren also die Datei index.php und speichern diese unter dem Namen „header.php“ ab. Nun löschen wir alle Zeilen ab der Zeile „begin: main content area #main“. Weiterhin ändern wir noch den Aufruf der Stylesheet Datei, die wir ja nach „style.css“ umbenannt haben. In Zeile 10 müsste der Eintrag „css/my_layout.css“ zu finden sein. Hier muss nun die WordPressfunktion „bloginfo(’stylesheet_url‘)“ integriert werden, damit das richtige Stylesheet gefunden wird. Die Zeile sollte also nach der Änderung wie folgt aussehen:

<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css"/>

Nun erstellen wir die Footer Datei. Auch hier nutzen wir wieder die bestehende Datei „index.php“. Jetzt löschen wir alles von der ersten Zeile bis zur Zeile “ end: #col3 “ und speichern das Ergebnis als „footer.php“.

Bevor wir dann die Index Datei für den eigentlichen Content Bereich anpassen, nutzen wir sie noch ein letztes Mal für die Erstellung der Datei „sidebar.php“. Jetzt wird von der ersten Zeile der Datei alles bis zur Zeile “ begin: #col3 static column “ gelöscht und von Zeile “ end: #col3 “ bis zum Ende gelöscht. Die angebenen Zeilen mit den Kommentaren sollte man möglichst nicht mit löschen. Es bleibt als der Container „col3“ übrig. Die so entstandene Datei speichern wir als „sidebar.php“.

Nun ist es fast vollbracht. Jetzt können wir die „index.php“ selbst bearbeiten. Zunächst löschen wir alles von Zeile 1 bis zur Zeile “ end: main navigation “ und von Zeile “ begin: #col3 static column “ bis zum Ende. Was jetzt noch fehlt ist der Aufruf der Templatedateien „header.php“, „footer.php“ und „sidebar.php“, die wit gerade erstellt haben. Hierfür gibt es entsprechende Funktionen von WordPress, die wir nun noch in die „index.php“ eintragen. An den Anfang der „index.php“ kommt folgender Code:

<?php get_header(); ?>

Und an das Ende der Datei setzen wir folgende Aufrufe:

<?php
get_sidebar();
get_footer();
?>; 

Preview des erstellten Theme

Nun ist es fast vollbracht. Jetzt können wir schon mal in dem Adminbereich von WordPress zu den Themes wechseln und uns die Preview des Themes ansehen. Wenn alles richtig gemacht wurde, sollte die Vorschau so aussehen:

Theme Preview

Theme Preview

Eigentlich sieht das Theme ja schon ganz gut aus. Erinnern wir uns aber an unsere Design Skizze, dann haben wir noch ein Problem zu beheben. Die Sidebar soll direkt am oberen Rand beginnen. Hierfür müssen wir noch ein paar Änderungen in den Dateien vornehmen. Da das Tutorial aber schon deutlich länger geworden ist, als geplant, verschieben wird diese Anpassungen auf den nächsten Teil. Dann werden wir auch die sogenannte „Loop“ einbauen, die dafür sorgt, dass unsere Artikel angezeigt werden.

Ich hoffe, dass ich heute nicht zu viele abgehängt habe mit dem ganzen Löschen und einfügen von irgendwelchen Codezeilen. Damit es etwas einfacher ist, habe ich noch eine zip-Datei eingefügt, in der alle Dateien enthalten sind, die wir heute erstellt haben. Schaut euch diese Dateien, die ins Verzeichnis „css“ gehören, einfach nochmal in Ruhe an.

Fragen sind jederzeit Willkommen. Und denkt auch nochmals an meine Bloggeraktion, wenn ihr ein eigenes Design habt, was ihr gerne umgesetzt haben wollt.

[ad#SmartShoppingAds]

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Why ask?

x

Check Also

Eigenes WordPress Theme mit YAML erstellen – Teil 4

Nachdem wir im letzten Teil des Tutorials unsere Designskizze in die YAML-Struktur übertragen hatten, kommt ...