YAML 3 mit Wordpress

29. July 2007

Das YAML-Framework ist ein Open-Source-Projekt von Dirk Jesse und wird seit der Veröffentlichung im Oktober 2005 kontinuierlich weiterentwickelt. In der Version 3.x bringt die neue Version zahlreiche Verbesserungen und auch einige Veränderungen mit sich.

Vor diesem Hintergrund habe ich ein persönliches WordPress-Theme unter dem Namen Simplex (Version 1.0) auf die neue YAML-Version angepasst. Es wurde für die Version WordPress 2.1x und YAML 3.03 entwickelt, sollte jedoch auch mit WordPress 2.3x lauffähig sein.

Wie es immer mit “Version 1.0 Dingen” ist, gibt es hierzu sicherlich auch Verbesserungsvorschläge. Damit eine individuelle Anpassung an eigene Bedürfnisse möglich ist, habe ich hier den Installationsvorgang und entsprechende Code-Passagen dokumentiert.

Achtung: Die jeweils aktuelle Version des auf diesem Weblog verwendeten WordPress-Theme finden Sie unter: http://www.andreaslezgus.de/blog/changelog

Baukasten und eingesetzte Komponenten:

WordPress:

Grundvoraussetzung für den Betrieb des Templates Simplex ist eine funktionsfähige WordPress Installation.
In der Regel ist hierzu ein Dienstanbieter (Provider) für das Unterbringen (Hosting) der Seiten erforderlich, der als Leistungsmerkmale mindestens die Erweiterungen PHP (Scriptsprache) und MySQL (Datenbank Dienst) bereitstellt.

Eine Installationsanleitung für WordPress finden Sie unter http://wordpress-deutschland.org/installation

YAML:

YAML basiert auf Webstandards und ist ein vielseitiges Werkzeug zur Erstellung flexibler, barrierearmer CSS-Layouts. Das YAML-Framework ist umfangreich dokumentiert und kann unter http://www.yaml.de abgerufen werden. Änderungen und neue Versionen von YAML können einfach mit dem Simplex-Theme eingesetzt werden. Hierzu ist lediglich die aktuellste YAML-Version in den entsprechenden Ordner des Theme-Verzeichnisses zu kopieren. So stehen neue Browseranpassungen oder Fehlerbehebungen schnell zur Verfügung.

Icons:

Das Simplex-Theme verwendet folgende freie Icons und Grafiken:

Toolbar Icons von Matt Ball
http://www.mattballdesign.com/portfolio/icons/devicons/devicons.zip

Aqua Gloss Icons von Deziner Folio
http://www.dezinerfolio.com/2007/02/25/free-aqua-gloss-icons/

Social Media Icons
http://www.e7graphics.net

Simplex-Theme 1.0:

Das mit diesem Weblog betriebene Template Simplex enthält in der Version 1.0 bereits alle erforderlichen Dateien (Icons und YAML 3.01), um eine Standardinstallation durchführen zu können.

Installation

Download-Paket kann hier heruntergeladen werden:
http://www.andreaslezgus.de/blog/downloads/simplex.zip

Eine Installationsbeschreibung ist hier zu finden:
http://www.andreaslezgus.de/blog/downloads/Simplex_Dokumentation.zip

Für einen reibungslosen Betrieb der Navigationsstrukturen sollte die WordPress-Installation benutzerfreundliche URL-Namenskonvetionen ermöglichen. Hierzu ist unter den sog. Permalink-Einstellungen die Optione “basierend auf Name und Datum” auszuwählen. Der Webserver / Hoster sollte dabei die sog. mod_rewrite() Option ermöglichen.

Zur Anpassung einzelner Navigationspunkte wie z.B. Kontakt, Abonnements, Datenschutz, etc. sind jeweils neue Seiten in WordPress anzulegen. Beim Anlegen der neuen Seiten sind wie in der Dokumentation aufgeführt, die mitgelieferten Templates auszuwählen, um eine entsprechende Verbindung zu erstellen.

Darüber hinaus können die in der Dokumentation aufgeführten WordPress-Plugins mit dem Simplex-Theme automatisch verwendet werden. Hierzu sind die einzelnen Plugins von den jeweiligen Autoren herunterzuladen und in WordPress unter dem Menüpunkt Plugins entsprechend zu aktivieren.

Weitere Plugins können ggfls. mit entsprechenden Anpassungen der einzelnen PHP-Seiten integriert werden.

Individuelle Anpassungen an dem Simplex-Theme:

Anpassen der Meta-Tags:

In der Datei header.php können die entsprechenden Meta-Informationen über das Weblog ergänzt werden. Bitte hierzu ab Zeile 26 die Änderungen vornehmen.

Anpassen der Teaserinformationen auf den einzelnen Seiten:

Auf jeder Seite befinden sich zu Beginn sog. Teaserinformationen, wie z.B. auf der Startseite der Bereich Willkommen mit entsprechendem Text und rechts daneben ein Zitat. Beispiele sind: index.php (Startseite) und contact.php (Kontaktseite).

Änderungen können in der jeweiligen PHP-Datei i.d.R. ab der Zeile 8 vorgenommen werden (#Beginn Willkommen-Teaser). Der linke Bereich befindet sich im sog. Block1 und das Zitat im Block2.

Anpassen der Sidebar (rechte Spalte des Blogs):

Hier können Sie ihre eigenen Projekte anpassen und Verweise auf besondere Seiten Ihres Blogs anzeigen lassen. Gehen Sie hierzu in die Zeile 40 und ändern Sie die entsprechenden Einträge.

Anpassen der individuellen Verweise auf Netzwerkdienste:

In der Fußzeile footer.php können Sie ihre eigenen Verweise auf Netzwerkdienste, wie z.b. flickr.com oder xing.com eintragen.

Bitte nehmen Sie die Änderungen zwischen Zeile 47 und 51 vor.

Anpassen einer benutzerspezifischen Tag-Cloud vom Bookmarkdienst del.icio.us:

In der Datei favoriten.php können Sie Ihre eigenen Verweis auf das Linkverzeichnis von del.icio.us angeben. Tragen Sie hierzu bitte die Angaben entsprechend in Zeile 34 ein.

Anpassen der Hintergrundfarbe und Seitenränder des Templates:

Im Simplex-Verzeichnis gehen Sie bitte hierzu in die wordpress.css Datei im unterverzeichnis /css. Dort finden Sie in Zeile 42 den entsprechenden Farbwert und den Verweis auf die Hintergrundgrafik.

Anpassen des Weblog-Logos:

Im Simplex-Verzeichnis gehen Sie bitte hierzu in die wordpress.css Datei im unterverzeichnis /css. Dort finden Sie in der Zeile 130 den entsprechenden Verweis auf die Hintegrundgrafik des Logos. Bitte erstellen Sie ein benutzerspezifisches Logo mit der Größe von 964 * 184 Pixel und binden es hier entsprechend ein.

Anpassungen von YAML:

Bitte entpacken Sie die jeweils aktuellste Version von YAML (www.yaml.de) in ein Verzeichnis und kopieren hieraus das Unterverzeichnis /yaml in das gleichnamige Unterverzeichnis im Simplex-Theme Verzeichnis. Weitere Änderungen sollten zunächst nicht erforderlich sein. Anpassungen die WordPress spezifisch vorgenommen wurden, finden Sie ausschliesslich im Unterverzeichnis /css und dort in der wordpress.css Datei.

Informationen zu älteren Simplex-Template Versionen und Kommentaren finden Sie unter:
http://www.andreaslezgus.de/blog/2006/10/07/wordpress-und-yaml-im-team/

Weitere allgemeine Informationen zum Aufbau von WordPress-Themes finden Sie unter:
http://www.perun.net/2007/07/30/wordpress-themes-verstehen-1

Anregungen und Verbesserungen sind herzlich willkommen.

Viel Spaß mit dem Simplex-Theme.

Andreas Lezgus

21 Kommentare • Schlagworte: Blog, Wordpress, YAML
Netzwerken hinzufügen: Twitter, Facebook, Delicious, Digg, Reddit

16 Kommentare zum Artikel

Niklas

29.07.2007

Hallo Andreas, ich habe das YAML-Projekt von Ihnen mit Respekt verfolgt und mich sehr auf die neueste Version gefreut. Leider ist der Link zur neuesten Simplex-Version nicht zu finden – über eine Korrektur würde ich mich sehr freuen.

Andreas

30.07.2007

Hallo Niklas,
mein Webhoster sortiert gerade seine Server neu und daher war gestern das Blog nur eingeschränkt erreichbar. Ich hoffe, dass es ab heute besser geht.

Theme:
http://www.andreaslezgus.de/blog/downloads/simplex.zip

Installationsbeschreibung:
http://www.andreaslezgus.de/blog/downloads/Simplex_Dokumentation.zip

Gruß

Andreas

Alexander

11.09.2007

Hallo, ich würde gerne die wordpress Permalinkstruktur /%category%/%postname%-%post_id%/ verwenden. Wäre dies auch möglich?

Andreas

11.09.2007

Hallo Alexander,

ja, es ist möglich. Entscheidend ist das Anlegen der in der Installationsbeschreibung aufgeführten ergänzenden Seiten (Impressum, Datenschutz, Kontakt, etc.), damit die grundsätzlichen Navigationselemente gefunden werden.

Viele Grüße

Andreas

Joachim Ott

13.10.2007

Hallo Andreas,

sehr schönes WordPress-Theme, Kompliment! Zu einem Punkt hätte ich eine Frage: Ich benutze Mac und meistens Safari. Die Hover-Effekte in der Navi rechts, die sonst vielleicht 3 Pixel Abstand zum Rand haben, ragen hier vielleicht 5 Pixel drüber raus. Und auch ohne Hover ragen schon alleine die weißen Begrenzungslinien um den gleichen Betrag nach rechts ins Graue.

Kann man das beheben? Ich bin leider nicht so fit mit CSS. Kann Dir gerne einen Screenshot schicken.

Viele Grüße, Joachim

Tracy

16.11.2007

Hello,

I have really enjoyed reading the translated version of your website and learning more about YAML. Is there an english version of the Simplex wordpress template and the Simplex documentation?

Thank you,

Tracy

Andreas

16.11.2007

Hello Tracy,

sorry, there is no english translation yet.
it’s a good idea for the next cold winter days in germany.

… you can reach the english yaml site here:
http://www.yaml.de/en/home.html

regards

Andrew

Jana

29.03.2008

Die verbesserte WordPressversion ist auf jeden Fall schon mal hilfreich. Und danke für die Tipps. Werde auf jeden Fall wieder vorbeischauen und mir Simplex genauer angucken.

Olli-F

17.04.2008

Hallo,

ich bin gerade dabei meine erste Site mit WordPress fertig zu stellen bzw. bin am Basteln ;-)… Ich kenne das Yaml aus Joomla heraus und wollte es (nach lesen auf der Yaml HP) auch für WordPress nutzen… denn die Vorteile liegen auf der Hand… Nun habe ich aber das Prob das ich noch nicht ganz durchsteige… Ich erstelle mittels Yaml Builder (http://builder.yaml.de/) die erforderlichen Dateien und habe sie in das Simplex Verzeichnis kopiert (erforderliche Ordner) aber wenn ich das Simplex Theme testweise hochlade…erfolgt keine Formatierung etc… Die CSS Dateien zum formatieren der Seit (grafiken etc.) sind nicht verändert worden… Nur die basemod.css, my_*grübeln*.css etc…

Würde mich über nen kleinen Tipp freuen!

Gruß
Olli

Andreas

17.04.2008

Hallo Olli,

grundsätzlich gibt es zwei Wege ein WordPress-Design mit YAML zu erstellen:

a) Übernahme eines vorbereiteten YAML/Wordpress Designs
b) individuelle Erstellung eines neuen Designs (erhöhter Anpassungsaufwand)

