Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Login
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Menü
  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

Agentur eintragen →
Dr. Web » Tipps, Tricks & Tutorials » WordPress-Themes individuell: Custom Page Templates

WordPress-Themes individuell: Custom Page Templates

Sozial sein
Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email
  • Keine Kommentare
Lesedauer: 7 Minuten
  • von Dr. Web Redaktion
  • 2. Juni 2015
Bookmarke mich
Share on pocket

WordPress Werkstatt

HELD Werbeagentur

wp-agentur.de | WordPress-Agentur

aeosys

Online Solutions Group

Timo Specht - SEO Freelancer München & Online Marketing Experte

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)

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

Dr. Web Redaktion

Dr. Web Redaktion

An einem „Dr. Web Redaktion“ Artikel arbeiten i.d.R. mehrere Autoren, unter anderem Michael Dobler, Markus Seyfferth und Jörg Mrusek.

Agenturpartner

wolpersweb.de Webdesign & SEO

Düsseldorf

AMZ-Marketing GmbH

Regensburg

Webdesign DOERRER

Frankfurt am Main

TYPO3 & Shopware Agentur – 3m5.

Dresden

Wee Media | Webdesign Agentur

Dernbach

Alle Agenturpartner

Jobs

Business Development Manager

München

Webtexter für SEO Agentur

Salzburg (Österreich)

Senior SEO Manager

München

SEO Junior für Suchmaschinen­optimierung

Salzburg

Projektmanager – Vollzeit

Remote

Zum richtigen Job

Newsletter

Tipps, Tricks, Ratgeber. Unser Newsletter: Jeden Dienstag frisch gedruckt in Deinem Mail-Postfach.

Lust auf mehr? Wir empfehlen folgende Artikel:

WordPress Block Editor: das ist der neueste Stand

Mit dem Block Editor in WordPress kannst du eigene Blöcke und „Block Patterns“ erstellen. In diesem Beitrag möchte ich dir zeigen, wie du mit dem Block-Editor einen Beitrag mit einer Überschrift, einem Bild und einem Absatz erstellst, unabhängig vom verwendeten Theme.

 →   

WordPress Website erstellen 2022: Eine Anleitung, Schritt für Schritt

WordPress ist das mit großem Abstand führende CMS, aus guten Gründen. Eine WordPress Website zu erstellen ist einfach, wie Du in der folgenden Anleitung sehen wirst:

 →   

Die 17 besten WooCommerce Snippets für die functions.php

Dir gefallen bestimmte Dinge in WooCommerce nicht und willst sie anpassen? Diese 17 WooCommerce Snippets werden Dir dabei helfen:

 →   

Schreibe einen Kommentar Antworten abbrechen

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

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email

Wissen finden

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
Menü
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.