WordPress-Themes individuell: Custom Page Templates
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.
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.
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:
- Custom Template — Wenn die Seite ein individuelles Template besitzt, sucht WordPress dieses und nutzt es zur Anzeige.
- 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).
- page-{id}.php — Findet WordPress auch das nicht, schaut es nach einem Template mit einer spezifischen ID.
- page.php — Ist auch kein Template mit ID vorhanden, nutzt WP die normale Seitenvorlage.
- 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
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.
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.
Teil 2: HTML Tags und die Seiten-Überschrift
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
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
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
Das CSS als Gist von Github downloaden
Das Endergebnis. Die author.php im Einsatz
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:
Mit einem Titel nach diesem Schema lässt sich das neu erstellte Seiten-Template problemlos aufrufen und verwenden.
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.
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)
Mehr dazu:
🥰 Mit freundlicher Unterstützung von:
