dynamicinternet Wir machen Ihr Web dynamisch!

WordPress Themes Step by Step Teil 1

Folgende Teile sind erschienen:

• WordPress Themes Step by Step Teil 1
• WordPress Themes Step by Step Teil 2
• WordPress Themes Step by Step Teil 3
• WordPress Themes Step by Step Teil 4

Inhaltsverzeichnis:

• Einleitung
• Vorraussetzungen
• Lizenz
• Download
• Vorbereitungen
• Das Layout unseres Themes
• Das Theme Stylesheet
• Die Funktionsweise der WordPress Templates
• Die (X)HTML Struktur
• Stylesheet korrekt einbinden

Einleitung

In dieser Serie werden wir Schritt für Schritt lernen, wie man aus einem fertigen HTML Layout ein WordPress-Theme erstellt. Anschließend werden wir Überlegungen anstellen, wie man sein Theme verbessern bzw. mit einfachen selbst geschrieben Funktionen sowie einigen Plugins erweitern kann. Zu jeden Abschnitt dieses Tutorials werde ich ein Downloadpaket bereitstellen.

Ich verwende das Layoutbeispiel “2col_left_seo” aus dem CSS Framework YAML von Dirk Jesse. Das liegt zum einen daran, dass ich im Augenblick sehr viel mit YAML arbeite und es sehr schätze, zum anderen habe ich dadurch ein fertiges Basislayout und brauche es nicht selbst für dieses Tutorial zu entwickeln.

Da jedoch die meisten Blogs die Sidebar auf der rechten Seite haben, wurde für dieses Beispiel das Layout entsprechend angepasst.

Vorraussetzungen

Ich setzte für dieses Tutorial solide HTML und CSS Kenntnisse voraus, ebenso ein gewisses Verständnis der Programmiersprache PHP.

Um dieses Tutorial durchzuführen, benötigen wir einen lokalen Webserver (XAMPP oder ähnliches) und einen Editor zum Erstellen der Theme-Dateien. Empfehlenswert sind Editoren, die neben HTML und CSS auch PHP und Javascript verstehen, da bei solchen Editoren meist Syntax-Highlighting und Autocode–Vervollständigen implementiert sind, was die Fehleranfälligkeit beim Programmieren natürlich drastisch verringert. Zusätzlich sollte man mehrere verschiedene Browser installiert haben, ebenso Tools wie Web Developer Toolbar, Firebug etc.

Lizenz

