WordPress-Theme: Bestandteile und Aufbau

Die Weblog-Software WordPress zeichnet sich durch eine Trennung von Design und Programmkern aus. Sogenannte Themes ermöglichen es, die Frontend-Darstellung von Website-Inhalten anzupassen, ohne das Programm selbst zu verändern. Grundsätzlich stellt ein WordPress-Theme Quellcode bereit, der beschreibt, wie auf einem Server gespeicherte Inhalte abgerufen und zusammengestellt werden sollen, damit aus diesen im Falle eines Seitenaufrufs eine dynamische Webpage erstellt und an einen anfragenden Webbrowser ausgeliefert werden kann. Für Webseitenbetreiber bieten Themes somit die Möglichkeit, Design und Layout einer WordPress-Website inklusive aller Unterseiten im Rahmen der zur Verfügung stehenden Möglichkeiten frei zu gestalten. Im Grundaufbau besteht ein WordPress-Theme aus diversen PHP-Quelldateien, die Template-Files genannt werden, Stylesheets und Lokalisierungsdaten sowie optionalen JavaScript-Dateien und Grafiken. Wir zeigen Ihnen, welche WordPress-Theme-Bestandteile Sie kennen sollten, welche Funktion diese Bausteine erfüllen und wie die einzelnen Grundelemente zusammenarbeiten.

Grundelemente eines WordPress-Themes

Während eine statische Webpage im Wesentlichen auf einem einzelnen HTML-Dokument basiert, das sämtliche Inhalte sowie JavaScript-Elemente und CSS-Einbettungen enthält, setzt sich ein WordPress-Theme aus mehreren Template-Files zusammen. Diese werden durch Include-Tags miteinander verknüpft und beschreiben mithilfe von Template-Tags, wie Inhalte aus Datenbanken auf dem Server in eine Webpage eingebunden und im Webbrowser dargestellt werden. Soll diese Darstellung an bestimmte Bedingungen geknüpft werden, kommen sogenannte Conditional-Tags zum Einsatz. Darüber hinaus lassen sich über Template-Hooks Plug-ins einbinden. Verwaltet wird die Ausgabe von Inhalten durch einen Mechanismus, der in der WordPress-Terminologie als Loop bezeichnet wird.

Template-Files

Das WordPress-Theme mit all seinen Grundelementen kann als eine Art Bauplan für eine Website betrachtet werden, der verschiedene Zustände abdeckt. Die dynamisch erzeugte Webpage, die an den Browser ausgeliefert wird, setzt sich aus einem speziell auf die Anfrage zugeschnittenen Satz aus Grundbausteinen zusammen – je nachdem, ob ein Internetnutzer die Übersichtsseite Ihres WordPress-Blogs, die Einzelansicht eines Artikels oder einen Kommentar aufruft. Die Grundbausteine werden Template-Files genannt. Dabei handelt es sich um PHP-Quelldateien, die eine Mischung aus HTML, PHP-Code und Template-Tags beinhalten und jeweils genau definierte Aufgaben erfüllen.

