Bild vergrößern 336 335 http://img4.magnus.de/Wordpress-Logo-r336x335-C-c71f05b1-8802583.jpg

Wordpress "Themes": Grundwissen ist gefragt

Ob Sie nun ein vorhandenes Wordpress Theme anpassen oder ein eigenes Design von Grund auf neu codieren möchten: Um das Verständnis der Wordpress Theme Engine kommen Sie nicht herum.

Ein Handgriff und die Sucherei geht los – so beschreibt man den Start in die Entwicklung eigener Wordpress Themes wohl am besten. Dass die Themes im Unterverzeichnis wp-content des eigenen Blogs zuhause sind, das ist noch schnell herausgefunden. Doch wie die Tausende Zeilen von Code und unzähligen Dateien ineinandergreifen, erschließt sich erst nach langem Forschen.

Diese Zeiten sind jetzt vorbei. Wir führen Sie Schritt für Schritt durch die Entwicklung eines eigenen Wordpress Themes. So erhalten Sie ein komplettes Grundgerüst, auf dessen Basis Sie eigene Designs für Wordpress umsetzen können.

Anschließend wissen Sie genau, aus welchen Bausteinen ein Theme besteht und wo Sie Hand anlegen müssen, um einen gewünschten Effekt herbeizuführen. Kleine Änderungen an Themes, die Sie fertig aus dem Netz heruntergeladen haben, sind dann erst recht ein Kinderspiel.

Voraussetzungen

An Kenntnissen setzt dieser Workshop voraus, dass Sie Wordpress in der aktuellen Version 2.8 installiert haben und in der Lage sind, es über seine Weboberfläche zu administrieren. Außerdem sollten Sie HTML beherrschen und PHP-Code zumindest als solchen erkennen.

Sie werden schneller vorwärtskommen, wenn Sie schon mal das eine oder andere kleine Skript selbst programmiert haben – zwingende Voraussetzung ist das aber nicht. Idealerweise arbeiten Sie in einer zweiten Wordpress-Installation, mit der Sie Ihr Theme testen.

Eine solche Installation ist generell praktisch, auch wenn man nur mal ein neues Plugin checken will, ohne gleich die Funktionsfähigkeit des Live-Blogs aufs Spiel zu setzen.

Ihr Test-Blog muss mindestens einen Artikel enthalten, denn sonst gibt es nichts, was das neue Theme anzeigen könnte. Ein paar Kommentare sind ebenfalls hilfreich. Und schließlich benötigen Sie einen Text-Editor, der Dateien im UTF8-Format lesenbeziehungsweise schreiben kann, etwa das kostenlose Pspad.

Denn intern arbeitet Wordpress bereits vollständig mit dieser zeitgemäßen Form der Zeichencodierung. Ist Ihr Editor nicht auf UTF8 eingestellt, dann werden im Theme hartcodierte Umlaute und Sonderzeichen wie © später fehlerhaft angezeigt.

Erste Schritte

Für diesen Workshop verwenden wir ein selbst entwickeltes Theme, das Sie in seinen verschiedenen Entwicklungsstadien kennenlernen. Den gesamten Code finden Sie in Form einer .zip-Datei am Ende dieser Seite.

Laden Sie diese Datei herunter und entpacken Sie den Inhalt an einen beliebigen Ort. Die dabei entstehenden Ordner kopieren Sie - beispielsweise per FTP - alle in den Theme-Ordner wp-content/themes/ Ihrer Wordpress-Installation. Hier sind generell die Themes Ihres Blogs zuhause, jedes in seinem eigenen Unterverzeichnis.

Öffnen Sie die Weboberfläche Ihres Test-Blogs und klicken Sie links auf Design. In der Übersicht der verfügbaren Themes finden Sie anschließend X neue Einträge.

Nachdem Sie das Theme Internet Magazin 1.0 aktiviert haben, sieht die Startseite Ihres Blogs ähnlich aus wie im nebenstehenden Bildschirmfoto.

Zeit, dass wir uns mit dem Inhalt des zugehörigen Theme-Verzeichnisses befassen. Im Theme-Verzeichnis internetmagazin_1 finden Sie drei Dateien. Die screenshot.png enthält das 300 mal 225 Pixel große Vorschaubild des Themes, das in der Weboberfläche angezeigt wird.

Dieses ersetzen Sie am besten, wenn das Theme fertig ist, mit einem eigenen Bildschirmfoto, das Sie entsprechend verkleinern. Außerdem gibt es eine Template-Datei namens index.php und das Stylesheet namens style.css. Öffnen Sie diese beiden Dateien im Editor.

Stylesheet-Konventionen

Das Stylesheet besteht aktuell nur aus einigen Kommentarzeilen. Über diese teilen Sie der Wordpress-Engine die Infos zu unserem Theme mit, die in der Admin-Oberfläche erscheinen sollen. Dazu zählen der Theme-Name und die Versionsnummer, Kontaktdaten des Autors und einiges mehr. Auch Lizenzinfos können Sie hier einfügen.