WordPress: Wie erstellst du benutzerdefinierte Seiten-Templates?

In WordPress lassen sich sehr einfach die Gestaltung und Funktionen  ändern. Benutzerdefinierte Seiten-Templates helfen dir, eine Website auf deine individuellen Bedürfnisse anzupassen.

Wie sind Prinzipien der Template-Hierarchie?

Seiten-Templates selbst erstellen und anpassen

Seiten-Templates für verschiedene Zwecke

Benutzerdefinierte Templates für jede Seite

Templates für einzelne Seiten

Benutzerdefinierte Seitentypen für Beiträge

Noch mehr Optionen mit konditionalen Tags

Funktionen eines Seiten-Templates

Themes bestimmen das Erscheinungsbild von Websites, die mit WordPress laufen. Die Gesamtheit der Parameter wie Farben, Schriftarten, Platzierung der Elemente bildet ein Theme. WordPress Themes gelten als sehr felxibel: Jede Seite im Theme ist anpassungsfähig. Zudem kann man eigene Templates für Seiten unbegrenzt erstellen und somit jeden Bereich der Website ganz auf seine Wünsche  zuschneiden.  

Das Seiten-Template stellt eine php-Datei dar, die für die Gestaltung  der einzelnen Seiten verantwortlich ist. Alle php-Dateien von  WordPress Themes liegen im Ordner “Themes” im Verzeichnis “wp-content”. Seiten-Templates lassen sich Seiten, einem Seitenbereich oder einem Seitentyp zuweisen. Ein WordPress Theme verfügt standardmäßig über vorgefertigte Seiten wie zum Beispiel “Über uns”-Seite, die automatisch angewendet werden. 

Aber woher weiß WordPress, welche Seiten-Templates und wann zu verwenden sind? Das Geheimnis liegt in der  Template Hierarchie, die das CMS einsetzt, um Seiten zu laden.

Wie sind Prinzipien der Template-Hierarchie?

Wenn ein Benutzer durch Seiten deiner WordPress-Website browst, legt die php-Datei fest, was angezeigt werden soll. Das CMS sucht nach einer notwendigen Datei immer in einer stabilen Reihenfolge. Diese wird als Template Hierarchie bezeichnet. Lass mich jetzt erklären, wie das Ganze funktioniert.

Ein Besucher möchte einen deiner Blogbeiträge lesen und klickt auf den Link http://iamawesome.com/blog/category-best/coolpost. Das Erste, was WordPress überprüfen wird, ist, ob du für die angefragte Seite ein spezifisches Seiten-Template angelegt hast. 

Wenn es keine festgelegte Datei gibt, sucht WordPress nach einem Kategorie-Template. Die Datei sieht so aus: category-best.php. Dieses Template ist für die Darstellung  der Seiten in der ganzen Kategorie zuständig. Damit können auch mehrere themenbezogene Beiträge ein anderes Bild bekommen. Wenn du für unterschiedliche Optik jeder Kategorie nicht gesorgt hast und die category1.php-Datei fehlt, wird WordPress die ID einer Kategorieseite checken. Beispielsweise lautet sie 15. Dann wird WordPress nach einer category-15.php-Datei suchen.

Wenn du keine Kategorien erstellt hast, wird WordPress ein Template für statische Seiten page.php laden. So sollten alle Seiten angezeigt werden, wenn keine Änderungen vorgenommen wurden.

Wenn keine page.php-Datei vorhanden ist,  ist das eher ein seltener Fall. Nutzt du ein vorgefertigtes Theme, wirst du dich mit diesem Problem höchstwahrscheinlich nicht konfrontieren. Wenn das jedoch geschieht, findet WordPress die index.php-Datei und zeigt sowieso etwas an. Denn das ist ein Basis-Template, das zum Anzeigen einer Seite standardmäßig verwendet wird.

Seiten-Templates selbst erstellen und anpassen

Nun benötigen wir ein wenig Praxis. Zuerst nehmen wir PHP in Angriff: Du solltest eine php-Datei mit einem Texteditor deiner Wahl erstellen. Wir tun das in einem einfachen Windows-Notepad, aber dafür eignen sich auch Notepad++, Sublime oder andere. 

