Eine neue Webseite entsteht (Teil 7): Die Datei-Struktur des WordPress-Themes

Endlich geht es weiter mit der Tutorial-Serie »Eine neue Webseite entsteht«. Nachdem wir im Tutorial Teil 6 WordPress und das Starkers Blank-Theme auf einem lokalen Server installiert haben, geht es heute weiter mit der Struktur der PHP-Dateien in WordPress. Dabei erstelle ich zur besseren Übersicht ein Dateien-Schema für die CoffeeLove-Webseite.

1. Zuerst HTML und CSS erstellen oder direkt in WordPress arbeiten

Generell gibt es zwei Möglichkeiten bei der Programmierung deines WordPress-Themes vorzugehen. Entweder du programmierst dein Design erst komplett in HTML und CSS und überträgst deinen Code anschließend in die Struktur von WordPress. Oder du baust deine HTML und CSS Programmierung direkt in die WordPress-Dateien ein. Bei der zweiten Vorgehensweise ist es hilfreich auf einem lokalen Server zu arbeiten. So kannst du auch offline an deinem Theme weiter programmieren.

Welche Variante man bevorzugt liebt sicher auch daran, wie vertraut man bereits mit dem WordPress Theme-System ist, und wie sicher man in HTML und CSS arbeitet. Aus meiner persönlichen Erfahrung ist es etwas zeitsparender, direkt in den WordPress-Dateien zu arbeiten. Außerdem ist die Arbeit direkt in WordPress eine gute Übung, sich mit dem Aufbau der PHP-Dateien von WordPress vertrauter zu machen.

Ein Tipp ist vielleicht, dass du für das allererste WordPress-Theme eine bereits bestehende HTML und CSS Programmierung verwendest. So kannst du dich ganz auf die Struktur von WordPress konzentrieren, und diese besser kennenlernen. Später kannst du dann deine Arbeitsweise umzustellen.

2. Die Theme-Struktur von WordPress

WordPress bietet im Standard-Theme TwentyTen (das auch die Vorlage des hier im Tutorial verwendeten Starkers Blank-Theme ist), jede Menge Möglichkeiten individuelle Styles für die einzelnen Webseiten-Elemente wie Seiten, Artikel, Kategorien etc. anzulegen. Um WordPress so flexibel zu machen, gibt es im Theme-Ordner php-Dateien mit Teilelementen. Z.B. gibt es die header.php Datei für den Headerbereich deiner Webseite, category.php als Gerüst für die Ansicht deiner Kategorien usw. Aus diesen einzelnen Dateien stellt dann WordPress jeweils die fertigen Seiten zusammen. Das System funktioniert also ähnlich wie ein Puzzle mit vielen Teilen, aus denen man verschiedene Bilder erzeugen kann.

Seit der WordPress-Version 3.0 und der Veröffentlichung von TwentyTen hat sich die Dateien-Struktur von WordPress ein wenig verändert. Der Artikel »From Kubrick to TwentyTen« bei Webdesigner Depot bietet eine hilfreiche Übersicht über die neuen Theme-Dateien von WordPress 3.0.

3. Die Theme-Struktur für das eigene Theme bestimmen

Möchtest du deine eigene Webseite in WordPress erstellen, benötigst du natürlich nicht immer alle Dateien die im WordPress-Standardtheme angeboten werden. Vor allem wenn du, wie bei der CoffeeLove-Webseite den Blog nicht als zentrales Element der Webseite nutzen möchtest, sondern nur als zusätzliches Element auf einer Unterseite.

Es ist also hilfreich sich vorab zu überlegen, welche php-Dateien für die eigene Webseite benötigt werden. Dazu habe ich ein praktisches Schaubild für meine Webseite erstellt, auf dass ich während der Programmierung auch immer wieder zurückgreifen kann.
Theme Datei-Struktur in WordPress
Ich habe alle Seiten der Webseite aufgelistet, und die jeweiligen php-Dateien zugeordnet. Hier kannst du das Theme-Schema in einem größeren Format anschauen.

Für die CoffeeLove-Webseite, die ja kein Blog an sich ist, sondern WordPress eher in der Funktion eines Content Management Systems nutzt, benötigte ich einige Dateien des Standard-Themes nicht (z.B. tag.php für Schlagwörter oder search.php für die Suche). Dafür werde ich mir für die Seiten mit individuellem Layout (Startseite, Über Uns, Kontakt) eigene Seiten-Templates (template-home.php, template-about.php, template-conact.php) anlegen. Für die Seite des Impressums werde ich die in TwentyTen eingeführte Datei onecolumn-page.php nutzen. Diese Datei ist ein Template für eine Standard-Seite ohne Sidebar.

