Eine detaillierte Anleitung zu benutzerdefinierten WordPress-Seitenvorlagen
Über den Autor
Nick Schäferhoff ist ein Unternehmer, Online-Vermarkter und professioneller Blogger aus Deutschland. Wenn Sie keine Websites erstellen, keine Inhalte erstellen oder seinen Kunden helfen … Mehr über Nick↬
- 24 Minuten lesen
- WordPress, Techniken (WP)
- Zum Offline-Lesen gespeichert
- Auf Twitter, LinkedIn teilen
Ich stelle mir WordPress gerne als das Gateway-Medikament der Webentwicklung vor. Viele Leute, die mit der Nutzung der Plattform beginnen, suchen zunächst nur nach einer bequemen (und kostenlosen) Möglichkeit, eine einfache Website zu erstellen, häufig mithilfe einer WordPress-Seite Builder-Plugin. Ein bisschen wie „Ich werde es nur einmal versuchen.“
Ein guter Teil der Benutzer hört hier jedoch nicht auf. Stattdessen werden sie süchtig. Überlegen Sie sich mehr Ideen. Experiment. Probieren Sie neue Plugins aus. Entdecke Firebug. Boom. Bald gibt es kein Zurück mehr. Klingt das nach deiner Geschichte? Als WordPress-Benutzer ist es nur natürlich, immer mehr Kontrolle über Ihre Website zu haben. Um sich nach benutzerdefiniertem Design, benutzerdefinierter Funktionalität und allem zu sehnen.
Weitere Informationen zu SmashingMag:
- Erstellen und Anpassen eines untergeordneten WordPress-Themas
- Erstellen Eine benutzerdefinierte Archivseite für WordPress
- Anpassen von WordPress-Archiven
Glücklicherweise wurde WordPress genau dafür entwickelt. Die flexible Struktur und die unterteilte Architektur ermöglichen es jedem, praktisch alles auf seiner Website zu ändern.
Zu den wichtigsten Tools bei der Suche nach vollständiger Website-Kontrolle gehören Seitenvorlagen. Sie ermöglichen es Benutzern, das Design und die Funktionalität ihrer Website dramatisch zu ändern. Möchten Sie einen benutzerdefinierten Header für Ihre Startseite? Getan. Eine zusätzliche Seitenleiste nur für Ihre Blog-Seite? Kein Problem. Eine einzigartige 404-Fehlerseite? Sein. Meine. Gast.
Wenn Sie wissen möchten, wie WordPress-Seitenvorlagen Ihnen dabei helfen können, lesen Sie weiter. Aber zuerst ein paar Hintergrundinformationen.
Vorlagendateien in WordPress
Worüber sprechen wir, wenn wir im Kontext von WordPress von Vorlagen sprechen? Die Kurzversion ist, dass Vorlagen Dateien sind, die WordPress mitteilen, wie verschiedene Arten von Inhalten angezeigt werden sollen.
Die etwas längere Version: Jedes Mal, wenn jemand eine Anfrage zum Anzeigen eines Teils Ihrer Website sendet, wird die WordPress-Plattform dies herausfinden Welche Inhalte sie sehen möchten und wie dieser bestimmte Teil Ihrer Website gerendert werden soll.
Für letztere versucht WordPress, die am besten geeignete Vorlagendatei zu verwenden, die sich in Ihrem Thema befindet. Welche wird anhand einer festgelegten Reihenfolge, der WordPress-Vorlagenhierarchie, festgelegt. Wie das aussieht, sehen Sie im folgenden Screenshot oder in dieser interaktiven Version.
Die Vorlagenhierarchie ist eine Liste von Vorlagendateien, mit denen WordPress vertraut ist und deren Rangfolge bestimmt wird, um welche zu bestimmen Datei hat Vorrang vor einer anderen.
Sie können sich das als Entscheidungsbaum vorstellen. Wenn WordPress versucht zu entscheiden, wie eine bestimmte Seite angezeigt werden soll, arbeitet es sich durch die Vorlagenhierarchie, bis es die erste Vorlagendatei findet, die zur angeforderten Seite passt. Wenn beispielsweise jemand versucht, auf die Adresse http://yoursite.com/category/news zuzugreifen, sucht WordPress in der folgenden Reihenfolge nach der richtigen Vorlagendatei:
Am Ende der Hierarchie befindet sich der Index .php. Es wird verwendet, um Inhalte anzuzeigen, an deren Namen keine spezifischere Vorlagendatei angehängt ist. Wenn eine Vorlagendatei in der Hierarchie einen höheren Rang einnimmt, verwendet WordPress diese Datei automatisch, um den betreffenden Inhalt anzuzeigen.
Seitenvorlagen und ihre Verwendung
Für Seiten die Standardvorlage ist normalerweise die treffend benannte page.php. Sofern keine spezifischere Vorlagendatei verfügbar ist (z. B. archive.php für eine Archivseite), verwendet WordPress page.php, um den Inhalt aller Seiten Ihrer Website zu rendern.
In vielen Fällen jedoch Möglicherweise müssen Sie das Design, das Erscheinungsbild oder die Funktionalität einzelner Teile Ihrer Website ändern. Hier kommen Seitenvorlagen ins Spiel.Mit benutzerdefinierten Seitenvorlagen können Sie jeden Teil Ihrer WordPress-Site individualisieren, ohne den Rest davon zu beeinflussen.
Möglicherweise haben Sie dies bereits bei der Arbeit gesehen. Beispielsweise bieten viele WordPress-Themes heutzutage die Option, Ihre Seite in voller Breite zu ändern, eine zweite Seitenleiste hinzuzufügen oder die Position der Seitenleiste zu ändern. Wenn dies bei Ihnen der Fall ist, wurde dies wahrscheinlich über Vorlagendateien durchgeführt. Es gibt verschiedene Möglichkeiten, dies zu erreichen, und wir werden sie später erläutern.
Zunächst jedoch ein Wort der Vorsicht: Da das Arbeiten mit Vorlagen das Bearbeiten und Ändern von Dateien in Ihrem aktiven Thema umfasst, ist dies immer eine gute Sache Idee, bei solchen Anpassungen ein untergeordnetes Thema zu verwenden. Auf diese Weise besteht nicht die Gefahr, dass Ihre Änderungen überschrieben werden, wenn Ihr übergeordnetes Thema aktualisiert wird.
So passen Sie eine Seite in WordPress an
Es gibt drei grundlegende Möglichkeiten, benutzerdefinierte zu verwenden Seitenvorlagen in WordPress: Hinzufügen von bedingten Anweisungen zu einer vorhandenen Vorlage; Erstellen spezifischer Seitenvorlagen, die in der Hierarchie einen höheren Rang haben; und direktes Zuweisen von Vorlagen zu bestimmten Seiten. Wir werden uns diese nacheinander ansehen.
Verwenden von bedingten Tags in Standardvorlagen
Eine einfache Möglichkeit, seitenspezifische Änderungen vorzunehmen, besteht darin, die vielen bedingten Tags von WordPress zu a hinzuzufügen Vorlage bereits in Gebrauch. Wie der Name schon sagt, werden diese Tags verwendet, um Funktionen zu erstellen, die nur ausgeführt werden, wenn eine bestimmte Bedingung erfüllt ist. Im Kontext von Seitenvorlagen entspricht dies etwa der Option „Nur Aktion X auf Seite Y ausführen“.
In der Regel fügen Sie der page.php-Datei Ihres Themas bedingte Tags hinzu (es sei denn, von Natürlich möchten Sie einen anderen Teil Ihrer Website anpassen. Mit ihnen können Sie Änderungen vornehmen, die auf die Startseite, die Startseite, die Blog-Seite oder eine andere Seite Ihrer Website beschränkt sind.
Hier sind einige häufig verwendete Bedingte Tags:
Wenn Sie beispielsweise anstelle des Standard-Tags get_header();
zu Ihrer page.php hinzugefügt werden, lädt der folgende Code eine benutzerdefinierte Header-Datei mit dem Namen header -shop.php beim Anzeigen der Seite http://yoursite.com/products.
Ein guter Anwendungsfall hierfür wäre, wenn Sie Wenn Sie einen Shop auf Ihrer Website haben und ein anderes Header-Bild oder ein anderes benutzerdefiniertes Menü auf der Shop-Seite anzeigen müssen, können Sie diese Anpassung in header-shop.php hinzufügen und sie wird an der entsprechenden Stelle angezeigt.
Bedingte Tags sind jedoch nicht li auf eine Seite reduziert. Sie können mehrere Anweisungen in einer Reihe wie folgt machen:
In diesem zweiten Beispiel ändern zwei Bedingungen das Verhalten verschiedener Seiten Ihrer Site. Neben dem Laden der oben genannten shopspezifischen Header-Datei wird jetzt auch eine header-about.php auf eine Seite mit der ID 42 geladen. Für alle anderen Seiten gilt die Standard-Header-Datei.
Weitere Informationen In Bezug auf die Verwendung von bedingten Tags werden die folgenden Ressourcen dringend empfohlen:
- WordPress-Codex: Bedingte Tags
- ThemeLab: Der ultimative Leitfaden für bedingte WordPress-Tags
Erstellen seitenspezifischer Dateien in der WordPress-Hierarchie
Bedingte Tags sind eine hervorragende Möglichkeit, kleinere Änderungen an Ihren Seitenvorlagen vorzunehmen. Natürlich können Sie auch größere Anpassungen erstellen, indem Sie viele bedingte Anweisungen nacheinander verwenden. Ich finde dies jedoch eine sehr umständliche Lösung und würde mich stattdessen für bestimmte Vorlagendateien entscheiden.
Eine Möglichkeit, dies zu tun, besteht darin, die WordPress-Vorlagenhierarchie auszunutzen. Wie wir gesehen haben, durchläuft die Hierarchie eine Liste möglicher Vorlagendateien und wählt die erste aus, die passt. Für Seiten sieht die Hierarchie folgendermaßen aus:
- Benutzerdefinierte Seitenvorlage
- page- {slug} .php
- page- {id} .php
- page.php
- index.php
An erster Stelle stehen benutzerdefinierte Seitenvorlagen, die einer bestimmten Seite direkt zugewiesen wurden. Wenn eine davon vorhanden ist, wird WordPress sie verwenden, unabhängig davon, welche anderen Vorlagendateien vorhanden sind. Wir werden gleich mehr über benutzerdefinierte Seitenvorlagen sprechen.
Danach sucht WordPress nach einer Seitenvorlage, die den Slug der betreffenden Seite enthält. Wenn Sie beispielsweise eine Datei mit dem Namen page-about.php in Ihre Themendateien aufnehmen, verwendet WordPress diese Datei, um Ihre „About“ -Seite oder die Seite anzuzeigen, die unter http://www.yoursite.com/about zu finden ist
Alternativ können Sie dasselbe erreichen, indem Sie auf die ID Ihrer Seite abzielen. Wenn dieselbe Seite eine ID von 5 hat, verwendet WordPress die Vorlagendatei page-5.php vor page.php, falls vorhanden. Das heißt, nur wenn keine höherrangige Seitenvorlage verfügbar ist.
(Übrigens können Sie die ID für jede Seite herausfinden, indem Sie den Mauszeiger über den Titel unter „Alle Seiten“ in Ihrem WordPress-Back bewegen -end. Die ID wird in dem von Ihrem Browser angezeigten Link angezeigt.)
Zuweisen von benutzerdefinierten Seitenvorlagen
Neben der Bereitstellung von Vorlagen in einer Form, die WordPress automatisch verwendet, ist dies auch der Fall Es ist möglich, bestimmten Seiten manuell benutzerdefinierte Vorlagen zuzuweisen.Wie Sie der Vorlagenhierarchie entnehmen können, übertreffen diese alle anderen im Themenordner vorhandenen Vorlagendateien.
Genau wie beim Erstellen seitenspezifischer Vorlagen für die WordPress-Hierarchie müssen Sie hierfür eine Vorlagendatei und bereitstellen Verknüpfen Sie es dann mit der Seite, für die Sie es verwenden möchten. Letzteres kann auf zwei verschiedene Arten erfolgen, mit denen Sie möglicherweise bereits vertraut sind. Für den Fall, dass Sie dies nicht tun, erfahren Sie hier, wie es geht.
1. Zuweisen von benutzerdefinierten Seitenvorlagen über den WordPress-Editor
Im WordPress-Editor finden Sie unter „Vorlage“ ein Optionsfeld mit dem Namen „Seitenattribute“ mit einem Dropdown-Menü.
Wenn Sie darauf klicken, erhalten Sie eine Liste der verfügbaren Seitenvorlagen auf Ihrer WordPress-Website. Wählen Sie die gewünschte aus, speichern oder aktualisieren Sie Ihre Seite und Sie sind fertig.
2. Festlegen einer benutzerdefinierten Vorlage über die Schnellbearbeitung
Dasselbe kann auch erreicht werden, ohne den WordPress-Editor aufzurufen. Gehen Sie zu „Alle Seiten“ und bewegen Sie den Mauszeiger über ein Element in der Liste. Es wird ein Menü mit dem Element „Schnellbearbeitung“ angezeigt.
Klicken Sie darauf, um die Seiteneinstellungen direkt in der Liste zu bearbeiten. Sie sehen dasselbe Dropdown-Menü für die Auswahl einer anderen Seitenvorlage. Wählen Sie eine aus, aktualisieren Sie die Seite und Sie sind fertig.
Immerhin nicht so schwer, oder? Aber was ist, wenn Sie noch keine benutzerdefinierte Seitenvorlage haben? Wie erstellen Sie es, damit Ihre Website genau so aussieht, wie Sie es möchten? Keine Sorge, darum geht es im nächsten Teil.
Eine Schritt-für-Schritt-Anleitung zum Erstellen benutzerdefinierter Seitenvorlagen
Das Zusammenstellen benutzerdefinierter Vorlagendateien für Ihre Seiten ist dies nicht so schwer, aber hier sind ein paar Details, auf die Sie achten müssen. Lassen Sie uns daher den Prozess Stück für Stück durchgehen.
1. Suchen der Standardvorlage
Eine gute Möglichkeit besteht darin, zunächst die Vorlage zu kopieren, die derzeit von der Seite verwendet wird, die Sie ändern möchten. Es ist einfacher, vorhandenen Code zu ändern, als eine ganze Seite von Grund auf neu zu schreiben. In den meisten Fällen handelt es sich um die Datei page.php.
(Wenn Sie nicht wissen, welche Vorlagendatei auf der Seite verwendet werden soll, die Sie bearbeiten möchten, wird das Plugin What The File verwendet erweisen sich als nützlich.)
Ich werde das Thema Twenty Twelve zur Demonstration verwenden. So sieht die Standardseitenvorlage aus:
Wie Sie sehen, ist hier nichts Besonderes: die üblichen Aufrufe für Kopf- und Fußzeile und die Schleife in der Mitte. Die betreffende Seite sieht folgendermaßen aus:
2. Kopieren und Umbenennen der Vorlagendatei
Nachdem Sie die Standardvorlagendatei identifiziert haben, ist es Zeit, eine Kopie zu erstellen. Wir werden die duplizierte Datei verwenden, um die gewünschten Änderungen an unserer Seite vorzunehmen. Dafür müssen wir es auch umbenennen. Es können nicht zwei Dateien mit demselben Namen vorhanden sein, das ist nur für alle verwirrend.
Sie können der Datei einen beliebigen Namen geben, solange sie nicht mit einem der reservierten Dateinamen des Themas beginnt . Nennen Sie es also nicht page-Something.php oder irgendetwas anderes, das WordPress glauben lässt, es sei eine dedizierte Vorlagendatei.
Es ist sinnvoll, einen Namen zu verwenden, der leicht identifiziert, was diese Vorlagendatei verwendet für, wie my-custom-template.php. In meinem Fall werde ich mit custom-full-width.php gehen.
3. Anpassen des Headers der Vorlagendatei
Als Nächstes müssen wir WordPress mitteilen, dass es sich bei dieser neuen Datei um eine benutzerdefinierte Seitenvorlage handelt. Dazu müssen wir den Datei-Header folgendermaßen anpassen:
Der Name unter ‚Vorlagenname‘ wird unter ‚Seite‘ angezeigt Attribute ‚im WordPress-Editor. Stellen Sie sicher, dass Sie es an Ihren Vorlagennamen anpassen.
4. Anpassen des Codes
Nun ist es an der Zeit, zum Fleisch und den Kartoffeln der Seitenvorlage zu gelangen: dem Code. In meinem Beispiel möchte ich lediglich die Seitenleiste von meiner Demoseite entfernen.
Dies ist relativ einfach, da ich nur <?php get_sidebar(); ?>
von meiner Seite entfernen muss Seitenvorlage, da dies die Seitenleiste nennt. Infolgedessen sieht meine benutzerdefinierte Vorlage folgendermaßen aus:
5. Hochladen der Seitenvorlage
Nach dem Speichern meiner benutzerdefinierten Datei ist es jetzt an der Zeit, sie auf meine Website hochzuladen. Benutzerdefinierte Seitenvorlagen können an mehreren Stellen gespeichert werden, um von WordPress erkannt zu werden:
- Ordner Ihres aktiven (untergeordneten) Themas
- Der Ordner Ihres übergeordneten Hauptthemas
- Ein Unterordner in einem dieser
Ich persönlich möchte einen Ordner mit dem Namen page_templates in meinem untergeordneten Thema erstellen und dort benutzerdefinierte Vorlagen ablegen.Ich finde es am einfachsten, einen Überblick über meine Dateien und Anpassungen zu behalten.
6. Vorlage aktivieren
Als letzten Schritt müssen Sie die Seitenvorlage aktivieren. Wie bereits erwähnt, erfolgt dies im WordPress-Editor unter Seitenattribute → Vorlagen. Speichern, Seite anzeigen und voilà! Hier ist meine angepasste Seite ohne Seitenleiste:
Nicht so schwer, oder? Keine Sorge, Sie werden schnell den Dreh raus bekommen. Um Ihnen einen besseren Eindruck davon zu geben, wofür diese Seitenvorlagen verwendet werden sollen, werde ich für den Rest des Artikels zusätzliche Anwendungsfälle (einschließlich des Codes) demonstrieren.
Fünf verschiedene Möglichkeiten zur Verwendung von Seitenvorlagen
Wie bereits erwähnt, können Seitenvorlagen für viele verschiedene Zwecke verwendet werden. Mit ihrer Hilfe können Sie so ziemlich alles auf jeder Seite anpassen. Nur Ihre Vorstellungskraft (und Ihre Codierungsfähigkeiten) stehen Ihnen im Weg.
1. Seitenvorlage in voller Breite
Der erste Fall, den wir betrachten werden, ist eine erweiterte Version der oben erstellten Demo-Vorlage. Dort oben haben wir die Seitenleiste bereits entfernt, indem wir <?php get_sidebar(); ?>
aus dem Code gelöscht haben. Wie Sie auf dem Screenshot gesehen haben, führt dies jedoch nicht zu einem Layout in voller Breite, da der Inhaltsbereich links bleibt.
Um dies zu beheben, müssen wir uns insbesondere mit dem CSS befassen Dieser Teil:
Das Attribut width
begrenzt das Element, das unseren Inhalt enthält, auf 65,1042% des verfügbaren Speicherplatzes . Wir möchten dies erhöhen.
Wenn wir es jedoch nur auf 100% ändern, wirkt sich dies auf alle anderen Seiten unserer Website aus, was weit von dem entfernt ist, was wir wollen. Daher besteht die erste Reihenfolge hier darin, die primäre div
-Klasse in unserer benutzerdefinierten Vorlage in eine andere Klasse wie class="site-content-fullwidth”
zu ändern. Das Ergebnis:
Jetzt können wir das CSS für unsere neue benutzerdefinierte Klasse anpassen:
Infolgedessen erstreckt sich der Inhalt jetzt über alle Bereiche den Weg über den Bildschirm.
2. Dynamische 404-Fehlerseite mit Widget-Bereichen
Auf der 404-Fehlerseite landet jede Person, die versucht, auf eine Seite auf Ihrer Website zuzugreifen, die nicht vorhanden ist, sei es durch einen Tippfehler, einen fehlerhaften Link oder weil die Der Permalink der Seite hat sich geändert.
Trotz der Tatsache, dass das Erhalten eines 404 von allen im Internet nicht gemocht wird, ist die 404-Fehlerseite nicht unwichtig, wenn Sie eine Website betreiben. Der Inhalt kann der entscheidende Faktor dafür sein, ob jemand Ihre Website sofort verlässt oder bei Ihnen bleibt und Ihren anderen Inhalt überprüft.
Das Codieren einer benutzerdefinierten Fehlerseite von Grund auf ist umständlich, insbesondere wenn Sie sich nicht auf Ihre Fähigkeiten verlassen können . Eine bessere Möglichkeit besteht darin, Widget-Bereiche in Ihre Vorlage einzubauen, damit Sie die dort angezeigten Elemente flexibel per Drag & Drop ändern können.
Dazu werden wir die 404.php-Datei abrufen und bearbeiten, die im Lieferumfang von Twenty Twelve ( Vorlagenhierarchie, erinnerst du dich?). Bevor wir dort etwas ändern, erstellen wir zunächst ein neues Widget, indem wir den folgenden Code in unsere Datei functions.php einfügen:
Dies sollte das neu erstellte Widget in Ihrem WordPress-Backend anzeigen. Um sicherzustellen, dass es tatsächlich auf der Site angezeigt wird, müssen Sie Ihrer 404-Seite an der entsprechenden Stelle die folgende Codezeile hinzufügen:
After Wenn Sie die Vorlage auf meine Website hochladen, ist es Zeit, meinen neuen Widget-Bereich zu füllen:
Wenn ich jetzt die 404-Fehlerseite betrachte, werden dort meine neu erstellten Widgets angezeigt:
3. Seitenvorlage zum Anzeigen benutzerdefinierter Beitragstypen
Benutzerdefinierte Beitragstypen sind eine hervorragende Möglichkeit, Inhalte einzuführen, die über eigene Datenpunkte, Designs und andere Anpassungen verfügen. Ein beliebter Anwendungsfall für diese Beitragstypen sind Überprüfungselemente wie Bücher und Filme. In unserem Fall möchten wir eine Seitenvorlage erstellen, die Portfolioelemente anzeigt.
Wir müssen zuerst unseren benutzerdefinierten Beitragstyp (CPT) erstellen. Dies kann manuell oder per Plugin erfolgen. Eine Plugin-Option, die ich von ganzem Herzen empfehlen kann, ist Types. Sie können auf einfache Weise benutzerdefinierte Beitragstypen und benutzerdefinierte Felder erstellen.
Installieren und aktivieren Sie Typen, fügen Sie einen benutzerdefinierten Beitrag hinzu, stellen Sie sicher, dass der Slug „Portfolio“ ist, und passen Sie alle benötigten Felder an (z. B. das Hinzufügen eines vorgestellten Bildes) ), passen Sie alle anderen Optionen an und speichern Sie.
Nachdem wir nun unseren Portfolio-Beitragstyp haben, möchten wir, dass er auf unserer Website angezeigt wird. Als erstes erstellen wir die betreffende Seite.Beachten Sie, dass die Seite nicht denselben Slug haben kann, wenn Sie „Portfolio“ als Slug Ihres CPT ausgewählt haben. Ich ging mit meinem clients-portfolio
und fügte auch einen Beispieltext hinzu.
Nachdem Sie einige Elemente im Beitragstyp „Portfolio“ hinzugefügt haben, möchten wir, dass sie auf unserer Seite direkt unter dem angezeigt werden Seiteninhalt.
Um dies zu erreichen, verwenden wir erneut eine Ableitung der Datei page.php. Kopieren Sie es, nennen Sie es portal-template.php und ändern Sie den Header wie folgt:
In diesem Fall müssen wir jedoch einige Änderungen an der ursprünglichen Vorlage vornehmen. Wenn Sie sich den Code von page.php ansehen, werden Sie feststellen, dass in der Mitte eine andere Vorlagendatei mit dem Namen content-page.php aufgerufen wird (dort steht <?php get_template_part( ‘content’, ‘page’ ); ?>
). In dieser Datei finden wir den folgenden Code:
Wie Sie sehen können, werden hier der Seitentitel und der Inhalt aufgerufen. Da wir diese definitiv auf unserer Portfolio-Site haben möchten, müssen wir die erforderlichen Teile dieser Vorlage in unsere page.php-Datei kopieren. Das Ergebnis sieht folgendermaßen aus:
Um die Portfolioelemente auf unsere Seite zu bringen, fügen wir den folgenden Code direkt unter dem Aufruf the_content()
hinzu.
Dadurch wird das CPT auf der folgenden Seite angezeigt:
Ich bin sicher, wir sind uns alle einig, dass es weniger als hervorragend aussieht, daher ist ein gewisses Styling angebracht.
Viel besser, finden Sie nicht?
Und hier ist der gesamte Code für die Portfolio-Seitenvorlage:
4. Beitragsseite mit Avatar-Bildern
Als Nächstes in unseren Anwendungsfällen für Seitenvorlagen befindet sich eine Beitragsseite. Wir möchten eine Liste der Autoren auf unserer Website erstellen, einschließlich ihrer Bilder und der Anzahl der Beiträge, die sie unter ihrem Namen veröffentlicht haben. Das Endergebnis sieht folgendermaßen aus:
Wir beginnen erneut mit unserer Hybriddatei von zuvor und fügen den Code für die Liste der Mitwirkenden hinzu. Aber was ist, wenn Sie nicht wissen, wie man so etwas erstellt? Keine Sorge, Sie können mit intelligentem Stehlen auskommen.
Sie sehen, das Standardthema „Vierundzwanzig“ enthält standardmäßig eine Beitragsseite. Sie finden die Vorlage im Ordner „Seitenvorlagen“ mit dem Namen „Contributors.php“.
Wenn Sie in die Datei schauen, finden Sie dort jedoch nur den folgenden Aufruf: twentyfourteen_list_authors();
. Glücklicherweise schließen Sie als begeisterter WordPress-Benutzer jetzt, dass dies wahrscheinlich auf eine Funktion in der function.php-Datei von Twenty Fourteen verweist, und Sie hätten Recht.
Nach dem, was wir dort finden, interessiert uns der Teil dies:
Wir werden es erneut unterhalb des Aufrufs für the_content()
mit folgendem Ergebnis hinzufügen:
Nun zu ein wenig Styling:
Und das sollte es sein. Vielen Dank, vierundzwanzig!
5. Benutzerdefinierte Archivseite
Twenty Twelve wird mit einer eigenen Vorlage für Archivseiten geliefert. Es wird zum Beispiel aktiv, wenn Sie versuchen, alle früheren Beiträge einer bestimmten Kategorie anzuzeigen.
Ich möchte jedoch etwas ähnlicheres wie Problogger: eine Seite, auf der die Leute zusätzliche entdecken können Inhalte auf meiner Website auf verschiedene Arten. Dies geschieht wiederum mit einer Seitenvorlage.
Unter Beibehaltung unserer gemischten Vorlage von zuvor fügen wir unter dem Aufruf the_content()
Folgendes hinzu:
Außerdem ein bisschen Styling für die Suchleiste:
Und das Ergebnis sollte ein bisschen so aussehen:
Der Vollständigkeit halber ist hier die gesamte Datei:
Vergessen Sie nicht, sie a zuzuweisen Seite!
WordPress-Seitenvorlagen auf den Punkt gebracht
Auf Ihrem Weg zur Beherrschung von WordPress ist das Erlernen der Verwendung von Seitenvorlagen ein wichtiger Schritt. Sie können das Anpassen Ihrer Website sehr, sehr einfach machen und es Ihnen ermöglichen, so vielen oder wenigen Seiten, wie Sie möchten, einzigartige Funktionen und Designs zuzuweisen. Vom Hinzufügen von Widget-Bereichen über das Anzeigen benutzerdefinierter Beitragstypen bis hin zum Anzeigen einer Liste der Mitwirkenden Ihrer Website sind die Möglichkeiten praktisch unbegrenzt.
Ob Sie bedingte Tags verwenden, die WordPress-Vorlagenhierarchie ausnutzen oder seitenspezifische Vorlagendateien erstellen, liegt ganz bei Ihnen und dem, was Sie erreichen möchten. Fangen Sie klein an und arbeiten Sie sich bis zu komplizierteren Dingen vor. Es wird nicht lange dauern, bis jeder Teil Ihrer WordPress-Website auf jeden Anruf antwortet.