Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Beste Agenturen
  • Magazin
  • Beste Agenturen
  • Magazin
Dr. Web Logo seit 1997.
  • Kontakt
  • Anmeldung
  • Newsletter
  • Beste Agenturen
  • Magazin
Menü
  • Beste Agenturen
  • Magazin
Suche
Agenturpartner werden →
Dr. Web » WordPress » WordPress-Themes individuell: Custom Page Templates

WordPress-Themes individuell: Custom Page Templates

Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • Keine Kommentare
Lesedauer: 7 Minuten
  • von Markus Seyfferth
  • 2. Juni 2015

Custom Page Templates – oder auch Seitenvorlagen – sind eine wunderbare Möglichkeit, individuelle Funktionen zu einem WordPress-Theme hinzuzufügen. Sie lassen sich recht einfach erstellen, bieten jedoch genügend Potential, um auch Profis beschäftigen zu können. Für den Anfang kann man damit beginnen, Seitenvorlagen aus populären Themes zu kopieren und dann abzuändern. Oder Sie beginnen mit einem leeren Blatt und setzen auf das Verständnis, was genau Page-Templates sind und was man damit machen kann. In diesem Artikel werfen wir einen Blick darauf, was Custom Page Templates sind und wie man Sie nutzen kann, um die eigene Website zu verbessern.

wordpressthemesindividuell-teaser

Was sind Seitenvorlagen (Custom Page Templates)

Seitenvorlagen dienen dazu, eine andere Art von Inhalt auszugeben als die normale Standard-Seitenvorlage des WordPress-Themes. Die Standard-Vorlage kommt automatisch bei jeder neu angelegten Seite zum Einsatz, so auch bei der berühmten „Beispiel-Seite“, die jede WordPress-Website direkt bei der Installation anlegt.

Soll die Art des ausgegebenen Inhalts nun variieren oder ein komplett anderer Inhalt gezeigt werden (zum Beispiel ein komplettes Archiv), dann kommen Custom Page Templates zum Einsatz. Auch wenn man eine Seite ohne die Sidebar darstellen möchte, greift man auf Seitenvorlagen zurück. Sollte ein Theme bereits über individuelle Seitenvorlagen verfügen, dann lassen sich diese auf der rechten Seite des Editors unter „Attribute“ auswählen.

page-templates-pulldown-screenshot

Seitenvorlagen verstehen – die Template Hierarchie

Templates und damit auch Seitenvorlagen folgen einer exakten Hierarchie in der Anzeige-Struktur eines WordPress-Themes. Diese Hierarchie zu verstehen ist wichtig, damit man bei der Arbeit mit Seitenvorlagen Fehler ausschließen kann. Hier ein Beispiel, welche Seitenvorlagen wann für die Anzeige von Seiten von WordPress genutzt werden:

  1. Custom Template — Wenn die Seite ein individuelles Template besitzt, sucht WordPress dieses und nutzt es zur Anzeige.
  2. page-{slug}.php — Wenn nicht, schaut WordPress als nächstes, ob es ein Template mit einem speziellen Slug gibt und nutzt dieses dann zur Anzeige Beispiel: page-impressum.php).
  3. page-{id}.php — Findet WordPress auch das nicht, schaut es nach einem Template mit einer spezifischen ID.
  4. page.php — Ist auch kein Template mit ID vorhanden, nutzt WP die normale Seitenvorlage.
  5. index.php — Ist keine Seitenvorlage vorhanden, wird die index.php zur Anzeige genutzt werden.

Hier gibt es eine genaue Auflistung, wann und in welchem Fall WordPress welches Template zur Anzeige des Inhalts nutzt. Die folgende Grafik visualisiert sehr schön, wann welches Template von WordPress wofür genutzt wird.

Ein Klick auf die Grafik öffnet eine hochauflösende Version
Die WP Template Hirarchie

Seitenvorlagen selbst erstellen