Grundsätzlich gilt ein WordPress-Theme als funktionsfä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 verschiedener Template-Files, die diverse Arten von Inhalten darstellen können und so das volle Funktionsspektrum der beliebten Blog-Software ausschöpfen. Folgende Liste zeigt grundlegende Template-Files, die sich in fast jedem WordPress-Theme finden:

  • style.css: Bei der style.css handelt es sich um eines der beiden Pflichtelemente eines jeden WordPress-Themes. Dieses Template-File enthält die sogenannten Header-Informationen wie den Namen des Themes (Theme Name), eine kurze Beschreibung (Description), den Namen des Entwicklers (Author), die Versionsnummer (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-Stylesheet der WordPress-Website und bietet somit Platz für den CSS-Code des Themes.
  • index.php: Das zweite Pflichtelement eines jeden WordPress-Themes ist die index.php. Diese fungiert in der Regel als Artikelübersicht und kann als Startseite genutzt werden. Innerhalb der Template-Hierarchie gilt die index.php als letzte Fallback-Datei. Mit anderen Worten: Wurde für die Ausgabe von Inhalten kein spezifisches Template-File erstellt, greift die Software auf die index.php zurück. Der Aufbau der index.php richtet sich im Wesentlichen danach, wie viel Code in weitere Template-Files ausgelagert wird. Während die index.php eines einfachen WordPress-Themes oft den Großteil des gesamten Quellcodes inklusive HTML-Wurzelverzeichnis, Header, Footer, Sidebar und Navigation enthält, werden diese Elemente in komplexeren Themes in zusätzlichen Template-Files wie der header.php, der footer.php oder der sidebar.php definiert, sodass die index.php lediglich die Funktion eines Grundgerüsts erfüllt. Die index.php zeigt in der Regel eine im Adminbereich festgelegte Anzahl an Artikeln in gekürzter Übersicht.
  • header.php: Kommt bei WordPress die header.php zum Einsatz, beinhaltet dieses Template-File in der Regel wesentliche Angaben einer Website wie den Doctype, das öffnende HTML-Tag sowie das Head-Element inklusive Meta-Tags, Links zu Stylesheets und Skripten. Zudem wird in der header.php in der Regel das body-Tag geöffnet. Somit lässt sich der sichtbare Kopfbereich des Themes inklusive Navigation in die header.php auslagern.
  • footer.php: Die footer.php dient als Gegenstück zur header.php. Hier wird der sichtbare Footer-Bereich der Website untergebracht. In der footer.php werden in der Regel sowohl das body-Tag als auch das HTML-Tag geschlossen.
  • sidebar.php: Die WordPress-sidebar.php dient der Auslagerung 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 Vorgehensweise hat den Vorteil, dass sich Sidebar-Inhalte anschließend über den WordPress-Adminbereich verwalten lassen.
  • content.php: Beiträge in der Blogübersicht enthalten in der Regel eine verlinkte Überschrift und ein Vorschaubild 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 Artikeldatum, den Artikelautor, Kategorien oder Schlagwörter (Tags).
  • single.php: Während die index.php eine Artikelübersicht bietet, kommt die WordPress-single.php zum Einsatz, wenn ein Nutzer die Einzelansicht eines Artikels aufrufen möchte.
  • home.php: Dieses Template-File bietet die Möglichkeit, eine gesonderte Startseite für das Weblog zu erstellen. Verzichten Sie in Ihrem WordPress-Theme auf einen Aufbau mit home.php, zeigt Ihre Website auf Grundlage der index.php eine Übersicht der aktuellsten Beiträge als Startseite.
  • page.php: WordPress-Themes sind darauf optimiert, Blogbeiträge in chronologischer Reihenfolge darzustellen. Neben diesen dynamischen Inhalten stellen viele Webseitenbetreiber Ihren Besuchern spezielle Inhalte wie „About me“-Texte oder Impressumsangaben als statische Webpages zur Verfügung. Möglich macht dies die WordPress-page.php, mit der sich Einzelzeiten 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-Fehlerseite erstellen, nutzen Sie dafür das gleichnamige Template-File. Hier bietet es sich an, zusätzlich das WordPress-Suchformular einzubinden, um Ihren Besuchern die Möglichkeit zu geben, Ihre Website nach den gewünschten Informationen zu durchsuchen.
  • search.php: Die Ausgabe von Suchergebnissen lässt sich in WordPress über die search.php definieren.
  • archive.php, category.php, tag.php, author.php, date.php: Neben der Suchfunktion bietet WordPress eine Reihe von Template-Files, mit denen sich Blogbeiträge nach bestimmten Suchkriterien anordnen lassen. Als mögliche Filter stehen Kategorien, Schlüsselwörter (Tags), Autoren und das Veröffentlichungsdatum 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 spezifischen Template-Files, greift die Blog-Software auf die archive.php zurück.
  • comments.php: Stellen Sie Ihren Lesern auf Ihrem Blog eine Kommentarfunktion zur Verfügung, benötigen Sie eine gesonderte Template-Datei, die das Kommentarformular beinhaltet. Dieses definieren Sie in WordPress mit der comments.php.
  • attachment.php: Das Template-File attachment.php kommt zum Einsatz, wenn Webseitenbesucher Zusatzinhalte wie Grafiken, PDFs oder Media-Files in einer Einzelansicht betrachten möchten.
  • image.php: Eine spezielle Version der attachment.php ist die image.php, mit der sich eine gesonderte Template-Datei für die Einzelansicht von Grafiken definieren lässt. Findet sich keine image.php, kommt die attachment.php zum Einsatz.
  • rtl.css: Soll Ihr WordPress-Theme auch Sprachen unterstützen, die von rechts nach links geschrieben werden (z. B. Arabisch oder Hebräisch), wird zusätzlich das Stylesheet rtl.css benötigt.

Um die einzelnen Bausteine einer WordPress-Seite miteinander zu verknüpfen und Inhalte aus den Datenbanken auf dem Server zu laden, kommen innerhalb der Template-Files Funktionen zum Einsatz, die in der WordPress-Terminologie Template-Tags genannt werden.

Template-Tags

Bei Template-Tags handelt es sich um Funktionen, die innerhalb eines Template-File verwendet werden, um Inhalte aus der Datenbank abzurufen. Während diese bei statischen Websites direkt im HTML-Quelltext gespeichert werden, beinhalten WordPress-Templates lediglich Anweisungen, welche Inhalte aus der Datenbank eingebunden werden sollen. Template-Tags ermöglichen es der Blog-Software, jede Webpage zum Zeitpunkt des Seitenaufrufs dynamisch zu erzeugen. Welchen Vorteil ein solches Website-Konzept hat, zeigt folgendes Beispiel:

In der Regel verfügt ein Onlineprojekt über einen Namen, der auf jeder Unterseite des Projekts dargestellt wird. Um diesen in ein beliebiges Template-File zu integrieren, kommt bei WordPress folgendes Template-Tag zum Einsatz: 

bloginfo('name')

Sinnvoll nutzen lässt sich dieses Tag beispielsweise, um den Website-Titel automatisch zu auszugeben.

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

Während die Funktion bloginfo('name') als Platzhalter für den Namen der Website fungiert, gibt wp_title() den Titel der aktuellen Unterseite aus. Welche Inhalte anstelle der Platzhalter bei einem Seitenaufruf tatsächlich ausgegeben werden müssen, entnimmt die Software der Datenbank auf dem Server. Anschließend erstellt sie einen Title nach folgendem Schema:

Name des Blogs | Titel der Unterseite

Bei einer statischen Website hingegen müssen Sie den Seitentitel im tatsächlichen Wortlaut auf jeder einzelnen HTML-Seite Ihres Webprojekts hinterlegen:

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

Doch was, wenn Sie den Namen Ihres Blogs ändern möchten? Bei einem statischen Website-Projekt müssten Sie in diesem Fall die HTML-Dokumente jeder einzelnen Unterseite im Editor öffnen und die Anpassung manuell vornehmen. Bei einem dynamischen Website-Konzept hingegen gestalten sich Aktualisierungen dieser Art deutlich komfortabler: Änderungen, 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 Überschriften, Post-Inhalte oder Metadaten in die dafür vorgesehenen 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 Sonderform der WordPress-Template-Tags sind sogenannte 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 Funktionen, die in folgender Form in grundlegende Template-Files wie die index.php, die single.php oder eine page.php integriert werden: 

get_header()
get_footer()
get_sidebar()

Auch hier zeigt sich der oben angesprochene Vorteil: Wird der Code für den Header, den Footer und die Sidebar einer Website aus speziell dafür vorgesehenen Template-Files geladen, werden Änderungen, die an diesen drei Template-Files vorgenommen werden, automatisch für alle Unterseiten übernommen, die auf diese Inhalte über Include-Tags zugreifen.

Template-Hooks

Bei Template-Hooks (auch „Action-Hooks“; dt. „Haken“) handelt es sich um Schnittstellen, die das Theme mit individuellen Funktionen oder Plug-ins der Weblog-Software verbinden. Die meisten dieser Schnittstellen sind bereits im WordPress-Kern angelegt. So kann ein Theme-Entwickler oder ein Nutzer eine Aktion festlegen, bevor beispielsweise die Ausgabe beginnt oder nachdem eine Datenbankabfrage abgeschlossen wurde. So lassen sich beispielsweise spezielle Informationen direkt im Header, Footer oder in der Sidebar einbinden. Darüber hinaus können Entwickler eigene Hooks in ihre Themes integrieren.

Conditional-Tags

Bei den Conditional-Tags handelt es sich PHP-Statements wie if, else oder while, die es in Kombination mit WordPress-Funktionen ermöglichen, die Darstellung bestimmter Inhalte an Bedingungen zu knüpfen. Das kann beispielsweise ein spezieller Willkommensgruß für registrierte Nutzer sein: 

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

Der Loop

Als Loop wird der Mechanismus innerhalb der WordPress-Software bezeichnet, der für die Ausgabe von Inhalten zuständig ist. Grundsätzlich handelt es sich dabei um diverse WordPress-Funktionen, die durch Conditional-Tags miteinander verknüpft sind. Folgendes Beispiel zeigt den Grundaufbau 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 Codeabschnitt if (have_post()) in Zeile 1 weist WordPress an zu prüfen, ob Blogbeiträge vorliegen. Finden sich Beiträge in der Datenbank, veranlasst der Codeabschnitt while (have_posts()) : the_post() die Software dazu, nachfolgende Funktionen im Loop auszuführen, bis have_posts() nicht mehr wahr ist – sprich: bis keine Posts mehr vorhanden sind.

Der Loop umfasst somit alle Funktionen bis zum PHP-Statement endwhile in Zeile 6 – in diesem Beispiel die Funktion the_title(), die der Ausgabe der Artikelüberschrift dient, und die Funktion the_exerpt(), die die Software anweist, einen Auszug des Beitrags aus der Datenbank zu laden. Für die Darstellung der Inhalte wird definiert, dass der Beitragstitel im Überschriftformat h2 und die Artikelvorschau innerhalb einer Div-Box mit dem CSS-Klassennamen entry ausgegeben wird.

Auf der Startseite eines WordPress-Blogs führt ein einfacher Loop dieser Art dazu, dass Titel und Textvorschau von Beiträgen untereinander ausgegeben werden, beginnend mit dem aktuellsten Inhalt. Die Anzahl der angezeigten Beiträge lässt sich im Adminbereich konfigurieren. Üblich sind jedoch komplexere WordPress-Loops, die neben diversen Metadaten wie Autor, Datum, Kategorie und Tags auch einen Link auf die Einzelansicht des Beitrags enthalten.

War dieser Artikel hilfreich?