Die Dateien header.php und footer.php nutze ich auf allen Seiten. Sidebar.php verwende ich nur im Blog. Für den Loop, der immer eine Liste von Artikeln in WordPress anzeigt, werde ich jeweils ein eigenes Template für den allgemeinen Blog (loop-index.php), und für die Anzeige der Artikel einer bestimmten Kategorie (loop-category.php) anlegen. So kann ich den Loop sehr flexibel nutzen, ohne die eigentliche Datei loop.php zu modifizieren.

3.1. Ein individuelles Template einer WordPress PHP-Datei erstellen

Ein neues Template, z.B. für eine individuelle About-Seite in WordPress kannst du dir anlegen, indem du die entsprechende Datei in der Zeile 1 mit folgendem Code beginnst:

<?php
/**
 * Template Name: About Page
 * A custom page template for the CoffeeLove About-Page.
 */

get_header(); ?>

Mit diesem Code-Schnipsel rufst du die header.php Datei auf (quasi als erstes Puzzle-Teil) und sagst gleichzeitig, das diese Datei die Vorlage für die About-Seite deines Themes ist. Der Name des Templates lautet also »About Page«. Die Zeile darunter (hier Zeile 4) ist eine Beschreibung der Template-Vorlage. Es ist hilfreich alle Dateien möglichst gut zu kommentieren, damit man sich auch später noch leicht in den Theme-Dateien zurecht findet. Die »About Page« Template-Datei speicherst du dann z.B. mit dem Namen template-about.php in deinen Theme-Ordner. Legst du später deine About-Seite im WordPress-Adminbereich an, wählst du im Feld »Attribute« das Template »About Page« aus.

Nachdem ich alle PHP-Dateien angelegt habe, sieht mein Theme Dateien-Ordner also so aus:

Theme Datei-Struktur in WordPress
Diese php-Dateien habe ich in meinem CoffeeLove-Themeordner angelegt.

Wenn du dir einen Überblick über alle Dateien deines Themes gemacht und die individuellen Template-Dateien angelegt hast, kannst du beginnen den Code deiner Dateien entsprechend deinem Design anzupassen. Parallel erarbeitest du dir mit Hilfe von HTML und CSS das Design deiner WordPress-Seite. Ich arbeite hierbei immer auf einem lokalen Server, um Veränderungen in der CSS-Datei schnell überprüfen zu können.

Im nächsten Teil des Tutorials geht es dann also weiter mit der WordPress Code-Anpassung und HTML/CSS Programmierung in den einzelnen WordPress-Dateien. Ich werde dabei mit dem Header beginnen und mich von der Startseite ausgehend Schritt für Schritt vorarbeiten.

Ich hoffe dir hat dieser weitere Teil des CoffeeLove-Tutorials gefallen, und du kannst die Tipps zur WordPress Theme-Erstellung auch für deine eigenen Arbeiten gut gebrauchen. Über dein Feeback und weitere Tipps zum Thema WordPress-Theme Programmierung freue ich mich sehr!

Weitere Teile der Tutorial-Serie

