Erstellen eines WordPress Themes (Teil 1)

gepostet am 14.05.2013 um 10:05 Uhr

Oft bekommt man zu hören, man solle doch ein vorhandenes Theme, wie die bei WordPress mitgelieferten Themes Twenty Ten, Twenty Eleven und Twenty Twelve, nehmen und sie dann nach eigenem Wunsch umschreiben. Ich bin kein großer Fan von diesem Vorgehen und baue lieber von unten herauf mein Theme auf. Erstens trägt das Theme keine Lasten mit sich rum, die garnicht benötigt werden, und zweitens ist man viel freier, was denn aus dem Theme werden soll. Immerhin handelt es sich bei WordPress nicht mehr nur um ein Blog-System, sondern vielmehr um ein kleines CMS.

 

Die zwei wichtigsten Dateien in einem Theme:

Die Themes von WordPress liegen im Verzeichnis “DeinWordPressVerzeichnis/wp-content/themes/”. Um ein eigenes Theme zu erstellen benötigen wir darunter erst mal ein eigenes Verzeichnis. Nennen wir es doch in diesem Fall “uebung”. Damit unser Theme funktioniert, benötigen wir gerade einmal zwei Dateien:

index.php:

Die index.php ist die Startseite unseres Themes (kann man in den Einstellungen umstellen). Wir erstellen uns nun in unserem oben genannten Verzeichnis “DeinWordPressVerzeichnis/wp-content/themes/uebung/” unsere PHP-Datei mit dem Namen index.php mit folgendem Inhalt:

Wie ihr seht, ist es im Moment eine ganz normale “leere” HTML Datei. Das wird sich aber noch ändern.

style.css:

Die zweite absolut wichtige Datei damit unser Theme läuft ist die style.css. Diese Datei identifiziert das Theme gegenüber WordPress. Hier werden Name, Autor, Website und weitere Metadaten des Themes hinterlegt. Wir erstellen uns diese jetzt im selben Verzeichnis wie unsere index.php:

Das ist der Kopf der CSS Datei dieses Themes. Wie ihr seht, hinterlege ich mehrere Werte. Darunter fällt ein Mal der Name des Themes, die URL, der Autor, die URL des Autors und die Beschreibung des Themes. Darunter kommt die eigentliche Style definition.

Nun müssen wir diese style.css noch in unsere index.php einfügen. Dafür benutzen wir die Funktion bloginfo Als Parameter übergeben wir den String ‘stylesheet_url’. Diese Funktion gibt uns die URL zu unserer style.css zurück. In der index.php schaut das dann so aus:

Damit ist unser Theme im WordPress Backend auswählbar und kann auch schon eingestellt werden. Aber es wird noch nichts angezeigt. Das ändern wir jetzt!

 

The Loop! Die wichtigste WordPress Funktion:

Ich würde das Ganze so erklären: WordPress befindet sich bei jedem Seitenaufruf in einer “Query”, also einer Abfrage. Die standard Query fragt alle “posts”, also Beiträge, ab. Das heißt wir befinden uns jedes mal in einem Zustand, in dem die Posts schonmal geladen sind, wir müssen sie nur noch ausgeben. Dafür gibt es die The Loop. Eine standard Loop in unserer index.php sieht so aus:

Voilà! Unser Theme zeigt Posts an. Natürlich komplett unformatiert. Aber das gehört nicht in dieses Tutorial!

 

zu Teil 2 »

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.