WordPress-Theme-Tutorial für Anfänger – Teil 11: Benutzerdefinierte Seitenvorlagen

In dieser Lektion des WordPress-Theme-Tutorials für Anfänger lernen wir etwas über Seitenvorlagen, was sie sind, wie man sie erstellt und Best Practices. Als Beispiel erstellen wir eine Vorlage in voller Breite. Unterwegs fügen wir auch eine Klasse zu body hinzu, indem wir fragen, ob die Seite eine bestimmte Seitenvorlage verwendet.

Was sind Seitenvorlagen

Seitenvorlagen sind nützlich, wenn Sie ein anderes Layout oder eine andere Einrichtung für eine bestimmte Seite wünschen. Häufige Beispiele für die Verwendung von Seitenvorlagen sind das Auflisten von Beiträgen in einem benutzerdefinierten Beitragstyp (z. B. Portfolio, Bücher oder Dienstleistungen), mit einem völlig anderen Inhalt oder Layout (z. B. innerhalb von Spalten) oder sogar das Erstellen einer Seite in voller Breite (keine Seitenleiste).

Die Benutzerfreundlichkeit von Seitenvorlagen hat nach der WordPress-Version 5.x (Gutenberg) abgenommen. Der neue Gutenberg-Editor ermöglicht eine große Flexibilität beim Erstellen solcher Seiten, ohne dass Seitenvorlagen erforderlich sind. Unabhängig davon werden wir lernen, wie man eine benutzerdefinierte Seitenvorlage zu unserem Design hinzufügt.

Innerhalb der Metabox „Seitenattribute” für Seiten erscheint die Auswahl der Seitenvorlage. Die Vorlagenoption wird jedoch nur angezeigt, wenn das aktive Thema mindestens eine Seitenvorlage hat.

Seitenvorlagen können tatsächlich auch für Beiträge und benutzerdefinierte Beitragstypen verwendet werden. Ab WordPress 4.7 kannst du festlegen, für welche Beitragstypen die Vorlage verfügbar sein soll. WordPress fügt diesen Beitragstypen automatisch die erforderliche Metabox „Seitenattribute” hinzu.

Benennung und Platzierung von Seitenvorlagen

Zu Beginn würden Sie normalerweise eine Kopie der Vorlagendatei erstellen, die dem am nächsten kommt, was Sie mit der Seitenvorlage erreichen möchten. In den meisten Fällen ist es page.php. Was die Benennung Ihres Seiten-Templates anbelangt, liegt es an Ihnen. Aber es gibt einige Regeln und einen gesunden Menschenverstand.

Es ist verlockend, Ihre Seitenvorlage einfach zu benennen, z. B. page-books.phpfür eine Vorlage, die einen benutzerdefinierten Beitragstyp Bücher auflistet. Stellen Sie Ihrer Seitenvorlage niemals ‘ page-‘ voran! Wenn Sie sich an die Template-Hierarchie von WordPress erinnern, wird WordPress suchen, page-<slug>.phpbevor es versucht page.php, und Benutzer Ihres Themes könnten auf unerwartetes Verhalten stoßen.

Eine gute Praxis ist es, Ihrer Seitenvorlage etwas voranzustellen, das nicht Teil der Seitenvorlagennamen von WordPress ist. Zum Beispiel ‘ pagetemplate-', ‘ pt-‘, oder einfach nur der vollständige Name ‘ fullwidth-template.php‘. Es empfiehlt sich auch, sie in einem Unterordner zu speichern. /page-templates/Dies ist jedoch nicht gut, wenn Sie möchten, dass Ihr Design mit einem untergeordneten Design erweitert werden kann. Ein untergeordnetes Design kann keine Seitenvorlagen überschreiben, die in einem Unterordner des übergeordneten Designs platziert sind.

Nachdem Sie sich für ein Benennungsmuster entschieden haben, erstellen wir nun eine Seitenvorlage.

Erstellen einer Seitenvorlage

Erstellen Sie eine Kopie von page.phpund benennen Sie sie um in pagetemplate-fullwidth.php. Um es zu einer Seitenvorlage zu machen, müssen Sie nur ganz am Anfang einen Kommentar hinzufügen, der WordPress mitteilt, dass es sich um eine Seitenvorlage handelt:

Alles, was Sie brauchen, ist ein Kommentar ganz am Anfang der Datei, mit „Template Name: ” und Ihrem Template-Namen dahinter. Das ist es! Gehen Sie in den Admin-Bereich, bearbeiten Sie eine Seite, und Sie sollten die Option sehen, „Fullwidth” als Vorlage auszuwählen.