26 Kommentare zu “Eine neue Webseite entsteht (Teil 7): Die Datei-Struktur des WordPress-Themes

  1. Yippie – es geht weiter :-)

    • Hallo Jürgen,

      ja, endlich kann es weiter gehen, sorry für die kleine Verzögerung :-) Mir macht das Tutorial auch jede Menge Spaß :-)

      Viele Grüße
      Ellen

  2. Ich könnt‘ dich knuddeln … Ich stehe gerade vor dem Problem, eine recht komplexe Seite mittels WordPress aufziehen zu wollen. Viele Seiten, die gemeinsame Kategorien, Tags etc. haben und doch getrennt behandelt werden wollen. Da bietest du dieses Site-Sheet an … Genau richtig. Vielleicht bekomme ich damit das gedanklich-konzeptionelle Tohuwabohu in meinem Hirn in den Griff.

    • Hallo Jörg,

      vielen Dank für deinen Kommentar und das tolle Feedback. Es freut mich sehr, dass dir das Tutorial so gelegen kommt :-)

      Ja, mir hilft es immer sehr ein Schema für alle Elemente der neuen Webseite zu erstellen, um einen besseren Überblick zu bekommen, welche PHP-Dateien ich nicht benötigen werde und welche ich mir individuell anlegen muss.

      Später kann man die Übersicht dann auch noch einmal zur Hand nehmen, und checken ob man auch keine Datei bei der Programmierung vergessen hat :-)

      Viele Grüße,
      Ellen

  3. Seniorenlady

    http://seniorenplus60.wordpress.com/ war mal mein Blog zum lernen KURS von WP. aber ich kann ihn nicht nutzen für 3.0 schade. Wollte dann WP deutsch einrichten aber für MAC, so was schwieriges, noch mal schade, ich gebe auf!!
    Gibt ja auch noch andere Blogs. War trotzdem interessant. Grüsse Ellinor

    • Hallo Ellinor,

      vielen Dank für deinen Kommentar und dein Feedback. Warum kannst du den deinen Blog für WordPress 3.0 nicht mehr nutzen? Funktioniert dein Theme nicht mehr in der neuen Version?

      Ich habe selbst noch nicht die Sprach-Version für einen wordpress.com Blog gewechselt, möchte es aber gerne einmal testen. Vielleicht kann ich dir dann mit ein paar Tipps weiterhelfen. Ich melde mich wieder, sobald ich mehr weiss :-)

      Viele Grüße
      Ellen

  4. Hallo Ellen

    Wirklich gut gemachte Anleitung, auch schön bebildert. Eins ist mir allerdings aufgefallen:

    Du hast das Page Template für die „Über mich“-Seite page-about.php getauft. Ich würde hier allerdings eine andere Variante, z.B. template-about.php empfehlen. page-xy.php wird nämlich automatisch für Seiten mit dem Slug xy verwendet und dies könnte zu Verwirrung führen, wenn eine Seite den Slug xy hat, aber gar nicht dieses Template verwenden sollte…

    Gruss
    Pascal

    Ps. Hast du meine E-Mail/Kontaktanfrage erhalten?

    • Hallo Pascal,

      vielen herzlichen Dank für dein Feedback und auch für deinen Tipp zu den Beschriftungen der Template-Dateien. Da hast du natürlich Recht, da ich die Seiten ja sowieso auf Deutsch anzulegen (und nicht mit about etc. benennen werde) ist es sinnvoller einen eindeutigen Template-Namen zu geben, der nicht aus versehen automatisch zu einer anderen Seite zugeordnet werden kann.

      Ich habe die Dateien im Tutorial gerade noch einmal angepasst :-)

      Als hilfreichen Tipp für alle, habe ich hier noch einmal einen Artikel zum Thema Template-Hierarchie in WordPress 3 herausgesucht.

      Vielen Dank und viele Grüße,
      Ellen

  5. Weil du gerade die Template erklärst, sozusagen.

    Ich nutze ja immer noch WP 2.irgendwas, aber auf Xampp läuft bei mir 3.0.

    Jetzt hab ich da mal vor kurzem in die Templates vom Standardtheme geschaut – Ich war reichlich verwirrt über dieses viele Codezeugs da O.o

  6. Ich kann den neuen Features bzgl. Themes von WordPress 3 so ganz und gar nichts abgewinnen. Bin dann doch viel lieber die „do it yourself“ Frau und progge meine Themes sowieso alles selbst genauso wie ich sie von oben bis unten brauche ;-)

    • Hallo Tanja,

      vielen Dank für deinen Kommentar und dein Feedback :-) Mhh, welche Features gefallen dir denn nicht so? Ich selbst habe die neuen Features (wie z.B. die Menüs) schon als sehr hilfreich empfunden.

      In die Theme-Dateien muss man sich zwar schon etwas einarbeiten, aber alles selbst programmieren ist ja bestimmt auch arbeitsintensiv. Nutzt du dann eine eigene Theme-Vorlage von der aus du ein neues Theme erstellst, oder fängst du quasi auf einem ganz leeren Blatt an?

      Viele Grüße,
      Ellen

  7. Ich habe die 3er Version nur auf einem Testblog laufen und festgestellt, dass es dort nichts neues gibt, das ich nur ansatzweise gebrauchen könnte. Da WordPress immer mehr zur eierlegenden Wollmilchsau entwickelt wird und immer mehr Speicher frisst, weigere ich mich schlichtweg noch irgendwelche Updates durchzuführen. Ich brauche heutzutage schon 200MB Memory Limit im Hintergrund, damit die Blogs reibungslos laufen. Vorne wird einem schön 30MB vorgelogen und hinten gehts ans Eingemachte, wo keiner es sieht und keine Fehlermeldungen auftauchen ;-)

    Wenn ich eine Theme progge, nehme ich meist ein altes von mir und baue darauf neu auf wenn es halbwegs passt. Auch mit einem weißen Blatt ist möglich, bzw. kommt ab und an vor, je nachdem was schneller geht. Ist ja wirklich nichts weltbewegendes dran und ein Theme zu proggen geht meist schneller als ein bestehendes „fremdes“ zu nehmen und umzubauen.

    • Hallo Tanja,

      vielen Dank für deinen Kommentar und dein Feedback :-) Allerdings muss ich sagen, dass ich mich deiner Meinung bzgl. des WordPress-Updates garnicht anschließen kann. Denn ich finde es sogar sehr wichtig, immer auf dem neusten Stand bei der Weiterentwicklung eines Systems wie WordPress zu bleiben. Auch allein schon wegen der Sicherheit der eigenen WordPress-Installation.

      Aber auch ansonsten finde ich persönlich es immer wichtig, mit der Zeit zu gehen und sich nicht vor Updates und Neuerungen zu verschließen. Denn die Entwicklung geht ja immer weiter, und was macht man dann bei der Version WP 4.0 und so weiter…

      Auch für jemanden, der sich noch nicht so lange wie du mit WordPress befasst, finde ich deine Empfehlung eher ungeeignet. Schließlich sollte man sich ja besonders am Anfang gleich mit der aktuellen WordPress-Version, sowie den neuen Features und Themes befassen. Dass du dich nach deiner eigenen Einschätzung gegen ein Update entscheidest ist ja dann völlig in Ordnung, und deine persönliche Entscheidung. Mir ist es eben nur sehr wichtig, dass hier im Tutorial die aktuelle WordPress-Version besprochen wird :-)

      Das du deine Themes von einer eigenen Vorlage erarbeitest, ist natürlich vor allem für geübte Theme-Programmierer sicher auch eine effiziente Möglichkeit. Ich selbst nutze gerne die Blank-Themes wie z.B. Starkers. Das bei dieser Theme-Vorlage die neuen Dateien schon eingebunden sind, finde selbst ich eigentlich sehr hilfreich :-)

      Viele Grüße,
      Ellen

  8. Sorry Ellen, aber Deine Einstellung kann ich nicht teilen. Mir bringt das aktuellste WordPress System leider ganz und gar nichts mehr, wenn es von vorne bis hinten nicht funktioniert. Der Totalausfall im Mai war mir Lehre genug um meine Finger von weiteren noch mehr Speicher fressenden Versionen zu lassen ;-)

    • Hallo Tanja,

      vielen Dank für dein Feedback :-) Mhhh, schade, dass du dich mit WordPress 3.0 so gar nicht anfreunden kannst…mir selbst gefallen die Features wirklich gut.

      Aber es ist eben so, dass viele Menschen WordPress zu ganz unterschiedlichen Zwecken nutzen (private Blogs, Firmenseiten, Profi-Blogs etc.), und da sind die Anforderungen und gewünschten Features an das System eben auch sehr unterschiedlich :-)

      Viele Grüße,
      Ellen

  9. Hallo Ellen,

    die grafische Übersicht der verschiedenen WordPress Theme Dateien ist wirklich hilfreich. Man kann sonst sehr schnell mal den Überblick verlieren. Ich bin schon gespannt auf den achten Teil der Serie.

    Viele Grüße
    Jan

    • Hallo Jan,

      vielen Dank für dein Feedback, freut mich, dass dir der Artikel gefällt :-) Ja, mir geht es selbst auch immer mal wieder so, dass ich z.B. die 404.php vergesse zu bearbeiten ;-) Daher finde ich eine Übersicht aller benötigten Dateien auch sehr hilfreich :-)

      Viele Grüße
      Ellen

  10. Hallo Ellen,
    echt grandioses Tutorial! Nach sowas habe ich lange gesucht versuche gerade mein Eigenes Design für unsere Feuerwehr hiermit zu erarbeiten! Deine Tutorials sind wirklich verständlich und auf den Punkt gebracht. Freue mich schon auf den nächsten Teil!
    Grüße Stefan

    • Hallo Stefan,

      vielen herzlichen Dank für dein positives Feedback. Das freut mich wirklich sehr, dass du das Tutorial so gut nutzen kannst und gleich deine eigene Seite umsetzt :-)

      Ich arbeite gerade am nächsten Teil der Serie :-)

      Viele Grüße,
      Ellen

  11. weiter! weiter! weiter!

    btw: für mich bis jetzt das beste deutschsprachige step-by-step tutorial das ich je gefunden habe.

    nice!

    • Da hast du wirklich wirklich wirklich recht!

      • Hallo Stephi, Halle Matthias,

        vielen herzlichen Dank für das tolle Feedback. Das freut mich wirklich riesig und ich versuche mir die größte Mühe beim Tutorial zu geben und keinen Schritt auszulassen :-)

        Heute arbeite ich am nächsten Teil ;-)

        Viele Grüße,
        Ellen

  12. Hi Ellen,

    wenn ich etwas zu CSS und WordPress suche lande ich immer öfters bei Dir. Ist nicht das Schlechteste. ;-)
    Wenn mich google auf diese Seite 7 geführt hat, wie komme ich von dieser Seite eigentlich auf die Seite 6?

    LG
    Uwe

  13. Mein Posting von vorhin: Wer lesen kann ist klar im Vorteil:

    „Endlich geht es weiter mit der Tutorial-Serie »Eine neue Webseite ent­steht«. Nachdem wir im Tutorial Teil 6 WordPress und das Starkers Blank-Theme auf einem lokalen Server instal­liert haben,…“

    Sorry. :-)
    Uwe

Hinterlasse eine Antwort

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