WP – Tutorial, wir schreiben ein WordPress Theme – Teil 1

Das Schreiben eines eigenen Themes, womit das komplette Layout einer WordPress-Applikation gemeint ist, ist das Ziel einer ganzen Reihe von WordPress-Nutzern.
Mit meinem Buch „WordPress – Weblogs einrichten und administrieren“ habe ich einen kleinen Einblick in das Erstellen in ein eigenes Theme gegeben. Immer wieder gibt es Fragen und die Tiefe des Kapitels wird kritisiert. Leider war es im Umfang des Buches nicht möglich tiefer und detaillierter auf den Entstehungsprozess eines eigenen Themes einzugehen. Außerdem kann ich in diesem Blog schreiben wie mir der Schnabel gewachsen ist und die Strings gehen mir damit leichter von der Hand.

In diesem Zusammenhang wird in den naher Zukunft hier ein komplettes Tutorial entstehen, insofern ich durch halte. Im Vorfeld habe ich schon in einem Beitrag angefragt, welches Layout bevorzugt für den Entstehungsprozess gewünscht ist. Schaut man sich die Kommentare an, dann ist schnell erkennbar, dass die Anforderungen sehr unterschiedlich sind und die Grundlagen für das Erstellen eines eigenen Themes sehr verschieden verteilt sind. Oft werden Begriffe im Umfeld von WordPress und Webdesign durcheinander geworfen und erschweren so das Verständnis.

Aus diesem Grund möchte ich im ersten Abschnitt auf Grundlagen und Vereinbarungen eingehen. Ebenso stelle ich Layouts vor, mit denen dann im Anschluss in den folgenden Teilen gearbeitet wird.

Ich wünsche Euch und mir viel Spaß mein Erstellen und Lernen. Die Artikel entstehen parallel zur Arbeit an verschiedenen Projekten, werden nur in der Freizeit oder in Wachphasen erstellt. Ich bitte also um Geduld und Einfühlungsvermögen. Ebenso bitte ich darum, dass Fehler und Verbesserungen in den Kommentaren oder Mail an mich bekannt gegeben werden. Ich erhebe nicht den Anspruch auf fehlerfreie Arbeit und freue mich über positive Kommentare, genauso wie über konstruktive Kritik.

Wenn wir eines durchs Internet lernen können, ist es Folgendes: Alle profitieren davon, wenn die wesentlichen Ressourcen frei verfügbar bleiben und kostenlos zugänglich sind.
Dann können alle etwas für sie Passendes darauf aufbauen.Lawrance Lessig

Was brauchen wir?

• WordPress, eine laufende Installation sollte stehen. Dabei empfehle ich eine lokale Installation mit XAMPP. Diese Installation sollte jeder Teilnehmer im Vorfeld anfertigen. Die Installation und Einrichtung von WordPress ist ausführlich im Buch beschrieben. Alternativ gibt es eine sehr gute Anleitung auf blogshop.de
• Editor, einen Editor mit PHP-, HTML- und CSS-Unterstützung ist bei der Arbeit sehr hilfreich. Ich für meinen Teil bevorzuge UltraEdit. Eine sehr gute freie Alternative stellt Notepad++ dar.
• XHTML Cheat Sheet, Quickreferenz (XHTML als PDF, nicht mehr online)
• CSS Cheat Sheet, Quickreferenz; Einige Möglichkeiten habe ich im Artikel „CSS Referenzen“ vorgestellt. Für das schnelle Nachschlagen und eine Übersicht neben der Tastatur empfehle ich noch immer die Referenzen vom Verbad Druck & Medien NRW (CSS als PDF)
• WordPress Codex, auch dazu gibt es Referenzen. Die Website des codex sollte aber immer zur Hand liegen um nähere Details zu den einzelnen Template– und Conditional-Tags nachzulesen. In diesem Zusammenhang empfehle ich das Firefox Add-on WordPress Helper, mit dem schnell auf den nötigen Seiten ist.
• Firefox und einige Addons, ohne diesen Browser geht nix. Ich werde das Theme mit Hilfe dieses Browsers entwickeln. Dies liegt zum einen daran, dass er den Standard hervorragend unterstützt und dass es einige hervorragende Add-ons gibt, die die Entwicklung sehr erleichtern bzw. angenehmer machen. Dabei möchte ich auf das Buch verweisen, in dem es eine Auflistung meiner Empfehlung gibt. Wer dieses Buch nicht besitzt hat keinen Nachteil, der alle Add-ons werden auf dem entsprechenden Artikel im Blog zum Buch genannt.

Grundlagen – Themes und Templates

Immer wieder werden diese beiden Begriffe verschieden verwendet. Dies führt zu Missverständnissen und schafft eine schlechte Basis zum Arbeiten mit WordPress. Deshalb kurz und knapp – was ist ein Theme und was ist ein Template?

Template

Ein Template stellt die kleinste Einheit eines Theme dar. Es ist eine PHP-Datei, die sich innerhalb des Themes befindet. Eine ganze Reihe von Vereinbarungen sorgt dafür, dass WordPress einige Templates (z.B. single.php, index.php, 404.php) im Standard erkennt.
Weitere Templates können trotzdem vereinbart und im Backend von WordPress genutzt werden. Dazu später im Verlaufe des Tutorials mehr.

