Die Weblog-Software WordPress zeichnet sich durch eine Trennung von Design und Pro­gramm­kern aus. So­ge­nann­te Themes er­mög­li­chen es, die Frontend-Dar­stel­lung von Website-Inhalten an­zu­pas­sen, ohne das Programm selbst zu verändern. Grund­sätz­lich stellt ein WordPress-Theme Quellcode bereit, der be­schreibt, wie auf einem Server ge­spei­cher­te Inhalte abgerufen und zu­sam­men­ge­stellt werden sollen, damit aus diesen im Falle eines Sei­ten­auf­rufs eine dy­na­mi­sche Webpage erstellt und an einen an­fra­gen­den Web­brow­ser aus­ge­lie­fert werden kann. Für Web­sei­ten­be­trei­ber bieten Themes somit die Mög­lich­keit, Design und Layout einer WordPress-Website inklusive aller Un­ter­sei­ten im Rahmen der zur Verfügung stehenden Mög­lich­kei­ten frei zu gestalten. Im Grund­auf­bau besteht ein WordPress-Theme aus diversen PHP-Quell­da­tei­en, die Template-Files genannt werden, Style­sheets und Lo­ka­li­sie­rungs­da­ten sowie op­tio­na­len Ja­va­Script-Dateien und Grafiken. Wir zeigen Ihnen, welche WordPress-Theme-Be­stand­tei­le Sie kennen sollten, welche Funktion diese Bausteine erfüllen und wie die einzelnen Grund­ele­men­te zu­sam­men­ar­bei­ten.

Grund­ele­men­te eines WordPress-Themes

Während eine statische Webpage im We­sent­li­chen auf einem einzelnen HTML-Dokument basiert, das sämtliche Inhalte sowie Ja­va­Script-Elemente und CSS-Ein­bet­tun­gen enthält, setzt sich ein WordPress-Theme aus mehreren Template-Files zusammen. Diese werden durch Include-Tags mit­ein­an­der verknüpft und be­schrei­ben mithilfe von Template-Tags, wie Inhalte aus Da­ten­ban­ken auf dem Server in eine Webpage ein­ge­bun­den und im Web­brow­ser dar­ge­stellt werden. Soll diese Dar­stel­lung an bestimmte Be­din­gun­gen geknüpft werden, kommen so­ge­nann­te Con­di­tio­nal-Tags zum Einsatz. Darüber hinaus lassen sich über Template-Hooks Plug-ins einbinden. Verwaltet wird die Ausgabe von Inhalten durch einen Me­cha­nis­mus, der in der WordPress-Ter­mi­no­lo­gie als Loop be­zeich­net wird.

Template-Files

Das WordPress-Theme mit all seinen Grund­ele­men­ten kann als eine Art Bauplan für eine Website be­trach­tet werden, der ver­schie­de­ne Zustände abdeckt. Die dynamisch erzeugte Webpage, die an den Browser aus­ge­lie­fert wird, setzt sich aus einem speziell auf die Anfrage zu­ge­schnit­te­nen Satz aus Grund­bau­stei­nen zusammen – je nachdem, ob ein In­ter­net­nut­zer die Über­sichts­sei­te Ihres WordPress-Blogs, die Ein­zel­an­sicht eines Artikels oder einen Kommentar aufruft. Die Grund­bau­stei­ne werden Template-Files genannt. Dabei handelt es sich um PHP-Quell­da­tei­en, die eine Mischung aus HTML, PHP-Code und Template-Tags be­inhal­ten und jeweils genau de­fi­nier­te Aufgaben erfüllen.