Zu a)

Die auf meinen Seiten angebotenen Vorlagen sind speziell vorbereitete Designvorlagen, die nicht einfach ohne Aufwand mit anderen Seitenaufteilungen (z.B. YAML-Builder Änderungen, 3-Spalten, etc.) zusammenarbeiten.
Der Einsatz funktioniert am Besten mit dem in der Installationsanleitung (http://www.andreaslezgus.de/blog/downloads/yamlwp_docu.zip) beschriebenen Vorgehensweise.
Sie verwenden speziell angepasste CSS-Dateien für das Layout. Der Verweis auf die jeweiligen CSS-Dateien und entsprechenden Pfade erfolgt in der Datei: yamlwp_central.css im Unterverzeichnis: css

Zu b)

Mit dem YAML-Builder oder der Standardprojektvorlage von Dirk Jesse erhält man ein Grundgerüst, welches dann jeweils individuell mit den entsprechenden WordPress-Befehlen und Layoutinformationen ergänzt werden müssen. Das grundsätzliche Vorgehen kann man auch in meinen Beispielvorlagen im Code nachvollziehen bzw. ggfls. Codebausteine in das eigene WP-Layout übernehmen.

Weitere Hinweise sind auch unter: http://www.andreaslezgus.de/blog/2007/11/17/wordpress-und-yaml-reloaded/

- WordPress-Themes verstehen oder
- WordPress Themes step by step

zu finden.

Viele Grüße

Andreas

Uhren Max

29.12.2008

an dieser stelle endlich mal vielen dank für die vielen hilfreichen tipps.
einen guten rutsch wünscht euch uhren-maxl

Paul H.

07.03.2009

hallo zusammen!

habe mich in letzter zeit auch sehr viel mit yaml 3, vor allem in foren, etc., auseinandergesetzt, weil ich vorhabe mir ein blog mit yaml 3 (wordpress) aufzusetzen. habe aber leider bisher in diesem bereich nicht sehr große kenntnisse. möchte mir gerne das yaml green theme nehmen (http://dynamicinternet.eu/wordpress/wordpress-themes/yaml-green-theme/) und weiß aber nicht, ob ich damit, mit den ganzen einstellungen wirklich zurechtkomme.

dazu sei festgehalten, dass ich in diesem bereich völliger anfänger bin und ich sozusagen einige tutorials brauchen würde, um das zu schaffen. kennt jemand einige hilfreiche links, die mir beim aufsetzen etc. helfen könnten?

damit wäre mir wirklich sehr geholfen. vielen lieben dank schonmal im voraus :)

gruß
paul

Dida

16.04.2009

Simplex ist echt gut gelungen. Großes Lob von mir.

Leider habe ich es noch nicht selbst hinbekommen ein WordPress-Design mit YAML zu erstellen. Etwas anpassen geht ja, aber wenn es tiefer rein geht, dann fehlt mir doch etwas das Know-How. Mich würde deswegen auch mal ein genaues Tutorial interessieren.

Nachbarrecht

30.05.2010

Seit mehreren Jahren setze ich das YAML Template mit Typo3 auf meiner Nachbarrechtssetie ein. Ich wollte schon immer mal WordPress ausprobieren, aber die Designs haben mich bisher nicht so überzeugt. Jetzt kann ich mich ja auch endlich mal trauen WordPress zu versuchen.

Danke für die Tipps