Theme

Das Theme ist eine Sammlung von Dateien – vorrangig PHP und CSS-Dateien, die die Darstellung des Weblog beeinflussen. Ein Theme ist das „Kleid“ deines WordPress und der Zusammenspiel der Dateien in einem Theme sorgt für die Darstellung. Dabei muss nicht jedes Theme die gleiche Anzahl und Namen von Dateien im Theme-Ordner enthalten! Ein WordPress-Theme besteht aus mindestens zwei Dateien, dem Stylesheet (style.css) und einer PHP-Datei (index.php). Im weiteren können Themes Grafiken, JavaScript-, Flash-Dateien und eine Reihe von zusätzlichen Dateien enthalten.
Dabei sollte man bei der Entwicklung eines Themes daran denken, dass möglichst nur das Stylesheet, die CSS-Datei(en), Einfluss auf das Aussehen des Blog haben.

Das Layout

Der eine oder andere möchte WordPress nicht nur als Weblog-Software einsetzen. Unter den Einsatzmöglichkeiten von WordPress kommt immer wieder die Anforderung WP als CMS, welches nicht ungewöhnlich und selten ist. Schon eine ganze Reihe von Webseiten basieren auf WordPress. Aber darum soll es nicht gehen.

ich stelle im folgenden Abschnitt einige Möglichkeiten für Layouts dar, wobei ich kurz und knapp auf das jeweilige Layout eingehe. Damit soll es in den nächsten Teilen dieses Tutorials weiter gehen. Sucht euch also bitte ein Layout oder erstellt ein eigenes mit statischem Webdesign. Dabei solltet ihr darauf achten, dass die gleichen Namenskonventionen nutzt. Ansonsten könnte das Nachvollziehen von Schritten und Code erschwert werden. Im weiteren möchte ich darauf hinweisen, dass ich ein Vertreter von möglichst schmalen Markup bin. Es sollte also möglichst keine DIV-Suppe entstehen.

Bevor wir aber in die Layouts einsteigen und ich die Grundlagen zum Verwenden näher erläutere, möchte ich noch einige Punkte von Andy Clarke zitieren und mit meinem Verständnis von Webdesign ergänzen. Dieses sollen nochmal den Prozess unterstreichen und meine Standpunkte darlegen.

• Nicht alle Browser sehen das gleiche Design! Ich gehe davon aus, dass das Design auf allen Browsern angesehen werden kann aber nicht gleich aussieht. Im besonderen Fall spreche ich da vom IE, den ich zwar prüfe und eventuell auch ein wenig anpasse, aber nur so, dass IE-Leser den Inhalt angenehm lesen können.
• Vermeide Hacks und Filter. Diese Aussage steht im Zusammenhang mit dem ersten Punkt und ich unterstütze sie weitgehend und spare so viele Zeichen Code.
• CSS-Selektoren stehen zur Verwendung bereit. Es gibt eine große Anzahl von Selektoren, darum nutzt sie und unterstützt die Möglichkeiten.
• Die Website sollte auch ohne aktives JavaScript leserlich und zugänglich sein.
• Nutze semantische Namenskonventionen und Mikroformate. Noch sind die Möglichkeiten dieser Techniken nicht weit verbreitet, aber es wird, do glaube ich fest, eine Zeit kommen, in der Mikroformate und einheitliche Namenskonventionen eine Rolle spielen und dem Leser der Website mehr Möglichkeiten zum Steuern der Site in die Hand gegeben werden. Bleibe als zukunftsträchtig im Design und Markup.
• Arbeite nicht im Stillen – gebe Ideen und Lösungen weiter. Nur so können sie genutzt, verbessert und korrigiert werden.
• Validiere xHTML und CSS! Dazu stehen eine ganze Reihe guter Validatoren bereit. Am einfachsten ist sicher die Verwendung mit Hilfe des Firefox-Add-on WebDeveloper.
• Achte und implementiere Barrierefreiheit.

Die folgenden Layouts lassen sich im Anschluss als Paket downloaden. Das Paket lokal entpacken und den kompletten Ordne in das Theme-Verzeichnis eurer WordPress-Installation kopieren /wp-content/themes/. In diesem Ordner liegen dann eine Reihe von HTML-Dateien. Schaut euch die verschiedenen Layouts im Browser und Code an. Entscheidet euch für eine Lösung, mit der ihr dann weiterhin arbeiten könnt.

Es werden immer folgende Namenskonventionen im Layout verwendet. Ich habe versucht, sparsam im Markup und CSS zu sein und hoffe, dass so das Verständnis für den Code und die Realisierung einfacher ist. Im Laufe des Tutorials wird der Code umfassender. Da jeder bei der Entwicklung eine andere Herangehensweise hat, besteht so die Möglichkeit, dass jeder Teilnehmer seine Ideen im Anschluss an das Tutorial umsetzen kann.

