Um das Tutorial starten zu können, braucht man eine laufende WordPress Site. Am einfachsten geht es meiner Meinung per XAMPP auf dem eigenen Rechner.
Schritt 1. Ordnerstruktur und erste Dateien
Die Themes befinden sich in der Ordnerstruktur von WordPress an folgendem Ort:
wordpress_ordner/wp-content/themes/
In diesem Ordner erstellt man nun einen neuen Ordner mit dem Namen des neuen Themes. Darin erstellt man mit einem Texteditor die Dateien index.php und style.css. In das Stylesheet werden nun die Meta-Daten zum Theme eingetragen:
Schritt 2. Der Loop
Der Loop ruft aus der WordPress-Datenbank die verschiedenen Beiträge ab. Der allgemeine Loop sieht folgendermassen aus:
Dieser wird nun in die index.php-Datei eingebettet.
Das Theme kann nun im WordPress ausgewählt werden. Das Resultat sieht mit der Startinhalt von WordPress folgendermassen aus:
Bevor man nun Änderungen im Stylesheet vornehmen will, muss man das Stylesheet korrekt verlinken. Dies wird durch WordPress vorgegeben, so wie der Titel und die Metadaten der Webseite. So kann man diese Werte im Backend zum Teil verändern. Der folgende Code gehört deshalb in den Head-bereich der index.php-Datei:
Ab jetzt kann man das Design im Stylesheet erstellen und das Theme so formen wie man möchte.
Schritt 3 Navigation
Um eine Navigation zu erstellen, die vom Backend beeinflusst werden kann, braucht es eine php-Datei mit dem Namen Functions. Diese wird im gleichen Ordner wie die index.php-Datei erstellt.
Diese Datei sollte folgenden Inhalt haben:
So wird ein Menü für das Backend freigegeben, welches von dort her bearbeitet werden kann.Mit folgenden Zeilen wird das Menü in die index-Datei eingefügt.
Im Backend sollte nun der Unterpunkt Menü hinter Design auftauchen. Ich habe folgendes Menü erstellt:
Nun sieht meine Startseite (Ich habe bereits ein wenig am Design geschraubt) folgendermassen aus:
Über das Quelltexttool eines Browsers kann nun die Einbettung des Menüs analysiert werden.Im Normalfall ist die Menü-Liste in einem DIV-Container eingebettet. Ebenfalls erfährt man so die verschiedenen Klassen der einzelnen Elemente.
Eine Alternative bietet das Durchlesen der Dokumentation auf WordPress zum Thema Navigation. Durch Anpassen des PHP-Codes können eigene Klassen und Strukturen vorgegeben werden.
Diese drei Schritte reichen aus um ein simples WordPress Theme für beispielsweise einen Blog zu gestalten.
Hier mein Resultat nach einigen Schraubereien im Stylesheet und kleinen Änderungen der Struktur des Index-Files.
Natürlich enden die Möglichkeiten von Worpress nicht hier. Dies sollte nur einen Vorgeschmack auf das sein was mit WordPress möglich ist. Mit höheren Anforderungen an die Website steigen jedoch auch die Anforderungen der WordPress-Programmierkenntnisse.