Header und Footer sind zwei Bereiche, die auf  jeder Website nicht fehlen dürfen. Wenn du diese in deinem Seiten-Template anzeigen lassen willst, dann füge den folgenden Code-Schnipsel in die erstellte php-Datei ein.

<!--?php /** * Template Name: Custom Page Template */ get_header(); ?-->
 
<!--?php get_footer(); ?-->

Das sollte folgenderweise aussehen:

Speichere die Änderungen und rufe das FTP oder den Dateimanager von cPanel deiner Website auf. Lade die erstellte Datei in wp-content-> themes-> current theme folder  hoch.

Wähle die Datei in diesem Ordner aus, um eine Seite zu gestalten. Gehe zu Pages > Add new, fülle die Seite mit Inhalten und schau bitte nach rechts. Du siehst das Panel “Attribute der Seite”. Klicke auf “Templates” und wähle im Dropdown-Menü benutzerdefiniertes Template (Custom Page Template) aus.

Nachdem du den Button “Veröffentlichen” (“Publish”) gedrückt hast, gehe zur Website und du siehst eine sehr einfache Seitenstruktur, die nur über einen Header und Footer verfügt. Ein wenig langweilig, nicht wahr?

Deshalb schlage ich vor, die Seite ein wenig interessanter zu machen. Das ist sehr einfach und erfolgt durch das Kopieren und Einfügen. Fast jedes WordPress Theme bietet zusätzliche vorgefertigte Seiten. Mein Theme (FreeBook von TemplateMonster) hat eine Landingpage und ein benutzerdefiniertes Template ohne Header und Footer. Das Theme Twenty Twelve (eines der kostenlosen Standard-Themes für WordPress) hat eine vorgefertigte 404- und Archiv-Seite. Das Theme Twenty Fourteen (ein anderes kostenloses Theme) hat eine Teamseite. Also, in jedem Theme gibt es schon codierte Seitenteile, die im Ordner  wp-content/themes/your_theme gespeichert sind. Du kannst so eine Datei auf deinem Rechner herunterladen, öffnen und in dein neues benutzerdefiniertes WordPress Seiten-Template einfügen. Mein Sidebar-Template sieht so aus:

Ich kopiere es einfach und füge in meine .php Datei ein. Schau mal, die Sidebar hat sich geändert!

 Seiten-Templates für verschiedene Zwecke

Mit der WordPress Template Hierarchie ist es möglich, php-Templates nicht nur für einzelne Seiten sondern auch für Seitengruppen zu erstellen. Diese Gruppen lassen sich mit der Kategorie oder dem Typ verknüpfen. Seiten-Templates sind auswählbar oder können automatisch angewendet werden.

 Benutzerdefinierte Templates für jede Seite

Beispielsweise brauchst du ein php-Template, das für jede Seite verfügbar sein soll. In erster Linie sollst du hier auf den Dateinamen aufpassen. Wenn dein php-Template mit “page-” beginnt, interpretiert es WordPress als spezialisiertes Template, das für spezifische Seiten genutzt werden soll. Wähle einen passenden Dateinamen, der dir Aufschluss über das Seiten-Template geben würde. Das fertige  Seiten-Template hast du in den Ordner wp-content/themes/your_theme mit FileZilla oder cPanel herunterzuladen. Diese Option ist im Menü des Panels “Page Attributes” verfügbar, so hast du eine Möglichkeit, neue Seiten zu erstellen oder zu editieren.

Templates für einzelne Seiten

Möchtest du, dass sich deine statischen Seiten von anderen abheben? Das wäre auch möglich, aber es lohnt sich damit nicht zu weit gehen, damit deine Website nicht geschmacklos oder verrückt wirkt.

Erstelle ein Seiten-Template, benenne es page-{slug}.php or page-{page’s ID number}.php und lade es in den aktuellen Ordner herunter. Jetzt wird WordPress dieses Template zur Anzeige von einer einzelnen Seite über ID oder Slug automatisch abrufen. Zum Beispiel möchtest du eine Kontaktseite mit der ID 9 erstellen. Dann soll der Template-Namen so lauten: page-contacts.php oder page-9.php. 