In diesem Beitrag werden wir zwei individuelle Seitenvorlagen vorstellen. Einmal ein Autor-Template, welches beim Klick auf den Autorennamen eine Autor-Box samt sämtlichen verfassten Beiträgen anzeigt. Als zweites Template stellen wir eine Sitemap vor, also ein Archiv aller wichtigen Posts, Seiten, Kategorien und so weiter… Als Beispiel-Theme nehmen wir das Twentyfifteen, da es kein Autor-Template enthält.

Das Autor-Template werden wir Schritt für Schritt zusammen erstellen, die Sitemap werde ich nur kurz vorstellen. Allerdings werden Sie die Möglichkeit haben, dieses gut dokumentierte Template herunterzuladen, um damit zu experimentieren.

Wichtig: Um Probleme beim nächsten Theme-Update zu entgehen, empfehle ich Ihnen dringend, ein Child-Theme zu erstellen und die erstellten Templates dorthin auszulagern. Ansonsten sind die neuen Templates beim nächsten Theme-Update verschwunden und müssten neu erstellt werden.

Ich erstelle für alle im Artikel behandelten Code-Arbeiten ein Child-Theme für das Twentyfifteen-Theme, dass Sie am Ende des Beitrags herunterladen können. So haben Sie alle Code-Blöcke am richtigen Platz und können die Dateien als Vorlage für eigene Experimente nehmen.

Ein Autor-Template erstellen

Sobald ein Autorenname angeklickt wird, soll unser neues Autoren-Template eine Bio-Box des jeweiligen Autors anzeigen und sämtliche von ihm verfassten Artikel auflisten. Der erste Schritt ist die Erstellung eines neuen, leeren Dokuments mit dem Namen author.php. Das geschieht entweder mit einem Texteditor wie Notepad (Windows) oder TextEdit (Mac), oder aber mit einer Entwicklungsumgebung – für Mac OS X oder für Windows.

Damit eine Autorenbox auch wirklich Sinn ergibt, sollte sie um einige Felder erweitert werden. Normalerweise stellt WordPress seinen Benutzern (unter „Benutzer => Dein Profil“) nicht gerade viele Möglichkeiten zur Anzeige bereit. Gerade mal die eigene Website und biographische Angaben können hinterlegt werden. Daher müssen wir die User-Profilseite mit nützlichen Feldern ergänzen. Wir erweitern das persönliche Profil um die Felder Twitter, Facebook und Google+. Den Code bitte in die functions.php des Themes oder des Child-Themes kopieren.

Die folgenden Code-Screenshots sind mit Github-Gists verlinkt, dort können die Code-Schnipsel heruntergeladen werden.

extent-wordpress-contact-fields

Gist-Download: WordPress Kontaktfelder auf der Profilseite erweitern

Wenn Sie jetzt auf Ihr Benutzerprofil gehen, sehen Sie dort drei neue Felder: Twitter, Facebook und GooglePlus. Nun können wir die author.php erstellen. Als Vorlage für unsere Seitenvorlage author.php nehmen wir die archive.php des Twentyfifteen Theme und passen die Vorlage entsprechend an.

Autor Seitenvorlage, Schritt für Schritt

Teil 1: Der Kopfbereich

In die bis jetzt leere author.php kopieren wir den Kopfbereich hinein. Dieser dient dazu, jederzeit zu wissen, welche Aufgabe das Template im Theme übernimmt. Außerdem ruft er die header.php auf, um den Kopfbereich der Website darzustellen.

Der Header der author.php

Teil 2: HTML Tags und die Seiten-Überschrift

Teil 2 der author.php

Download des Gists von Github

Aus der archive.php des Twentyfifteen-Themes kopieren wir die HTML-Tags <section> und <main> und fügen diese in unsere author.php ein. Darunter ergänzen wir den Code noch mit etwas HTML und einer Loop, welche sich den jeweiligen Autor-Namen zieht.

Teil 3: Der für die Autorenbox nötige Code

Teil 3

Download des Gists von Github