• ID container für eine Container, der alle Bereiche umschließt
• ID header für den Kopfbereich – Begriff: Header
• ID sidebar für den linken/ rechten Bereich neben dem Hauptinhalt – Begriff: Sidebar
• ID content für Hauptbereich, hier stehen die Artikel und Seiten
• ID footer für den Fußbereich unter dem Hauptinhalt und Sidebar – Begriff: Footer

Im weiteren Teil dieses Tutorials werden wir dann aus der statischen HTML-Datei ein WordPress-Theme erstellen, Schritt für Schritt. Ich werde versuchen, dass die einzelnen Abschnitte nicht zu lang sind und mit einem sichtbaren Ergebnis enden.

Absolute Positionierung

Ursprünglich waren Floats nicht für Seitenlayouts gedacht. Nicht immer ist die Wahl eines Float-Design die beste Wahl, den sie sind empfindlich. Mit Floats erstellte Layouts gehen schnell kaputt, ist ein Bild zu groß für einen Container oder nur 1px ist zu viel, dann ist das komplette Layout hin. Deshalb ist hier ein Beispiel für absolute Positionierung.

Gerade im Umfeld eines CMS, bei der nicht die Entwickler des Design die Inhalte erstellen, ist so ein Layout oft hilfreicher. Das zu große Bild ragt dann eventuell aus dem Container raus, aber das eigentliche Design steht weiterhin. Absolute Positionierung ist robust und sollte in keinem Fall im Repertoire des Webdesigners fehlen oder vergessen werden.

Der wohl größte und auffälligste Nachteil, einen Container unterhalb des jeweilig längsten Container zu platzieren. Dazu kann man beispielsweise mit JavaScript eingreifen oder es muss absolut positionieren.

Floatende Positionierung

Die folgenden Beispiele basieren alle auf dem Floating-Prinzip. Es werden verschiedene Möglichkeiten gezeigt. Jede Möglichkeit hat andere Vor- und Nachteile. In diesem Zusammenhang gibt es eine Reihe guter Websiten im Netz und The StyleWorks soll stellvertretend genannt sein. Auf diesen Seiten kann man sich näher mit den Hintergründen auseinander setzen und für eine Lösung entscheiden.

Grundlegend sind alle Layouts ähnlich aufgebaut. Es gibt einen Sidebar, einen Content-Bereich und einen Footer. Der Footer soll jeweils unter der längsten Spalte sein. Das Floating der beiden Bereiche wird jeweils unterschiedlich realisiert, während das HTML-Markup immer gleich ist. Somit besteht einfach und unkompliziert die Möglichkeit das Design zu ändern.

Die Layouts kann man betrachten, in dem man auf das jeweilige Bild klickt.

Sidebar Links: nur der Sidebar floatet
Nur der Sidebar-Container floatet links. Der content-Bereich wird mit Hilfe des margin-Abstandes an die richtige Position gebracht.

Sidebar Links: Sidebar und Content floatet links
Beide Container floaten links, ohne weitere Formatierung „klebt“ der content-Bereich immer am Sidebar.

Sidebar Links: Sidebar floatet links und Content floatet rechts
Genau das Gegenteil zum übergeordneten Beispiel. Damit besteht immer eine Lücke zwischen Sidebar und Content. Die Ausrichtung des Sidebar und des Content sind mit dieser Lösung immer am äußeren Container ausgerichtet. Damit ist es einfach, dass die beiden Bereiche immer gleich breit mit dem Header und Footer sind.

Sidebar Rechts: Sidebar floatet rechts und Content floatet links
Für alle, die das klassische Blogdesign mögen – der Sidebar befindet sich im rechten Bereich. Damit ist der Content-Bereich links und floatet auch links.
Auch mit diesem Beispiel sind die beiden Container abhängig von äußeren Container und können recht einfach am Header und Footer ausgerichtet werden.

Sidebar Rechts: Sidebar floatet rechts und Content floatet rechts
Beide Container floaten rechts. Damit gibt es wieder keine Lücke ohne Formatierung zwischen Sidebar und Content.

Download:

Ist die Arbeit nicht 1 Euro wert?
Jede Spende wird dankbar angenommen und ermöglicht das weitere Arbeiten an freier Software. Möchtest du spenden, so besuche meine Wunschliste.

Download als php-Datei: wp_tutorial_teil1.zip – 8 kByte

Fazit und Ausblick

Damit wären wir am Ende des ersten Abschnittes. ich wünsche und hoffe, dass ihr euch mit den Beispielen vertraut machen könnt und die Idee, das Markup und das CSS dahinter verstehen könnt. Ich wünsche viel Spaß beim lernen und erstellen des eigenen Themes.

Schauen wir wie es weiter geht: im folgenden Teil 2 werden wir aus dem gewählten statischen Design ein einfaches Template machen, so dass es WordPress damit etwas anfangen kann und die Daten aus der Datenbank schon zum Teil geladen werden.
Im dritten Teil werden wir dann wohl die einzelnen Dateien zerlegen und zu den klassischen Templates kommen. Dabei werden wir eine Reihe von Konventionen kennen lernen und verstehen.
Soweit zum Ausblick