Benutzerdefinierte Seitentypen für Beiträge

Du hast ein benutzerdefiniertes Seiten-Template erstellt und möchtest, dass deine Beiträge gleich aussehen. Hier würde die Umbenennung nicht helfen. Du sollst eine zusätzliche Codezeile in dein php-Template einfügen. Gib “Template Post Type: post, page“ rechts unter dem Template-Namen ein:

Auf diese Weise lassen sich auch Ereignisse und andere Inhaltstypen auf deiner Website hinzufügen. Du sollst aber darauf achten, dass diese Methode nur für WordPress  ab 4.7 gilt. Ältere Versionen werden die Zeile “Template Post Type” ignorieren. 

Noch mehr Optionen mit konditionalen Tags

Du weißt schon, wie du neue Seiten-Templates erstellt. Was tun, wenn du lediglich einige Änderungen an bestehendem Template vornehmen willst? Es mag sein, dass etwas auf der Seite nur unter bestimmter Bedingung angezeigt werden muss. 

Da kommen konditionale Tags ins Spiel. Sie werden in eine Codezeile eingefügt, die prüft, ob angebene Bedingung erfüllt ist. Bei erfüllter Bedingung läuft der erste Teil des Codes weiter und bei nicht erfüllter wird der Teil nach "else" ausgeführt:

Hier ist eine Liste der konditionalen Tags, die häufig eingesetzt werden:

• is_home()  wird genutzt, um die Hauptseite anzuzeigen, die als Startseite definiert wurde.
• is_front_page() verwendest du, um die Startseite deiner Website (eine Seite, die als Startseite festgelegt ist) auszugeben.
• is_single()  gibt “true” zurück, wenn ein Beitrag ausgegeben wird und  “false”, wenn der User auf der Seite ist. Das Tag könnte spezifischer sein, wenn du den Titel oder die ID eines konkreten Beitrags in Klammern eingibst. Es kann um einen bestimmten Beitrag (is_single (`21`) oder is_single (` batman`)), eine Reihe von Beiträgen (is_single (`3, 15, 47`) oder is_single (` batman, superman, ironman`) gehen.
• is_page() hat eine  "wahre" Bedingung, wenn eine Seite angezeigt wird. Dieses konditionale Tag hat die gleichen Optionen wie  is_single (). Du kannst den Namen oder die ID einer Seite in Klammern angeben, und dieser Code-Teil wird eine einzelne Seite oder eine Gruppe von Seiten verfolgen.
• is_page_template() Du nutzt dieses Tag, um ein bestimmtes Seiten-Template auf dieser Seite zu verwenden. Der Name des benutzerdefinierten Templates ist in Klammern "template_name.php" anzugeben.
• is_category() funktioniert, um eine Archivkategorie auszugeben. Man kann diese Bedingung mit is_single() und is_page() spezifizieren, indem in Klammern der Name und die ID eines konkreten Archivtyps angegeben werden.
• is_tag() gibt  “true” zurück, wenn die Tag-Seite angezeigt wird. Du kannst ein konkretes Tag in Klammern angeben oder alle Tag-Seiten verfolgen. Wenn du wissen möchtest, ob auf dieser Seite ein Tag vorhanden ist, setze have_tag () innerhalb des WordPress Loops ein.
• is_archive() wird  “true” zurückgeben, wenn man sich auf einer Archiv-Seite befindet.
• is_author() ist “true”, wenn die Autorenseite angezeigt wird. Dieses Tag ist in der Lagen, einen konkreten Autor (nach seinem Namen oder seiner ID) oder eine Gruppe von Autoren zu tracken.
• is_date() ist wahr, wenn eine zeitbasierte Archivseite ausgeben wird. Hier lassen sich Bedingungen präzisieren: is_year() (für ein Jahresarchiv), is_month() (für ein Monatsarchiv), is_day() (für einen Tag) und is_time() (eine Seite, die zu bestimmter Zeit veröffentlicht wurde)
• is_search() ist “true”, wenn  die Seite als Suchertgebniss angezeigt wird.
• is_404() ist wahr, wenn sich auf der Seite keine Inhalte befinden.  
• is_attachment() funktioniert, wenn ein Benutzer auf “eigene” Anhang-Seite (bei Anhängen geht es um Bilder oder Videos, die über die Medienbibliothek oder den Editor in den Beitrag eingefügt wurden)  geht.
• comments_open() ist “true”, wenn Kommentare auf dieser Seite zugelassen sind.

Funktionen eines Seiten-Templates

Das Kopieren und Einfügen des  Codes aus fertigten Seiten-Templates ist ein einfacher und schneller Weg, um deiner Website ein einmaliges Aussehen zu verleihen. Was bedeuten aber diese Codeschnipsel? Natürlich sollen Webentwickler alles rund um PHP (wie, wann diese oder jene Funktionen verwendet werden)  genau wissen. Wenn du diese Zeilen liest, gehörst du sicherlich eher zu Anfängern und die folgenden Informationen würden dir zugute kommen. Da wir heute Wege der Template-Anpassung behandeln, sind Template-Tags auch nicht außer Acht zu lassen.

WordPress verwendet viele verschiedene PHP-Funktionen. Diejenigen, die nur für Themes verwendet werden, heißen Template-Tags. get_header() und get_footer(), die wir am Anfang erwähnt haben, sind Template-Tags. Es gibt eigentlich sehr viele Tags. Weiter listen wir nur jene auf, die du bei der Anpassung deiner Website brauchst.

get_header(), get_footer(), get_sidebar()

Diese drei Template-Tags fügen deinem benutzerdefinierten Seiten-Template einen Header, Footer und eine Sidebar hinzu. Wenn du einen konkreten Header, Footer oder eine Sidebar verwenden möchtest, gib ihren Namen in Klammern ein. Für die header-superstar.php-Datei  wird das Template-Tag get_header (`superstar`) genutzt.

get_template_part()

Dieses Tag fügt einen Teil eines bereits erstellten Templates zu deinem php-Template hinzu. Wenn die Klammern leer bleiben, wird nichts hinzugefügt.

get_search_form()

Du benötigst es, um das Suchformular in der Sidebar zu erstellen. Such-Widgets verwenden normalerweise dieses Template-Tag. Es sucht nach "search_form.php" im Theme-Ordner und fügt es dann dem benutzerdefinierten Seiten-Template hinzu.

get_page_template()

Diese Funktion sorgt für die Übergabe an das aktuell verwendete Template aufgrund der Template Hierarchie.

wp_login_form()

Wenn die Klammern leer sind, fügt diese Funktion einem Seiten-Template ein einfaches Anmeldeformular hinzu. Wenn du ein bestimmtes Formular verwenden möchtest, sollte sein Name in Klammern genauso eingegeben werden wie für das Template-Tag get_header ().

get_calendar()

Das Template-Tag zeigt einen Kalender vom aktuellen Theme auf der Seite an. Wenn du einen anderen Kalender brauchst, dann gib einfach seinen Namen wie für einen Header und Footer in Klammern ein.

Wäre das alles?

Hoffentlich hast du  Klarheit, was in deinem Theme zu tun ist, damit es besser wird. Dieses Wissen würde dir am Anfang ausreichen. Wenn du in der nächsten Zeit vorhast, dich mit diesem Thema gründlich auseinderzusetzen, dann soll dir WordPress Codex Abhilfe schaffen.

Wir wünschen dir, das Potential von benutzerdefinierten Seiten-Templates voll auszuschöpfen!

Wir haben diesen Beitrag aus dem Englischen übersetzt. Unter dem Link findest du den Originaltext.

Lies mehr zum Thema

Sicherheitsrisiken für WordPress im Jahr 2020 managen [Ultimative Checkliste]

5 Methoden, um dein WordPress Theme anzupassen

Ich habe ein WordPress Elementor Theme ausgewählt. Wie geht es weiter?