Grund­sätz­lich gilt ein WordPress-Theme als funk­ti­ons­fä­hig, wenn es die Template-Files index.php und style.css enthält. In der Regel findet sich in einem WordPress-Theme jedoch eine Vielzahl ver­schie­de­ner Template-Files, die diverse Arten von Inhalten dar­stel­len können und so das volle Funk­ti­ons­spek­trum der beliebten Blog-Software aus­schöp­fen. Folgende Liste zeigt grund­le­gen­de Template-Files, die sich in fast jedem WordPress-Theme finden:

  • style.css: Bei der style.css handelt es sich um eines der beiden Pflicht­ele­men­te eines jeden WordPress-Themes. Dieses Template-File enthält die so­ge­nann­ten Header-In­for­ma­tio­nen wie den Namen des Themes (Theme Name), eine kurze Be­schrei­bung (De­scrip­ti­on), den Namen des Ent­wick­lers (Author), die Ver­si­ons­num­mer (Version), die Lizenz, unter der das Theme steht (License), sowie einen Link zu dieser (License URI). Darüber hinaus fungiert die style.css als Haupt-Style­sheet der WordPress-Website und bietet somit Platz für den CSS-Code des Themes.
  • index.php: Das zweite Pflicht­ele­ment eines jeden WordPress-Themes ist die index.php. Diese fungiert in der Regel als Ar­ti­kel­über­sicht und kann als Start­sei­te genutzt werden. Innerhalb der Template-Hier­ar­chie gilt die index.php als letzte Fallback-Datei. Mit anderen Worten: Wurde für die Ausgabe von Inhalten kein spe­zi­fi­sches Template-File erstellt, greift die Software auf die index.php zurück. Der Aufbau der index.php richtet sich im We­sent­li­chen danach, wie viel Code in weitere Template-Files aus­ge­la­gert wird. Während die index.php eines einfachen WordPress-Themes oft den Großteil des gesamten Quell­codes inklusive HTML-Wur­zel­ver­zeich­nis, Header, Footer, Sidebar und Na­vi­ga­ti­on enthält, werden diese Elemente in kom­ple­xe­ren Themes in zu­sätz­li­chen Template-Files wie der header.php, der footer.php oder der sidebar.php definiert, sodass die index.php lediglich die Funktion eines Grund­ge­rüsts erfüllt. Die index.php zeigt in der Regel eine im Ad­min­be­reich fest­ge­leg­te Anzahl an Artikeln in gekürzter Übersicht.
  • header.php: Kommt bei WordPress die header.php zum Einsatz, be­inhal­tet dieses Template-File in der Regel we­sent­li­che Angaben einer Website wie den Doctype, das öffnende HTML-Tag sowie das Head-Element inklusive Meta-Tags, Links zu Style­sheets und Skripten. Zudem wird in der header.php in der Regel das body-Tag geöffnet. Somit lässt sich der sichtbare Kopf­be­reich des Themes inklusive Na­vi­ga­ti­on in die header.php auslagern.
  • footer.php: Die footer.php dient als Ge­gen­stück zur header.php. Hier wird der sichtbare Footer-Bereich der Website un­ter­ge­bracht. In der footer.php werden in der Regel sowohl das body-Tag als auch das HTML-Tag ge­schlos­sen.
  • sidebar.php: Die WordPress-sidebar.php dient der Aus­la­ge­rung von Sidebar-Inhalten. Hier geben Sie den Code entweder direkt ein oder greifen auf spezielle WordPress-Widgets zurück, die sich über die Funktion dynamic_sidebar aufrufen lassen. Diese Vor­ge­hens­wei­se hat den Vorteil, dass sich Sidebar-Inhalte an­schlie­ßend über den WordPress-Ad­min­be­reich verwalten lassen.
  • content.php: Beiträge in der Blog­über­sicht enthalten in der Regel eine verlinkte Über­schrift und ein Vor­schau­bild sowie einen Teaser oder die gekürzte Version des Beitrags inklusive „Read more“-Link. Einbinden lassen sich diese Inhalte über die content.php. Das Gleiche gilt für Meta-Angaben wie das Ar­ti­kel­da­tum, den Ar­ti­kel­au­tor, Ka­te­go­rien oder Schlag­wör­ter (Tags).
  • single.php: Während die index.php eine Ar­ti­kel­über­sicht bietet, kommt die WordPress-single.php zum Einsatz, wenn ein Nutzer die Ein­zel­an­sicht eines Artikels aufrufen möchte.
  • home.php: Dieses Template-File bietet die Mög­lich­keit, eine ge­son­der­te Start­sei­te für das Weblog zu erstellen. Ver­zich­ten Sie in Ihrem WordPress-Theme auf einen Aufbau mit home.php, zeigt Ihre Website auf Grundlage der index.php eine Übersicht der ak­tu­ells­ten Beiträge als Start­sei­te.
  • page.php: WordPress-Themes sind darauf optimiert, Blog­bei­trä­ge in chro­no­lo­gi­scher Rei­hen­fol­ge dar­zu­stel­len. Neben diesen dy­na­mi­schen Inhalten stellen viele Web­sei­ten­be­trei­ber Ihren Besuchern spezielle Inhalte wie „About me“-Texte oder Im­pres­sums­an­ga­ben als statische Webpages zur Verfügung. Möglich macht dies die WordPress-page.php, mit der sich Ein­zel­zei­ten abhängig vom Layout und Design anderer Template-Files wie der index.php oder der single.php erstellen lassen.
  • 404.php: Möchten Sie für Ihren WordPress-Blog eine 404-Feh­ler­sei­te erstellen, nutzen Sie dafür das gleich­na­mi­ge Template-File. Hier bietet es sich an, zu­sätz­lich das WordPress-Such­for­mu­lar ein­zu­bin­den, um Ihren Besuchern die Mög­lich­keit zu geben, Ihre Website nach den ge­wünsch­ten In­for­ma­tio­nen zu durch­su­chen.
  • search.php: Die Ausgabe von Such­ergeb­nis­sen lässt sich in WordPress über die search.php de­fi­nie­ren.
  • archive.php, category.php, tag.php, author.php, date.php: Neben der Such­funk­ti­on bietet WordPress eine Reihe von Template-Files, mit denen sich Blog­bei­trä­ge nach be­stimm­ten Such­kri­te­ri­en anordnen lassen. Als mögliche Filter stehen Ka­te­go­rien, Schlüs­sel­wör­ter (Tags), Autoren und das Ver­öf­fent­li­chungs­da­tum zur Verfügung. Die Ausgabe der Inhalte erfolgt bei WordPress durch die category.php, die tag.php, die author.php oder die date php. Fehlen diese spe­zi­fi­schen Template-Files, greift die Blog-Software auf die archive.php zurück.
  • comments.php: Stellen Sie Ihren Lesern auf Ihrem Blog eine Kom­men­tar­funk­ti­on zur Verfügung, benötigen Sie eine ge­son­der­te Template-Datei, die das Kom­men­tar­for­mu­lar be­inhal­tet. Dieses de­fi­nie­ren Sie in WordPress mit der comments.php.
  • at­tach­ment.php: Das Template-File at­tach­ment.php kommt zum Einsatz, wenn Web­sei­ten­be­su­cher Zu­satz­in­hal­te wie Grafiken, PDFs oder Media-Files in einer Ein­zel­an­sicht be­trach­ten möchten.
  • image.php: Eine spezielle Version der at­tach­ment.php ist die image.php, mit der sich eine ge­son­der­te Template-Datei für die Ein­zel­an­sicht von Grafiken de­fi­nie­ren lässt. Findet sich keine image.php, kommt die at­tach­ment.php zum Einsatz.
  • rtl.css: Soll Ihr WordPress-Theme auch Sprachen un­ter­stüt­zen, die von rechts nach links ge­schrie­ben werden (z. B. Arabisch oder Hebräisch), wird zu­sätz­lich das Style­sheet rtl.css benötigt.

