Gerade wenn man zum ersten mal eine Webseite mit WordPress umsetzten möchte, kann die Fülle an Dateien im Theme-Ordner ganz schön verwirrend sein. Welche Datei ist eigentlich für welchen Bereich der Webseite zuständig? Und wo muss der HTML-Code eingefügt werden, damit das Layout korrekt angezeigt wird? Jede Menge Fragen tauchen auf. Um einen ersten Überblick über die Theme-Dateien zur Einarbeitung in WordPress anzubieten, habe ich mir das Toolbox-Themes (ein modernes Blank-Theme, dass sich sehr gut als Grundlage zur Entwicklung eines eigenen WordPress-Themes eignet) einmal genauer angeschaut und einen Überblick über die Theme-Dateien vorbereitet.
Die Theme-Dateien im Überblick
header.php
In die header.php befindet sich der Code des head-tags der Webseite, sowie der Beginn des body-tags. Hier kommt außerdem der Code für deine Webseiten-Überschrift, den Header und die Header-Navigation hinein. Dieser Code wird dann von jeder Seite deiner Webseite immer wieder aufgerufen.
footer.php
Die footer.php Datei ist quasi das Gegenstück zur header.php. Hier schließt sich der body-tag wieder. Außerdem kannst du in der footer.php Datei den Code für den Footerbereich deiner Webseite unterbringen. Eventuell kannst du dazu auch die praktische Widget-Funktion von WordPress nutzen.
sidebar.php
Meist werden auf einem WordPress-Blog eine oder auch mehrere Sidebars genutzt. Der Inhalt der Sidebars wird über die sidebar.php Datei aufgerufen. Natürlich kannst du deinen Code für den Sidebar-Inhalt direkt in die sidebar.php Datei schreiben. Viel praktischer ist es aber von Widgets gebrauch zu machen und diese über die Funktion dynamic_sidebar (weitere Infos im WordPress Codex) in sidebar.php aufzurufen. So kannst du deinen Sidebar-Inhalt später über den WordPress-Adminbereich (Design/Widgets) verwalten und anpassen.
index.php
Die index.php Datei ruft die Startseite eines WordPress-Blogs auf. Hier kommt sozusagen alles zusammen. Die Inhalte von header.php, footer.php und die sidebar.php werden jeweils über die get_… Funktionen aufgerufen.
Um die im Adminbereich unter Einstellungen / Lesen bestimmte Anzahl von Artikeln auf der Blog-Startseite anzuzeigen, brauchst du außerdem den Code-Schnipsel:
< ?php get_template_part( ‚content‘, get_post_format() ); ?>
[/php]
Mit Hilfe dieses Code-Schnipsels kannst du alle Artikel in ihrem jeweiligen Post Format anzeigen (weitere Infos zu den Post Formats). Zusätzlich kannst du in der index.php Datei noch die Seitennavigation (neuere/ältere Artikel) anzeigen.
content.php
Für den Inhalt eines Artikels in der gekürzten Übersicht ist die content.php Datei zuständig. Der Artikel wird entweder als Excerpt gekürzt (für die Ansicht im Archiv oder in Suchergebnissen) oder er wird mit Hilfe des more-links an einer im Artikel selbst festgelegten Textstelle gekürzt.
In der content.php Datei befinden sich auch alle Meta-Angaben zu einem Artikel wie z.B. Artikeldatum, Artikelautor, Kategorien oder Schlagwörter (tags).
content-link.php, content-image.php etc.
Über die content-post-format.php Dateien kannst du den gleichen Inhalt wie in der content.php Datei aufrufen, aber diesen für eine spezielle Ansicht des entsprechenden Post Formats anpassen. Als Beispiel kannst du in content-image.php den Artikel-Titel entfernen.
single.php, content-single.php und comments.php
Die Single.php Datei ist im Gegensatz zu index.php für die Einzelansicht eines Artikels zuständig. Auch hier wird also wieder der Inhalt von header.php, footer.p und sidebar.php aufgerufen. Um den Inhalt eines einzelnen Artikels aufzurufen wird dann folgender Code-Schnipsel benötigt:
< ?php get_template_part( ‚content‘, ’single‘ ); ?>
[/php]
Dieser Code-Schnipsel ruft den Inhalt der content-single.php Datei auf. In dieser Datei wird dann der gesamte Artikelinhalt aufgerufen. Außerdem kannst du hier Meta-Daten wie z.B. die Anzeige eines Autorenfeldes integrieren.
Nachdem der Inhalt des Artikels mit Hilfe von content-single.php aufgerufen wurde, folgt in der single.php der Aufruf der Kommentare über den Code:
< ?php comments_template( “, true ); ?>
[/php]
Dieser Code-Schnipsel sorgt dann dafür, dass der Inhalt der comments.php Datei aufgerufen wird. Diese ist für die Anzeige der Kommentare des Einzelartikels zuständig.
page.php und content-page.php
Für WordPress-Seiten funktioniert das Prinzip ganz ähnlich, wie für die Anzeige von Artikeleinzelseiten. Über die Datei page.php wird der Header, der Footer und die Sidebar aufgerufen. Über „get_template_part content page“ wird dann der Inhalt der content -page.php Datei aufgerufen. In der page.php wird danach wieder der Kommentarbereich mit Hilfe von comments_template aufgerufen.
full-width-page.php
Benötigst du auch die Möglichkeit für eine WordPress-Seite ohne Sidebar, kannst du die full-width-page.php Datei nutzen und hier auf den Code get_sidebar verzichten. Die Auswahl, welches Template du bei einer Seite jeweils nutzen möchtest, hast du dann später im Adminbereich beim Anlegen bzw. Bearbeiten einer Seite.
archive.php, category.php, tag.php, author.php
Die Archivseiten in WordPress werden über die Theme-Dateien archive.php (für die Anzeige des aller Artikel eines Monats, Jahres oder Tages), category.php (für die Anzeige aller Artikel einer bestimmten Kategorie, tag.php (für die Anzeige aller Artikel eines Schlagwortes) und author.php (für die Anzeige aller Artikel eines bestimmten Autors) aufgerufen.
search.php, search-form.php
Die search.php Datei ist für die Anzeige der Suchergebnisseite zuständig. Das Suchformular wird in WordPress übrigens über die Funktion get_search_form (weitere Infos im WordPres Codex) aufgerufen.
Möchtest du ein individuelles Suchformular einfügen, kannst du eine extra searchform.php Datei für dein Formular anlegen.
404.php
Die 404.php Datei ist für den Seiteninhalt verantwortlich, der bei einem 404-Seitenfehler angezeigt wird. Auf dieser Seite ist es auch sinnvoll, das Suchformular mit get_search_form aufzurufen, um den Lesern eine Möglichkeit zu geben, den gewünschten Seiteninhalt zu finden.
image.php
Die Datei image.php ist für die Anzeige eines einzelnen Bildes (z.B. aus einer Bildergalerie) zuständig. Hilfreich ist es hier eine Navigation für die Anzeige des nächsten und vorherigen Bildes einzubinden, z.B. mit den Funktionen previous_image_link und next_image_link.
functions.php
Die functions.php Datei ist eine sehr wichtigste Datei eines WordPress-Themes. Gleichzeitig ist die Funktion der Datei anfangs aber auch etwas schwierig zu verstehen. Die functions.php fungiert ähnlich wie ein Plugin und du kannst verschiedene Funktionen und Filter über die functions.php in dein WordPress-Theme integrieren.
Da die Möglichkeiten der functions.php Datei so vielseitig sind ist es am besten, wenn du für die Entwicklung deines eigenen Themes die functions.php z.B. des Toolbox-Themes als Basis verwendest. So kannst du dein Theme z.B. für die Übersetzung in eine andere Sprache vorbereiten, die Post Formats Option im Theme aktivieren, die individuelle Menüfunktion von WordPress aktivieren oder verschiedene Sidebars für dein Theme einrichten.
style.css (Hauptstylesheet)
Die style.css Datei ist die Datei für das Hauptstylesheet deiner Webseite.
rtl.css
Die rtl.css Datei dient der Unterstützung deines Themes für Sprachen, die von rechts nach links geschrieben werden wie Arabisch oder Hebräisch. Weitere Infos findest du auch im Artikel „Rtl-Schrift-Unterstützung (für Arabisch und Hebräisch) in WordPress“.
screenshot.png
Das Screenshot-Bild (jpg ode png) sollte ein Vorschaubild oder den Namen deines Themes zeigen. Des wird in der Themes-Übersicht im Adminbereich (Design/Themes) angezeigt.
Ordner innerhalb des Theme-Ordners
images
In den images-Ordner legst du alle Bilder ab, die für dein Themedesign benötigst.
js
Alle JavaScript-Dateien solltest du meiner Ansicht nach übersichtshalber auch in einem eigenen Ordner (z.B. mit dem Namen js) sammeln. Im Toolbox-Theme wäre das z.B. die html5.js Datei.
css
Falls du zusätzliche CSS-Dateien für dein Theme nutzt, kannst du diese in einem Unterorder mit dem Namen „css“ ablegen.
languages
Alle Theme-Übersetzungsdateien (mit den Endungen .po und .mo) kommen in den languages Ordner. Weitere Infos zur Übersetzung eines WordPress-Themes kannst du auch im Artikel „WordPress-Theme Übersetzung mit dem Codestyling Localization Plugin“ nachlesen.
inc oder includes
Verwendest du z.B. eine Theme-Optionenseite oder individuelle Widgets (siehe aktuelles WordPress Standard-Theme Twenty Eleven) kannst du diese zur besseren Übersicht in einem eigenen Ordner mit dem Namen „inc“ oder „includes“ anlegen.
Tipps zum Weiterlesen
- übersichtlicher Artikel im WordPress Codex über Theme-Entwicklung
- die WordPress Template Hierachie erklärt im WordPress Codex (mit praktischem Übersichtsbild)
- weitere Infos zum Arbeiten mit dem Toolbox-Blanktheme findest du außerdem im Artikel „HTML5 und Post Formats mit dem Toolbox WordPress Theme“
Ich hoffe diese Übersicht über die Dateien eines WordPress-Themes hilft die bei der Erstellung eines eigenen Themes oder auch bei der Anpassung eines vorhandenen Themes weiter.
Hast du Fragen, Anregungen oder weitere Tipps zur Verbesserung des Artikels schreibe doch einfach einen Kommentar. Ich freue mich über dein Feedback!
Schreibe einen Kommentar