Ein WordPress-Theme auf Yaml-Basis

Kein Beitragsbild

von Jochen Bauer

Zwei, drei oder doch vier Spalten – das ist die Frage. Oder man nutzt ein WordPress-Theme mit Yaml-Layout und hält sich die Optionen für immer offen. Mit Yaml ändert man rund drei Zeilen Code und erhält ein neues, fertiges Layout – andere Spaltenzahl, andere Navigation, anderes Menü… Fertig bedeutet in diesem Fall auch barrierearm und standardkonform.

Mit Yaml – "yet another multicolumn layout" – einem Mehrspaltengerüst, baut man seine Seiten nach dem Top-Down-Prinzip. Ich schildere den Bau eines WordPress-Themes auf Yaml-Basis. Das fertige Theme gibt es auch zum Download. Und spätestens mit diesem Artikel wissen Sie, an welchen Schrauben zu drehen ist.

Yaml
Seit 2005 schraubt Dirk Jesse fortlaufend an Yaml. Yaml ist ein OpenSource-Projekt mit verschiedenen Lizenzmodellen und damit ebenso für den kommerziellen Einsatz interessant. Das Framework ist sehr gut dokumentiert, ein Buch und eine rund 120-seitige Onlinedoku existieren. Aktuell ist die Version 3.0.x und seit kurzem ist das Framework auch für den englischen Sprachraum interessant. Doku und Projektdateien wurden übersetzt und erweitert. Vor einiger Zeit erschien der Yaml-Builder. Man klickt seine Wunschstruktur zusammen und lässt sich den XHTML-Code und die CSS-Anpassungen ausspucken. Yaml-Vorlagen gibt es bereits für diverse Systeme wie Typo3, xtCommerce, Drupal und viele andere.

Ausgangstheme
Wordpress, oft die bevorzugte Blogsoftware, soll nun mit einem Yaml-Layout ans Laufen gebracht werden. Auf der Webseite zum Buch "Wordpress" (Bültge, 2007) holen wir uns eine leere Themenvorlage (Version 1.2). Diese Vorlage beinhaltet die notwendigen WordPress-Funktionen und wir verpassen ihr die Yaml-Struktur. Sowohl WordPress als auch Yaml sind sehr flexibel, daher ist der beschriebene Weg ein sinnvoller, nicht aber der einzige, zur WordPress-Yaml-Hochzeit.

Struktur auf dem Server
Nachdem wir Yaml und das Leertheme heruntergeladen und entpackt haben, kopieren wir den Ordner "yaml" ins Ausgangstheme, legen auf gleicher Ebene den Ordner "css" an. Danach kopieren wir in diesen Ordner alle Dateien, an welche wir Hand anlegen. Folglich wechseln wir bei einem Yaml-Update, einfach den "yaml"-Ordner aus und behalten unsere Änderungsdateien bei. Die entstandene Struktur sollte so aussehen:

Screenshot

Yaml im Detail
Im "yaml/core"-Ordner liegen die Kern-CSS-Dateien des Frameworks. Diese zeichnen das Basislayout aus. Bei den Slim-Varianten der Stylesheets fehlen lediglich die Kommentare und so eignen sie sich besser für den Produktiveinsatz. Der Ordner "yaml/screen" enthält die Entwürfe fürs Bildschirmlayout. Diesen Ordner kopieren wir in den von uns angelegten Ordner "css". Wir benennen die Dateien um – bei dieser Gelegenheit streichen wir das "_draft".

E-Book Effektives Online Marketing von Andreas Hecht

E-Book: Effektives Online Marketing

Entdecke die Power des perfekten Online-Marketings für deine Website. Du erfährst neue Techniken, die deine Website automatisch besser ranken lassen und die dir nach und nach einen Expertenstatus verleihen werden. [...]

Die so geschaffene "basemod.css" und "content.css" sind unsere Baustelle – hier legen wir Hand an und drehen uns das Framework zurecht. Auf der höchsten Ebene liegen noch die beiden Dateien "central_draft.css" und "markup_draft.html". Die Centraldraft besteht lediglich aus einer Anweisung, die anderen CSS-Dateien zu importieren. In der Markupdraft steht der XHTML-Quelltext. Den Inhalt dieser beiden Dateien brauchen wir später. Läuft alles glatt, holt sich das Zentralstylesheet erst die "base.css" und dann die "navigation.css" aus dem yaml-Ordner, dann die "basemod.css" und die "content.css" aus unserem CSS-Ordner. Da unsere beiden Dateien nach den Basis-Sheets eingebunden werden, überschreiben unsere Anweisungen die Vorhandenen und so zeigen unsere Änderungen auch die beabsichtigte Wirkung.

Umsetzung
Im Ausgangstheme öffnen wir die "style.css" und ersetzen den Inhalt durch den Inhalt der "central_draft.css" von Yaml. WordPress ruft also seine "style.css" auf. Diese enthält aber den Inhalt des Yaml-Zentralstylesheets, welches die anderen Yaml-Stylesheets importiert.