Der obige Code zieht sich den Inhalt der Kontaktdaten-Felder aus dem Benutzer-Profil von WordPress. Angezeigt werden der Avatar des Autors, seine biographische Angaben und der Inhalt aus den Feldern Website, Twitter, Facebook und GooglePlus.

Teil 4: Die Loop für die Autoren-Beiträge

Teil 4 der author.php

Download des Gists von Github

Da die Loop bereits für die korrekte Anzeige des Autornamens gestartet wurde, müssen wir sie hier mit rewind_posts() zurücksetzen und dann erneut starten. Nach dem Start der Loop muss die korrekte Template-Datei geladen werden, damit die Autorenbeiträge auch richtig angezeigt werden. In diesem Fall wird die Format-Vorlage content.php geladen (get_template_part( ‚content‘ );), welche sich dann um die Formatierung der einzelnen Autoren-Beiträge kümmert.

Nachdem die Loop durch endwhile; beendet wurde, folgen noch die Seiten-Navigation, die schließenden HTML-Tags und der Aufruf der footer.php.

Teil 5: Das nötige CSS

Teil 5 der Autorenseite - das CSS

Das CSS als Gist von Github downloaden

Das Endergebnis. Die author.php im Einsatz

Die fertige Autorenseite
Das Endergebnis: Die fertige Autorenseite mit Bio-Box und Social-Media Links

Wenn alles korrekt verlaufen ist, wird ein Klick auf den Namen des Autors nun die author.php automatisch aufrufen und die Autoren-Beiträge ansprechender als zuvor präsentieren.

Die Autorenbox wird jedoch erst angezeigt, wenn die „Biographische Angaben“ im Benutzerprofil ausgefüllt worden sind.

Download des Twentyfifteen Child-Themes

Ein Sitemap-Template erstellen

Eine Sitemap zu haben, ist nicht nur für die Suchmaschine Google gut, sondern auch für den Besucher einer Website. Eine Besucher-Sitemap sieht natürlich ganz anders aus, sie passt sich dem Theme an. Manche Besucher sind für eine solch umfassende Möglichkeit zur Suche eines bestimmten Artikels recht dankbar, besonders vor dem Hintergrund, dass die WordPress-eigene Suchfunktion nicht gerade die Beste ist. Das Erstellen einer Seitenvorlage für eine Sitemap ist recht einfach. Eine Sache muss hierbei beachtet werden: der Kopfbereich muss nach einem bestimmten Schema betitelt werden, damit das Template anschließend unter „Attribute“ auswählbar ist. Die korrekte Betitelung sieht so aus:

kopfbereich-seitenvorlage

Mit einem Titel nach diesem Schema lässt sich das neu erstellte Seiten-Template problemlos aufrufen und verwenden.

template-auswaehlen

Ideen für ein Sitemap-Template

Ein Sitemap-Template kann auf vielerlei Arten gestaltet werden. Entweder gestaltet man einfach mit jedem Tag eine Liste und gibt Kategorien, Tags, Feeds und Beiträge untereinander aus. Oder man gestaltet das Template aufwändig mit Widget-Bereichen und zeigt dann einfach die vorhandenen – passenden – Widgets an. Ihrer Phantasie sind keine Grenzen gesetzt. Als Beispiel können Sie sich ein von mir erstelltes und sehr gut kommentiertes Template herunterladen. Mein template-sitemap.php listet zum Beispiel zuerst alle Seiten auf, danach folgen die Feeds und die Archive. Im Anschluss daran kommen die Kategorien, die Tags und alle Blogposts an die Reihe.

Das Template-Sitemap

Download der vollständigen template-sitemap.php als Gist von Github

Download des kompletten Child-Themes

Damit nach einem Theme-Update keine Dateien oder Änderungen an einem Theme verloren gehen, ist es vorteilhaft, wenn man ein Child-Theme für sein WordPress-Theme erstellt. Beide Templates und alle nötigen Dateien aus diesem Artikel finden Sie im Child-Theme. Zusätzlich können Sie sehen, wie einfach man ein Child-Theme erstellen kann.