Um die einzelnen Bausteine einer WordPress-Seite mit­ein­an­der zu ver­knüp­fen und Inhalte aus den Da­ten­ban­ken auf dem Server zu laden, kommen innerhalb der Template-Files Funk­tio­nen zum Einsatz, die in der WordPress-Ter­mi­no­lo­gie Template-Tags genannt werden.

Template-Tags

Bei Template-Tags handelt es sich um Funk­tio­nen, die innerhalb eines Template-File verwendet werden, um Inhalte aus der Datenbank abzurufen. Während diese bei sta­ti­schen Websites direkt im HTML-Quelltext ge­spei­chert werden, be­inhal­ten WordPress-Templates lediglich An­wei­sun­gen, welche Inhalte aus der Datenbank ein­ge­bun­den werden sollen. Template-Tags er­mög­li­chen es der Blog-Software, jede Webpage zum Zeitpunkt des Sei­ten­auf­rufs dynamisch zu erzeugen. Welchen Vorteil ein solches Website-Konzept hat, zeigt folgendes Beispiel:

In der Regel verfügt ein On­line­pro­jekt über einen Namen, der auf jeder Un­ter­sei­te des Projekts dar­ge­stellt wird. Um diesen in ein be­lie­bi­ges Template-File zu in­te­grie­ren, kommt bei WordPress folgendes Template-Tag zum Einsatz: 