Nun sammeln wir die Inhalte der "header.php", der "index.php", der "sidebar.php" und der "footer.php" in der "header.php". Wir kopieren anschließend die Yaml-Struktur der "markup_draft.html" ans untere Ende. Jetzt können wir recht übersichtlich die WordPress-Struktur und die Yaml-Struktur in der "header.php" vereinen.

Folgende Vorgehensweise hat sich für mich empfohlen: Für den Headbereich baue ich die Yaml-Struktur ins Ausgangstheme. Für den Bodybereich setze ich die notwendigen WordPress-Funktionen in die Yaml-Strutur. Alles Überflüssige lösche ich. Am Ende gliedere ich die so entstandene "header.php" wieder auf, in die "index.php", die "footer,php" und die "sidebar.php". Anschließend sollte das Yaml-Layout mit WordPress laufen und man kann in die "basemod.css" und "content.css" die Änderungen eintragen. Das auf diese Weise entstandene Theme nennt sich blitzblank und kann gern heruntergeladen werden.

Sortiert nach:   neueste | älteste | beste Bewertung
trackback

[…] einen interessanten Artikel für alle WordPress-Entwickler: man hat erfolgreich versucht, ein WordPress-Theme auf Yaml-Basis zu entwickeln, wobei Yaml ein interessantes und gut dokumentiertes Grundgerüst für flexible […]

trackback

[…] Solutions | Juergens » Blog Archiv » WordPress einrichten bei Blitzblank WordPress-ThemeEin WordPress-Theme auf Yaml-Basis | Software, Webmaster bei Blitzblank WordPress-ThemeDieter bei Blitzblank WordPress-ThemeJochen Bauer bei RTL sucht das […]

Robert
Gast

Die Idee von Tutorials um Themes zu portieren finde ich toll. Evtl könnte es bei Dr. Web mal ein Serendipityspecial geben ? (Ich weiss WordPress ist weitaus größer, aber technisch gesehen ist Serendipity top und mehr Themes helfen meiner Meinung nach stark bei der Verbreitung)

Dieter
Gast

Ich habe das YAML-Theme Blitzblank im Einsatz. Wenn man sich nur etwas mit XHTML und CSS sowie WordPress und YAML auskennt, kann man damit in der Tat fast jedes beliebige Spalten-Layout erschaffen. So habe selbst ich mit meinen minimalen Kenntnissen es geschafft, das Layout des Blogs passend zur Website zur gestalten (neudeutsch: Corporate Design).

Kurz: Das Blitzblank-Theme ist für mich die geniale Ergänzung zu WordPress und meine Empfehlung für die Gestaltung individueller Layouts.

trackback

[…] einfach, unsere Ansprüche sollten bekannt sein. Heute Morgen schaute ich bei Dr. Web vorbei – perfekt war mein erster Gedanke. Genau sowas in der Art hatten wir […]

trackback

WordPress Theme mit YAML…

Jochen Bauer stellt ein WordPress Theme mit dem Namen biltzblank zur Verfügung, welches er mit dem Framework YAML von Dirk Jesse erstellt hat. Ich finde es ist ein interessanter Ansatz HTML/CSS-Frameworks für WordPress zu verwenden. Ich habe …

trackback

[…] genau an diesem Tag veröffentlichte Jochen Bauer einen Gastbeitrag zu seinem WordPress-Theme auf YAML-Basis im Blog von Dr. Web. Sehr lesenswert um das Zusammenspiel von YAML mit WordPress anhand seines […]

blogfeuer
Gast

Viel zu kurzer Beitrag. Du hörst quasi in der Einleitung auf!

Jochen
Gast

Servus blogfeuer,

das stimmt, man könnte noch mehr darüber schreiben, aber alles nach der Einleitung ist sehr individuell.

Es gibt mitlerweile schon die Version 2 von blitzblank. Im zugehörigen Beitrag, stehen noch einige Gedanken zur weiteren Themegestaltung.

Siehe: http://blog.jochen-bauer.net/2008/03/28/blitzblank-2-wordpress-theme/2/

Und wenn es ans CSS des Frameworks geht, da gibt es eh kaum Grenzen und ein Blick in die YAML-Doku ist unausweichlich.

Viel Erfolg.

trackback

[…] {via Dr. Web Weblog} […]

Tobias Weisserth
Gast

YAML ist mitnichten Open Source. YAML steht unter der Creative Commons Attribution 2.0 License (CC-A 2.0). Das ist keine Open Source Lizenz, was man scho daran erkennt, dass diese Creative Commons den kommerziellen Einsatz nur unter Zahlung einer Lizenzgebühr erlaubt, was so unter einer Open Source Lizenz nicht möglich wäre. Ausserdem sind modifizierte Wiederveröffentlichungen ebenfalls ausgeschlossen.

Bitte zieht YAML nicht den Open Source Schuh an. Der passt nicht.

Alexander
Gast

ich nutze nur die standard wp themes!

Peter Hadorn
Gast

Hier gibt’s ein neues Gratis Starter Theme, das die aktuellen Versionen von WordPres und YAML (mit Sass) unterstützt:

http://www.hadornag.ch/wpYAML/?lang=de

wpDiscuz