Download des Twentyfifteen Child-Themes

Fazit

Mit Custom Page Templates lässt sich die Funktionalität eines jeden WordPress-Themes relativ einfach erweitern. Gleichzeitig bieten sie dem WordPress-Profi noch genügend Möglichkeiten, um sich ausgiebig damit zu beschäftigen. Der Phantasie sind hierbei keine Grenzen gesetzt, dend individuelle Seitenvorlagen lassen sich für sehr viele Einsatzbereiche erstellen. Auch eine spezielle Startseite, die nur Auszüge aus einzelnen Kategorien darstellt, wäre hier denkbar. Ichb wünsche Ihnen viel Spaß beim Experimentieren mit Seitenvorlagen.

Links zum Beitrag

  • WordPress Codex: Page Templates
  • Die Template Hirarchie von WordPress im Detail
  • WordPress Codex: Child-Themes
  • Gist-Download: WordPress Kontaktfelder auf der Profilseite erweitern
  • Teil 2 des Codes: Download des Gists von Github
  • Teil 3 des Codes: Download des Gists von Github
  • Teil 4 des Codes: Download des Gists von Github
  • Das CSS als Gist von Github downloaden
  • Download der vollständigen template-sitemap.php als Gist von Github
  • Download des Twentyfifteen Child-Themes

(dpe)

Markus Seyfferth

Markus Seyfferth

ist seit 2019 Geschäftsführer & WordPress-Entwickler bei Dr. Web. Zuvor war er sechs Jahre lang Vorstand des Smashing Magazine, im Rahmen dessen er u.a. das Online-Marketing, die Betreuung der Werbekunden sowie diverse Online-Projekte geleitet hat.

Werde ein Sponsor. Kontaktiere uns →

Kostenloses SEO-Tool

Agenturpartner

Seiten-Werk

Seevetal

Agentur novomyo Logo.

novomyo – Online Marketing Agentur

Hamburg

Homepage Hexxer Logo der Webdesign Agentur aus Balingen.

HOMEPAGE HEXXER

Balingen

Netzhelfer Agentur Ostfildern Stuttgart Logo. Die Partner für das Internet.

NETZhelfer GmbH

Ostfildern

SEO Agentur Hamburg • Die Nr. 1 in Hamburg.

SEO Agentur Hamburg

Hamburg

Alle Agenturpartner

Lust auf mehr?

Symbolbild in einem Laptop eingebettet. Zu sehen ist ein Mitarbeiter einer Digitalagentur.
Digitalisierung

Digitalagentur finden

Wir unterstützen Sie bei der Auswahl der passenden Digitalagentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→
Junger Mann, der in einer SEO-Agentur arbeitet arbeitet und in die Kamera lächelt.
SEO

SEO Agentur finden

Hier finden Sie eine geeignete SEO Agentur. Sie möchten eine bessere Sichtbarkeit Ihrer Website in Google & Co., mehr Traffic, höhere Conversions, mehr Umsatz? Eine professionelle SEO Agentur unterstützt Sie maßgeblich bei der Erreichung dieser wichtigen Ziele.

→
Inhaber einer WordPress-Agentur, am Tisch sitzt und in die Kamera schaut.
WordPress

WordPress Agentur finden

Wir unterstützen Sie bei der Auswahl Ihrer WordPress Agentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→

Schreibe einen Kommentar Antworten abbrechen

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

Dr. Web Logo weiss.
Fachmagazin für Online-Marketing. Seit 1997. Wissen, Software, Dienstleister: Wir bringen die Digitalisierung Ihres Unternehmens praxisnah voran. ✅

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • Allgemein
  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • JavaScript & jQuery
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social-Media-Marketing
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • VPN
  • Webdesign
  • WordPress
  • Allgemein
  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • JavaScript & jQuery
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social-Media-Marketing
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • VPN
  • Webdesign
  • WordPress

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