Relaunch Technokrat #3 – Aufbau eines WordPress Themes

Nachdem wir nun XAMPP installiert haben und eine lokale Version von WordPress angelegt wurde, wollen wir nun die Grundstruktur zum eigenen Theme errichten. Ich habe lange darüber nachgedacht, vielleicht erst den Schritt des Designs ein wenig zu erläutern. Aber dann habe ich mir gedacht, wieso stundenlang mit Photoshop an einem Konzept arbeiten, wenn man vielleicht nicht einmal weiß, wie man es dann im Backend umsetzt? Also wird es wohl der beste Schritt sein, sich vorerst mit dem Aufbau eines Themes in WordPress vertraut zu machen.

Ich versuche es mal so einfach wie möglich zu erklären. Wer allerdings ein wenig Vorkenntnisse in HTML und PHP mitbringt, ist klar im Vorteil. Sollte ich zu schnell sein und zuviele Schritte auslassen, dann könnt ihr gerne meine Kommentarfunktion nutzen um mir die Meinung darüber zu geigen 🙂

Was brauche ich?

Das wichtigste haben wir bereits. XAMPP, eine eingerichtete Datenbank und eine laufende Installation von WordPress 3.01. Ein Editor kann nicht schaden. Ich nutze gerne das PSpad, welches unter www.pspad.com zu haben ist. Dann wäre es ganz praktisch, den Firefox zu starten, damit wir Ergebnisse sehen können, wenn wir unsere Einstellungen testen wollen.

Mal abgesehen von der Software brauchen wir nun noch ein wenig Lust am Coden und ein wenig Geduld. Nicht alles wird gleich auf Anhieb funktionieren und des öfteren werden sich vielleicht Fehler einschleichen, nach denen man ein wenig suchen muss. Aber bevor Ihr eure Tastatur am Monitor zertrümmert, macht lieber eine Pause und trinkt einen Tee.

Wie fange ich an?

Ein WordPress Theme ist eigentlich ganz einfach mit nur einer Datei zu erstellen. Es wird später sinvoll sein, sein Theme in mehrere Module auszulagern, aber theoretisch reicht nur eine Datei im Verzeichnis /xampp/htdocs/wordpress/wp-content/themes/deintheme/ . Doch es sollte nicht irgendeine Datei sein. Diese Datei muss index.php heißen. WordPress erkennt selbstständig diese Datei und nutzt diese zur Darstellung deiner Blog-Inhalte. Ein einfaches Beispiel für die index.php sieht in etwa so aus.

einfach index.php für das eigene WordPress-Theme
Mit dieser index.php haben wir bereits alle Elemente zusammengestellt, um einfachen Inhalt zu erstellen.

Zeile 1 – 8 und 17 – 18 sind Standard Elemente zur Erstellung eines HTML-Dokuments. Auf die Feinheiten werden wir noch ein wenig später eingehen. Denn der Header-Bereich eines HTML-Dokuments ist der Schlüssel zu besseren Suchmaschinenergebnissen und daher extrem wichtig für euren Blog.

Was aber für den Moment wichtig ist, ist der Teil von Zeile 10 – Zeile 15. Darin werden die Grundelemente des WordPress-Themes festgelegt. Die sogenannten DIV-Elemente oder auch Container genannt, enthalten den Code um verschiedene Bereiche des WordPress-Themes mit Inhalten zu füllen. Dazu werden diese Mit PHP-Skripten gefüllt. Der Bereich mit der ID “wrapper” beinhaltet alle anderen Elemente und könnte auch als Rahmen der Website bezeichnet werden. In diesem Rahmen befinden sich dann die Elemente header, main, sidebar und footer.

  • Der Bereich Header umfasst später den Kopfbereich Eures Templates. Dazu gehören Logo, Blogname und einer Navigation zu den statischen Seiten (sofern Euer Blog solche haben wird).
  • Der Bereich Main umfasst den Inhalt Eures Blogs. Also eure Blogeinträge oder statische Seiten. Somit ein sehr wichtiges Element.
  • Die Sidebar ist ebenfalls nicht zu vernachlässigen, denn sie umfasst beispielsweise ein Suchfeld, das Blog-Archiv, die Kategorien oder etliche bei WordPress.org runterladbare Widgets zur Erweiterung Eurer Blogfunktionen. Sehr sehr mächtig!
  • Der Footer ist nicht ganz so wichtig. Dort kann man Elemente einbinden, die man nicht unbedingt zu sehen braucht um einen Blog zu lesen. Dazu gehören eventuell Google-Analytics-Skripts oder Dinge wie Impressum oder Datenschutzerkärungen 🙂

So einfach ist das. Aber das ist nur die Spitze des Eisberges. So wie die Datei jetzt da zu sehen ist, kann sie Euren Inhalt noch nicht wirklich darstellen. Wenn man es genau nimmt kann man so noch gar nichts sehen. Dafür müssen wir dem Template schon noch beibringen, wie es in der Datenbank nach existierenden Einträgen sucht und vor allem wie es diese darstellen soll.

Ich schaue gerade auf meine Uhr. Es ist 01:43. In wenigen Stunden muss ich an die Arbeit. Ich möchte euch also noch ein wenig mit dem bisherigen Wissen alleine lassen. Vielleicht könnt Ihr die Zeit nutzen. Vielleicht habt lest ihr ein wenig in Euren PHP- oder HTML-Bücher. Oder schaut doch mal bei www.wordpress.de vorbei und schaut euch die Dokumentation an. Oder Ihr wartet einfach bis zu nächsten Eintrag von mir 😀

Beim nächsten mal, zeige ich euch, wie man diese Index.php mit Leben füllt. Einen kurzen Ausflug in den Bereich CSS, PHP & Co. Also nicht verpassen!

4 Replies to “Relaunch Technokrat #3 – Aufbau eines WordPress Themes”

  1. WAHHH schon so spät 🙂 Das denke ich mir dann auch immer… nur dass ich meistens nur durch CS zocken so lange vom pennen abgehalten werfd …

    Bis her schön beschrieben… schlaf gut 😛

Leave a Reply

Your email address will not be published. Required fields are marked *