bloginfo('name')

Sinnvoll nutzen lässt sich dieses Tag bei­spiels­wei­se, um den Website-Titel au­to­ma­tisch zu aus­zu­ge­ben.

<title><?php bloginfo('name'); ?> |<?php wp_title(); ?></title>

Während die Funktion bloginfo('name') als Platz­hal­ter für den Namen der Website fungiert, gibt wp_title() den Titel der aktuellen Un­ter­sei­te aus. Welche Inhalte anstelle der Platz­hal­ter bei einem Sei­ten­auf­ruf tat­säch­lich aus­ge­ge­ben werden müssen, entnimmt die Software der Datenbank auf dem Server. An­schlie­ßend erstellt sie einen Title nach folgendem Schema:

Name des Blogs | Titel der Unterseite

Bei einer sta­ti­schen Website hingegen müssen Sie den Sei­ten­ti­tel im tat­säch­li­chen Wortlaut auf jeder einzelnen HTML-Seite Ihres Web­pro­jekts hin­ter­le­gen:

<title>Name des Blogs | Titel der Unterseite</title>

Doch was, wenn Sie den Namen Ihres Blogs ändern möchten? Bei einem sta­ti­schen Website-Projekt müssten Sie in diesem Fall die HTML-Dokumente jeder einzelnen Un­ter­sei­te im Editor öffnen und die Anpassung manuell vornehmen. Bei einem dy­na­mi­schen Website-Konzept hingegen gestalten sich Ak­tua­li­sie­run­gen dieser Art deutlich kom­for­ta­bler: Än­de­run­gen, die alle Webseiten betreffen, können Sie an einer einzigen Stelle in der Datenbank vornehmen, da sie dort einmalig vorliegen und durch Template-Tags in jede beliebige Webseite geladen werden können.

Nach dem gleichen Schema werden auch Über­schrif­ten, Post-Inhalte oder Metadaten in die dafür vor­ge­se­he­nen Template-Files geladen:

the_title() 
the_content()
the_author() 
the_time()
the_category() 
the_tags()

Eine Übersicht aller Template-Tags finden Sie im Codex auf WordPress.org.

Include-Tags

Eine Son­der­form der WordPress-Template-Tags sind so­ge­nann­te Include-Tags, die innerhalb eines Themes verwendet werden, um Template-Files wie die header.php, die footer.php oder die sidebar.php zu laden. Auch bei Include-Tags handelt es sich um WordPress-interne Funk­tio­nen, die in folgender Form in grund­le­gen­de Template-Files wie die index.php, die single.php oder eine page.php in­te­griert werden: 

get_header()
get_footer()
get_sidebar()

Auch hier zeigt sich der oben an­ge­spro­che­ne Vorteil: Wird der Code für den Header, den Footer und die Sidebar einer Website aus speziell dafür vor­ge­se­he­nen Template-Files geladen, werden Än­de­run­gen, die an diesen drei Template-Files vor­ge­nom­men werden, au­to­ma­tisch für alle Un­ter­sei­ten über­nom­men, die auf diese Inhalte über Include-Tags zugreifen.