YAML wurde unter der Creative Commons Attribution 2.0 Lizenz (CC-A 2.0) veröffentlicht. Aus diesem Grund stehen die Downloadpakete ebenfalls unter der CC-A 2.0. Eine kostenlose private und kommerzielle Nutzung ist gestattet.
Bedingung: Für die kostenfreie Nutzung des YAML Framework und des hier erstellten Themes ist die Namensnennung der Autoren/Rechteinhaber und die Rückverlinkung zur YAML Homepage (http://www.yaml.de) sowie zu meiner Homepage (http://dynamicinternet.eu) in der Fußzeile der Webseite oder im Impressum vorgeschrieben.

Download

Die erforderlichen Dateien können als Zip-Datei heruntergeladen werden. Download Teil 01.

Vorbereitungen

Wir installieren WordPress in einem Verzeichnis unserer Wahl auf unserem lokalen Webserver und richten die wesentlichsten Dinge wie Blogtitel, Blogbeschreibung, Autordaten und Permalink-Struktur ein. Am besten so, wie man es auch live betreibt oder betreiben würde.

Wenn alles geklappt hat, solltet ihr jetzt euer lokales Blog aufrufen können, welches in dem default Theme erscheint.

Wir entpacken das Downloadpaket in den Ordner wp-content/themes/. Die Dateistruktur sollte danach so aussehen:

Diese Dateistruktur nehmen wir erst einmal so hin, entsprechende Erklärungen folgen an den jeweils relevanten Stellen. Eins nur vorne weg: Der yaml-Ordner beinhaltet alle YAML Bausteine, die nicht verändert werden sollen. Gibt es ein Update von YAML, einfach den kompletten yaml Ordner neu einspielen und man ist auf dem neusten Stand. Nachdem wir die Vorbereitungen abgeschlossen haben, wenden wir uns dem Layout zu.

Das Layout unseres Themes

Es handelt sich um ein klassisches 2-Spalten Layout mit Kopfbereich, horizontaler Hauptnavigation zur Darstellung der Hauptseiten, Inhaltsbereich (steht im Quelltext an erster Stelle), einer rechten Seitenleiste für die Navigation im Blog, sowie der obligatorischen Fußleiste. Das Layout ist zentriert und hat eine Breite von 960px. Es ist vollkommen flexibel, das heißt, es passt sich jeder Bildschirmauflösung automatisch an. Erst bei einer Breite von unter 740px erscheint der horizontale Scrollbalken im Browser. Damit ist es auch für eine Bildschirmauflösung von 800×600 geeignet. Hier ein Screenshot:

Das Theme Stylesheet

Die Datei style.css darf in keinem Theme fehlen. Sie wird von WordPress im Adminmodul in der Themeübersicht geladen und gibt Informationen über das Theme, den Autor usw. wieder. Diese Angaben stehen ganz oben in dem auskommentierten Bereich. Danach laden wir mit @import url(…) die für unser Theme benötigten Stylesheets:

/* import core styles | Basis-Stylesheets einbinden */

@import url(yaml/core/slim_base.css);

/* import screen layout | Screen-Layout einbinden */

@import url(yaml/navigation/nav_shinybuttons.css);

@import url(css/screen/basemod.css);

@import url(css/screen/basemod_2col_right_seo.css);

@import url(css/screen/content.css);

/* import print layout | Druck-Layout einbinden */

@import url(yaml/print/print_100_draft.css);

Das erste Stylesheets ist das reduzierte Basisstylesheet von YAML und wird von uns nicht bearbeitet. Die lesbare Version dieses Stylesheets ist die yaml/core/base.css. Danach wird der Navigationsbaustein nav_shinybuttons.css geladen, welcher ebenfalls nicht angefasst wird. Die basemod.css beinhaltet grundlegende Modifizierungen des Layouts sowie eine Modifizierung der horizontalen Navigationsleiste. In basemod_2col_right_seo.css wird die nicht benötigte col2 abgeschaltet und die Inhaltscontainer für unser Layout neu positioniert. Man könnte auch die beiden letztgenannten Stylesheets zu einem zusammenfassen, dann spart man beim Seitenaufruf einen Request. Die content.css beinhaltet sämtliche Formatierungen der Inhaltselemente. Das Stylesheet print_100_draft.css ist für den Ausdruck der Webseiten zuständig.

Schaut euch die Stylesheets in Ruhe an, es ist wichtig für das Verständnis von YAML. Hier möchte ich auch gleich auf die hervorragende Dokumentation von YAML verweisen, da eine Erklärung diesen Rahmen bei weitem sprengen würde. Ausserdem kann das Dirk Jesse viel besser.

Zusammen mit der style.css sorgt die Datei screenshot.png dafür, daß wir das Theme in der Themeauswahl identifizieren können. Im Moment wird noch ein Fehler angezeigt, da zu jedem Theme wenigstens eine Template Datei existieren muss. Das soll uns aber erstmal nicht stören.

Die Funktionsweise der WordPress Templates

Kurz ein paar Worte zur grundsätzlichen Funktionsweise von WordPress, ohne es hier am Anfang zu sehr zu vertiefen. Es wird später alles ausführlich behandelt.

Ein Theme ist der Präsentationslayer der Blogsoftware. Es enthält neben der style.css eine Reihe von so genannten template files, wie zB. index.php, single.php oder page.php. Jedes template file erfüllt bestimmte Aufgaben in der Präsentation.

Diese template files werden von WordPress hierarchisch aufgerufen. Ein Beispiel zum Verständnis: Klickt man im Blog auf eine Kategorie, sucht WordPress nach einer Datei category-Zahl.php, wobei Zahl für die ID dieser Kategorie steht. Ist diese Datei nicht vorhanden, wird nach category.php gesucht. Wenn die nicht da ist, nach archive.php. Wird die auch nicht gefunden, wird die index.php aufgerufen. Diese Template Hierarchie sollte man immer im Kopf haben, wenn man ein Theme erstellt oder ändert. Auch muss man bei der Erstellung eigener Templates stets darauf achten, keine Namen zu verwenden, die WordPress in der Template Hierarchie verwendet.

Eine Blogseite selbst setzt sich aus mehreren einzelnen Dateien zusammen. Der Grund ist folgender: Es soll beim Programmieren so wenig wie möglich doppelter Code produziert werden, da dieser schwer zu warten ist. Die index.php zB. includiert über so genannte include tags die header.php (get_header()), die sidebar.php (get_sidebar()) und die footer.php (get_footer()). In jeder dieser Dateien werkeln wiederum etliche template tags, die dafür sorgen, das unsere Artikel mit den von uns gewünschten Informationen präsentiert werden. Stürzen wir uns nun in die Erstellung eines WordPress Themes mit YAML.

Die (X)HTML Struktur

Wir laden mit einem Editor unserer Wahl die Datei 2col_right_seo.html, welche sich in unserem Theme Verzeichnis befindet. Eine Beschreibung der Struktur findet ihr auf yaml.de. Diese Datei werden wir nun in 4 Bestandteile zerlegen: in den Header, den Inhaltsbereich, die Sidebar und in den Footer.

Schauen wir uns den Quelltext von 2col_right_seo.html an. Wir müssen den Bereich finden, welchen wir für die header.php benötigen. Da ist zunächst die Doctype Deklaration und der gesamte <head> Bereich. Ebenfalls benötigen wir auf jeder Seite die Kopfleiste (div #header) mit der horizontalen Navigation (div #nav).

Wir legen mit dem Editor eine neue, leere Datei an und nennen sie header.php. Danach kopieren wir aus der 2col_right_seo.html den Teil vom Beginn der Doctype Deklaration bis <!– end: main navigation –> und fügen ihn in die header.php ein.

Jetzt kann man natürlich bemerken, dass die nachfolgenden Divs #main, #col1 und #col1_content auch auf jeder Seite benötigt werden. Das ist richtig. Ich würde es aus folgendem Grund nicht tun:

Möchte ich nur auf bestimmten Seiten zB. einen Aufmacher oberhalb vom Div #main einfügen, ist das nicht möglich, weil das Div #main ja in der header.php steht. Diese Art von Freiheit ist mir wichtiger, als 3 Divs noch im Header unterzubringen.

Dies soll keine Wertung sein, was richtig und was falsch ist. Beides ist richtig. Ich möchte lediglich darauf hinweisen, dass es viele Wege gibt, die zum Ziel führen. Immer mal kurz darüber nachzudenken, was man tut und warum man es tut, hat noch nie geschadet. Entscheiden muss letztendlich jeder für sich selber, wie er sein Theme aufbaut.

Nachdem wir die header.php gespeichert haben, gehen wir zum Inhaltsbereich über. Der Inhaltsbereich erstreckt sich vom Div #main bis zum Ende von #col1. Wir legen wieder eine leere Datei an, nennen sie index.php und fügen aus der 2col_right_seo.html den Bereich von <!– begin: main content area #main –> bis <!– end: #col1 –> ein und speichern das Ganze ab.

Die dritte Datei wird die sidebar.php. Also wieder neues Dokument anlegen, den Quellcode von <!– begin: #col3 static column –> bis <!– end: #main –> hineinkopieren und als sidebar.php speichern.

Bleibt uns nur noch der Footer. Wir legen eine footer.php an und kopieren den restlichen Bereich von <!– begin: #footer –> bis zum schließenden </html> Tag hinein und speichern sie.

Damit haben wir die Grundlage für unser Theme geschaffen.
Um endlich einen ersten Eindruck davon zu bekommen, was wir da gebaut haben, müssen wir noch einmal die index.php im Editor öffnen und dafür sorgen, das der Header, die Sidebar und der Footer includiert werden. WordPress stellt dafür Funktionen bereit. Wir fügen diese Funktionen an den entsprechenden Stellen ein:

<?php get_header(); ?>

<!-- begin: main content area #main -->

<div id="main">

<!-- begin: #col1 - first float column -->

<div id="col1">

<div id="col1_content" class="clearfix">

<h2>Column  #col1</h2>

<p>Lorem ipsum ... porttitor. </p>

</div>

</div>

<!-- end: #col1 -->

<?php get_sidebar();?>

<?php get_footer(); ?>

Nach dem Speichern der index.php müssen wir im Adminbereich des Blogs das von uns erstellte Theme zum akuellen Theme machen. Danach rufen wir mit http://localhost/deinPfadzurWordPressInstallation/ das Blog auf und die eben erstellte Seite sollte geladen werden.

Stylesheet korrekt einbinden

Eigentlich wollte ich hier einen Schnitt machen und Teil 1 beenden, aber das Stylesheet wird nicht geladen, weil wir einen relativen Pfad benutzt haben. Und nach jedem Teil dieses Tutorials sollte ein kleiner Erfolg stehen.

Also öffnen wir die header.php im Editor und benutzen mit bloginfo() den ersten Template Tag von WordPress. Mehr Informationen über bloginfo() gibt es im 2. Teil. Wir ersetzen die komplette Zeile

<link href="style.css" rel="stylesheet" type="text/css"/>

durch diese Zeile:

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

Da style.css unser Stylesheet ist, können wir innerhalb der Klammern von bloginfo() ‘stylesheet_url’ verwenden. Wenn wir die Seite nun im Browser (immer wenn ich Browser sage, meine ich einen Browser und nicht die Krücken aus Redmont ) aufrufen und uns den Quelltext im Browser anschauen, sehen wir den vollständigen Pfad zum Stylesheet inlcusive style.css. Um nun auch die patch_2col_right_seo.css richtig einzubinden, benutzen wir bloginfo(‘template_url’), welches uns den absoluten Pfad zu unserem Template gibt und schreiben nur noch /css/patches/patch_2col_right_seo.css dahinter. Der komplette Conditional Comment für die Internet Explorer sieht dann so aus:

<!--[if lte IE 7]>

<link href="<?php bloginfo('template_url'); ?>/css/patches/patch_2col_right_seo.css" rel="stylesheet" type="text/css" />

<![endif]-->

Abschließend lassen wir unsere Seite validieren. Es sollten keine Fehler erscheinen.

Falls jemand einen Fehler bemerkt, oder an einer Stelle nicht zu recht kommt, bitte einen Kommentar schreiben. Auch über Anregungen oder Ideen für die zukünftigen Teile würde ich mich freuen.