Ich habe erwähnt, dass Sie in WordPress 4.7 definieren können, für welche Beitragstypen die Seitenvorlage verfügbar sein soll. Im Moment ist es nur für Seiten verfügbar, aber sagen Sie, Sie möchten auch die Option, Beiträge in voller Breite zu erstellen? Fügen Sie in diesem Fall „Template Post Type: ” innerhalb desselben Kommentarblocks hinzu und definieren Sie Ihre Posttypen durch Komma getrennt. Zum Beispiel, um es sowohl für Beiträge als auch für Seiten verfügbar zu machen;

Bearbeiten Sie einen Beitrag und Sie sollten eine neue Metabox „Beitragsattribute” sehen, in der Sie eine Vorlage mit voller Breite auswählen können. Nett!

Ändern des Codes in unserer Seitenvorlage

Bearbeiten wir nun die Seitenvorlage so, dass sie tatsächlich etwas anderes macht als die Einzelseitenansicht. Lassen Sie uns die Anforderung für die Seitenleistenvorlage entfernen: (Ich habe sie auskommentiert, um sie besser sichtbar zu machen, aber Sie können die Zeile einfach löschen).

Lassen Sie uns noch etwas tun, um unsere Seitenvorlage einfacher zu gestalten. Wenn Sie CSS hinzufügen, müssen Sie oft wissen, ob die Seite eine Seitenleiste hat oder nicht, um die Spalten/das Layout anzupassen. Erinnern Sie body_classsich, was dem body-Element eine ganze Reihe nützlicher Klassen bietet? Was wäre, wenn wir eine benutzerdefinierte Klasse zu body hinzufügen würden, die uns mitteilt, ob die aktuelle Seite eine Seitenleiste hat oder nicht?

Filter anbody_class

Hinweis: Sie haben vielleicht bemerkt, dass jede Seite oder jeder Beitrag, die eine Seitenvorlage verwenden, bereits eine bestimmte Textklasse erhält; „page-template-” – in unserem Beispiel "page-template-pagetemplate-fullwidth". Es ist eine ziemlich lange Klasse, und außerdem wollen wir unser Thema flexibler machen – und die volle Breite für andere Vorlagen außer denen, die Seitenvorlagen verwenden, zulassen. Zum Beispiel möchten Sie normalerweise keine Seitenleiste auf der Startseite, richtig?

Hinweis: Dies fügt dem Körper nur eine Klasse hinzu, damit das Styling einfacher wird, es deaktiviert nicht wirklich die Seitenleistenausgabe. Sie müssen daran denken, die dort zu löschen, get_sidebar()wo Sie sie nicht haben möchten.

Lassen Sie uns einen Filter für body_classzum Hinzufügen einer benutzerdefinierten Seitenleistenklasse in unserer functions.phphinzufügen, damit Sie später in anderen Fällen, in denen Sie die Seitenleiste nicht möchten, weitere hinzufügen können. WordPress hat ein nettes bedingtes Tag, um zu überprüfen, ob eine Seitenvorlage verwendet wird; is_page_template()wo Sie den Namen Ihrer Seitenvorlage als Parameter eingeben. Wir wollen eine Klasse hinzufügen, wenn dies nicht zutrifft, also fügen wir das Gegenteil mit „!” hinzu:

add_filter('body_class', 'wptutorial_body_class_filter');
function wptutorial_body_class_filter($classes) {
    if (!is_page_template('pagetemplate-fullwidth.php')) {
        $classes[] = 'has-sidebar';
    }
    return $classes;
}

Während Sie die Vorlagen entwickeln, werden Sie höchstwahrscheinlich gelegentlich auf Vorlagen stoßen, denen Sie die Sidebar-Klasse nicht hinzufügen möchten, und während Sie diese Fälle in this hinzufügen if. Wenn Sie beispielsweise die Sidebar-Klasse nicht auf der Titelseite haben möchten, können Sie !is_front_page(). Dadurch wird die Klasse „has-sidebar” allen Seiten außer der Startseite und der Seitenvorlage hinzugefügt:

if (!is_front_page() && !is_page_template('pagetemplate-fullwidth.php'))

Es liegt an Ihnen, wie viele Seitenvorlagen Sie möchten und was sie enthalten sollen. Dies war nur eine einfache Einführung. Wenn Sie daran interessiert sind, wie Sie andere Beiträge innerhalb einer Seitenvorlage abfragen können, sehen Sie sich den nächsten Schritt an .