Template-Hooks

Bei Template-Hooks (auch „Action-Hooks“; dt. „Haken“) handelt es sich um Schnitt­stel­len, die das Theme mit in­di­vi­du­el­len Funk­tio­nen oder Plug-ins der Weblog-Software verbinden. Die meisten dieser Schnitt­stel­len sind bereits im WordPress-Kern angelegt. So kann ein Theme-Ent­wick­ler oder ein Nutzer eine Aktion festlegen, bevor bei­spiels­wei­se die Ausgabe beginnt oder nachdem eine Da­ten­bank­ab­fra­ge ab­ge­schlos­sen wurde. So lassen sich bei­spiels­wei­se spezielle In­for­ma­tio­nen direkt im Header, Footer oder in der Sidebar einbinden. Darüber hinaus können Ent­wick­ler eigene Hooks in ihre Themes in­te­grie­ren.

Con­di­tio­nal-Tags

Bei den Con­di­tio­nal-Tags handelt es sich PHP-State­ments wie if, else oder while, die es in Kom­bi­na­ti­on mit WordPress-Funk­tio­nen er­mög­li­chen, die Dar­stel­lung be­stimm­ter Inhalte an Be­din­gun­gen zu knüpfen. Das kann bei­spiels­wei­se ein spe­zi­el­ler Will­kom­mens­gruß für re­gis­trier­te Nutzer sein: 

if ( is_user_logged_in() ):
    echo 'Welcome, registered user!';
else:
    echo 'Welcome, visitor!';
endif;

Der Loop

Als Loop wird der Me­cha­nis­mus innerhalb der WordPress-Software be­zeich­net, der für die Ausgabe von Inhalten zuständig ist. Grund­sätz­lich handelt es sich dabei um diverse WordPress-Funk­tio­nen, die durch Con­di­tio­nal-Tags mit­ein­an­der verknüpft sind. Folgendes Beispiel zeigt den Grund­auf­bau eines WordPress-Loops:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <h2><?php the_title(); ?></h2>
    <div class="entry">
        <?php the_excerpt(); ?>
    </div>
<?php endwhile; endif; ?>

Der Code­ab­schnitt if (have_post()) in Zeile 1 weist WordPress an zu prüfen, ob Blog­bei­trä­ge vorliegen. Finden sich Beiträge in der Datenbank, ver­an­lasst der Code­ab­schnitt while (have_posts()) : the_post() die Software dazu, nach­fol­gen­de Funk­tio­nen im Loop aus­zu­füh­ren, bis have_posts() nicht mehr wahr ist – sprich: bis keine Posts mehr vorhanden sind.

Der Loop umfasst somit alle Funk­tio­nen bis zum PHP-Statement endwhile in Zeile 6 – in diesem Beispiel die Funktion the_title(), die der Ausgabe der Ar­ti­kel­über­schrift dient, und die Funktion the_exerpt(), die die Software anweist, einen Auszug des Beitrags aus der Datenbank zu laden. Für die Dar­stel­lung der Inhalte wird definiert, dass der Bei­trags­ti­tel im Über­schrift­for­mat h2 und die Ar­ti­kel­vor­schau innerhalb einer Div-Box mit dem CSS-Klas­sen­na­men entry aus­ge­ge­ben wird.

Auf der Start­sei­te eines WordPress-Blogs führt ein einfacher Loop dieser Art dazu, dass Titel und Text­vor­schau von Beiträgen un­ter­ein­an­der aus­ge­ge­ben werden, beginnend mit dem ak­tu­ells­ten Inhalt. Die Anzahl der an­ge­zeig­ten Beiträge lässt sich im Ad­min­be­reich kon­fi­gu­rie­ren. Üblich sind jedoch kom­ple­xe­re WordPress-Loops, die neben diversen Metadaten wie Autor, Datum, Kategorie und Tags auch einen Link auf die Ein­zel­an­sicht des Beitrags enthalten.

Zum Hauptmenü