Gastautor 15. Oktober 2007

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".

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.

13 Kommentare

  1. 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

  2. ich nutze nur die standard wp themes!

  3. 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.

  4. 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.

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

  6. 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.

  7. 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)

Tut uns leid, aber die Kommentare sind geschlossen...

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Cookies

Weitere Informationen zu den Auswahlmöglichkeiten findest du hier. Dazu musst du zunächst keine Auswahl treffen!

Um Dr. Web zu besuchen, musst du eine Auswahl treffen.

Deine Auswahl wurde gespeichert!

Informationen zu den Auswahlmöglichkeiten

Was du erlaubst!

Um fortfahren zu können, musst du eine Auswahl treffen. Nachfolgend erhältst du eine Erläuterung der verschiedenen Optionen und ihrer Bedeutung.

  • Ich stimme zu:
    Du erlaubst uns das Setzen aller Cookies, die wir in unseren Datenschutzhinweisen genannt haben. Dazu gehören Tracking- und Statistik-Cookies. Aus dem Tracking per Google Analytics bieten wir auf der Seite Datenschutz ein Opt-Out, also die Möglichkeit der Abmeldung, an.
  • Ich stimme nicht zu:
    Wir verzichten bei dieser Option auf den Einsatz von Google Analytics. Die für den Betrieb von Dr. Web notwendigen Cookies werden aber dennoch gesetzt. Einzelheiten entnimmst du bitte den Datenschutzhinweisen

Du kannst deine Cookie-Einstellungen jederzeit hier ändern: Datenschutz. Impressum

Zurück