Eigenes WordPress Theme mit YAML erstellen

Wie bereits angekündigt möchte ich die Umgestaltung meines Golfblogs mit einer kleinen Artikelserie begleiten. Ich werde versuchen, jeden einzelnen Schritt in loser Reihenfolge zu kommentieren. Ziel ist es, zu beschreiben, wie man an ein neues Layout für einen Blog gelangt und dabei das CSS Framework YAML nutzt.

In der Regel beginnt dies damit, sich Gedanken zu machen, wie der Blog gestaltet werden soll. Welches Grundlayout möchte man verwenden, welche Informationen sollen dargestellt und wie sollen diese Informationen angeordnet werden. Ein Thema, mit dem ich mich persönlich immer besonders schwer tue, betrifft dann die Farbgestaltung des Blogs. Schließlich geht es dann an die Umsetzung eines konkreten WordPress Themes und die Integration von WordPress Plugins und weiteren Funktionen.

Da ich ein großer Fan des CSS Framework „YAML“ bin, werde ich dieses Framework als Basis für die Entwicklung des WordPress Themes nutzen. Für eine erste Skizze meines Layouts habe ich mir diverse Mockup-Tools angesehen und mich entschieden, dass Programm „Balsamiq“ zu verwenden. Diese Tools dienen dazu, eine erste Anordnung von Seitenelementen zu skizzieren und ersetzen quasi die erste Zeichnung mit Papier und Bleistift.

In der Artikelreihe werde ich in erster Linie auf die Nutzung von YAML und die Erläuterung der Theme Entwicklung mit WordPress eingehen. An Hand des praktischen Beispiel meines Golfblogs werde ich schrittweise erläutern, wie ich die einzelnen Komponenten umgesetzt habe.

Die Artikelserie soll kein ausführlicher Workshop zu den Themen YAML und WordPress Themes werden. Dafür sind diese Themen einfach zu komplex. Ziel soll es aber schon sein, dass man mit Hilfe meiner Artikelreihe in die Lage versetzt wird, ein eigenes WordPress Theme zu erstellen. Idealerweise hat man bereits Erfahrungen mit der Webentwicklung und kennt sich ein wenig mit CSS aus.

Da ich versuche, die Artikel parallel zu den tatsächlichen Umstellungsaktivitäten zu erstellen, wird es keine festen Zeiträume geben, wann ein neuer Artikel zu der Serie erscheinen wird. Auch die genauen Inhalte von jedem Artikel stehen daher noch nicht fest. Als kleine Einleitung werde ich nun noch kurz YAML und WordPress Themes ein wenig erläutern.

Was ist YAML ?

Die Basis des heutigen YAML in der aktuellen Version 3.2.1 wurde von Dirk Jesse im März 2005 entwickelt. YAML steht für „Yet Another Multicolumn Layout“. Dirk Jesse beschreibt YAML auf seiner Webseite wie folgt:

YAML ist ein (X)HTML/CSS Framework zur Erstellung moderner, flexibler Layouts auf Grundlage von float-Umgebungen. Dabei stehen ein Höchstmaß an Flexibilität für den Webdesigner und Zugänglichkeit für die Nutzer im Vordergrund.

• Basierend auf Webstandards
• Ausgerichtet auf zugängliche Webseiten
• Robustes, flexibles Layoutkonzept
• Modularer Aufbau, anwenderorienterte Funktionaliät
• Umfassende, mehrsprachige Dokumentation

Seit einiger Zeit existiert zu diesem Framework, welches im Prinzip aus diversen CSS-Dateien besteht, auch ein Generator zur Erzeugung von Basislayouts und dem entsprechenden Source Code in Form von HTML- und CSS-Dateien. Wer etwas tiefer in YAML einsteigen möchte, dem kann ich auch das ausgezeichnete Buch „CSS-Layouts – Praxislösungen mit YAML“ sehr empfehlen.

Was ist ein WordPress Theme ?

Damit die Fragen zu Beginn alle geklärt sind, kommen nun noch ein paar kurze Infos zu WordPress Themes. Als Theme wird in WordPress quasi das gesamte Layout bezeichnet, in der der Blog dargestellt wird. Hierzu gehören die verwendeten CSS-Dateien sowie alle Template Dateien. Womit wir auch gleich beim nächsten Begriff sind.

Beide schmeißt man gerne mal durcheinander. Ein Template ist ein Ausschnitt bzw. eine Komponente eines Themes und bildet das Musteraussehen eines bestimmten Bereichs. Jedes WordPress Theme hat mindestens zwei Dateien. Die Datei „style.css“ und die Template-Datei „index.php„. In der Datei „style.css“ sind alle CSS-Formatierungen untergebracht und in der „index.php“ wird das Layout der Seite beschrieben.

Normalerweise gibt es aber noch mehr Template Dateien. So werden mindestens die Templates „header.php“, „footer.php“ und „sidebar.php“ verwendet. Aber auch „post.php“ oder „comment.php“ sind häufig zu finden. Ich denke, die Namen der Dateien sagen genug aus, wofür die jeweiligen Template-Dateien zuständig sind. In den folgenden Teilen der Serie gehe noch etwas detaillierter auf die Strukturierung von WordPress Themes ein.

Eine besondere Rolle spielt auch noch die Datei „functions.php“. Hier werden die Theme spezifischen Funktionen hinterlegt. So ist hier zum Beispiel häufig der Funktionsaufruf zur Definition der Sidebar als widgetable zu finden.

Weitere wichtige Komponenten eine WordPress Themes sind die sogenannten Template Tags. Sie dienen dazu, dynamische Informationen eines Blogs anzuzeigen. Mit dem Template Tag „the_title“ wird zum Beispiel der Titel eines Blogartikels ausgegeben. Über Parameter kann die Ausgabe der jeweiligen Infos noch gesteuert werden. Eine Übersicht über alle Template Tags von WordPress findet man u.a. auf den CODEX Seiten von WordPress. Auf diesen Seiten findet man auch umfangreiche Infos zu Erstellung bzw. Verwendung von Themes.

Im nächsten Artikel dieses Tutorials geht es dann los mit den ersten Ideen zur Gestaltung des Golfblogs und der Verwendung des Mockup Tools „Balsamiq„.

[ad]