So erstellen Sie benutzerdefinierte WordPress-Seitenvorlagen

Seitenvorlagen in WordPress-Themes helfen bei der Bestimmung des Layouts von Seiten innerhalb einer Website. Das Optimieren dieser Vorlagen kann jedoch manchmal einschüchternd sein, insbesondere für Anfänger. Glücklicherweise bietet WordPress eine gewisse Flexibilität, wenn es um Seitenvorlagen geht, indem es Ihnen ermöglicht, benutzerdefinierte Seitenvorlagen in Ihrem Design zu erstellen.

Durch das Erstellen benutzerdefinierter Seitenvorlagen für Ihre Website können Sie Layouts und Designs für Ihre Website ganz einfach an Ihre Vorlieben anpassen. Außerdem können Sie benutzerdefinierte Anforderungen hinzufügen, z. B. die Verwendung unterschiedlicher Kopfzeilen für verschiedene Seiten. Diese Änderungen können tatsächlich auf verschiedene Seiten oder eine einzelne Seite angewendet werden.

In diesem Artikel werden wir untersuchen, was benutzerdefinierte WordPress-Seitenvorlagen sind, die Standard-Seitenvorlagenhierarchie und wie Sie benutzerdefinierte WordPress-Seitenvorlagen in Ihrem Design erstellen.

Inhaltsverzeichnis

Was ist eine benutzerdefinierte WordPress-Seitenvorlage?

Die Hierarchie der WordPress-Seitenvorlagen

Erstellen einer benutzerdefinierten Seitenvorlage

• So erstellen Sie eine globale benutzerdefinierte Vorlage
• Erstellen einer einzelnen Seitenvorlage

Fazit

Was ist eine benutzerdefinierte WordPress-Seitenvorlage?

Eine benutzerdefinierte WordPress-Seitenvorlage ist eine Vorlagendatei, die es Ihnen ermöglicht, ein separates Design und Gefühl für Ihre Website zu haben.

Wenn Sie beispielsweise ein Blogging-Design auf Ihrer Website haben, können Sie eine benutzerdefinierte Vorlage für Ihre Website erstellen, die keine Seitenleiste oder Kommentare darstellt. Sie können auch eine Vorlage für Seiten erstellen, bei denen Sie eine Vorlage haben, die Inhalt in einem Box-Layout und eine andere in einem Layout mit voller Breite wiedergibt. Die Anzahl der Seitenvorlagen, die Sie erstellen können, ist unbegrenzt.

Das Rendern von Seiten wird von der Datei page.php in WordPress gesteuert. Diese Datei bildet somit eine Standardbasis für das Rendern Ihres Seiteninhalts und befindet sich im Stammverzeichnis Ihrer Designdateien, wie unten dargestellt.

Wenn spezifischere Seitenvorlagen vorhanden sind, tritt die Vorlagenhierarchie in Kraft.

Die Hierarchie der WordPress-Seitenvorlagen

Die Seitenvorlagenhierarchie bestimmt, welche Vorlagendatei WordPress beim Anzeigen einer Seite auswählt, abhängig von der Art der gestellten Anfrage sowie ihrer Existenz innerhalb des Themes.

Die standardmäßige WordPress-Vorlagenhierarchie sieht wie folgt aus:

Seitenvorlage : WordPress sucht nach einer der Seite zugewiesenen Vorlage und verwendet diese Vorlage innerhalb der Seite

page-{slug}.php : Wenn der Seite kein Template zugewiesen ist, sucht WordPress nach einem Template mit dem Slug auf der Seite und wendet es an, falls es gefunden wird.

Ein Slug ist ein Teil innerhalb der Seiten-URL nach dem Domainnamen und kann bearbeitet werden. Unten finden Sie eine beispielhafte Abbildung dazu.

page-{id}.php : WordPress prüft dann auf die Existenz einer Seitenvorlage mit der Seiten-ID der Seite, die gerendert wird, wenn keine Vorlage mit dem Slug gefunden wird.

page.php : Wenn keine Vorlage mit einer Seiten-ID gefunden wird, verwendet WordPress die Standardvorlage page.php, um die Seite zu rendern.

singular.php : In einem Fall, in dem die Datei page.php nicht gefunden wird, verwendet WordPress die Datei singular.php unabhängig vom Beitragstyp.

index.php : Wenn keine der oben genannten Vorlagen verfügbar ist, rendert WordPress die Seiten standardmäßig mit der Datei index.php.

Das Rendern von Seiten innerhalb Ihrer WordPress-Umgebung kann daher von einer der oben genannten Seitenvorlagen durchgeführt werden. Es liegt daher an Ihnen, die Prioritätsstufe zu bestimmen, die Sie einrichten möchten.

Erstellen einer benutzerdefinierten Seitenvorlage

Das Erstellen benutzerdefinierter Seitenvorlagen in Ihrem Design ist ganz einfach. Sie müssen jedoch festlegen, ob die Seitenvorlagen für eine einzelne Seite oder eine beliebige Seite gelten sollen.

In diesem Leitfaden werden wir untersuchen, wie Sie manuell eine globale Seitenvorlage im Stax-Design sowie eine einzelne Seitenvorlage für eine unserer Seiten erstellen.

So erstellen Sie eine globale benutzerdefinierte Vorlage

Manchmal möchten Sie eine Seitenvorlage erstellen, die global auf jeder Seite Ihrer Website verwendet werden kann.

Dazu müssen Sie zunächst einen Texteditor identifizieren, den Sie verwenden möchten, z. B. Notepad, Notepad ++, Sublime Text oder einen anderen Editor Ihrer Wahl.

Sobald dies erledigt ist, können Sie mit der Erstellung Ihrer Vorlagendatei beginnen, indem Sie die folgenden Schritte ausführen:

Schritt 1: Erstellen Sie eine neue Datei und fügen Sie den folgenden Code hinzu :

 <?php /* Template Name: PageWithNoFooter */ ?>

Wir empfehlen die Verwendung eines Vorlagennamens, der nicht in anderen Seitenvorlagen verwendet wird, die Sie möglicherweise auf Ihrer Website haben, sowie einen Namen, den Sie leicht identifizieren und mit den Seiten Ihrer Website in Verbindung bringen können.

Sobald dies erledigt ist, speichern Sie Ihre neue Seitenvorlage mit der Erweiterung .php. In unserem Fall nennen wir hier die Vorlagendatei pagewithnofooter.php . Sie können einen beliebigen Namen Ihrer Wahl verwenden, es ist jedoch empfehlenswerter, einen Namen zu verwenden, der Ihrem Vorlagennamen ähnelt.

Schritt 2: Fügen Sie der Datei Ihren gewünschten Code hinzu

In diesem Schritt können Sie der Datei Ihren bevorzugten Code hinzufügen, sei es in PHP oder sowohl in PHP als auch in HTML.

Zu Veranschaulichungszwecken verwenden wir in unserem Fall hier den Inhalt der Standarddatei right-sidebar.php in der Datei pagewithnofooter.php, passen sie jedoch an und fügen den Code hinzu, um einen benutzerdefinierten HTML-Begrüßungstext zu rendern und die Fußzeile zu deaktivieren. Wenn Sie ein anderes WordPress-Thema verwenden, können Sie auch den Inhalt der page.php innerhalb des Themas oder einer anderen themendefinierten Seitenvorlage kopieren, die Ihr Thema haben könnte.

Unser Code wird daher wie folgt aussehen:

 <?php /*Template Name: PageWithNoFooter */ namespace Stax; use Stax\Customizer\Config; stax()->force_main_layout( 'right' ); get_header(); ?> <div <?php stax()->main_section_class(); ?>> <div class="svq-site-content"> <?php while ( have_posts() ) : the_post(); ?> <?php if ( 'yes' === stax()->get_option( Config::OPTION_SINGLE_SHOW_TITLE ) ) { stax()->get_template_part( 'template-parts/content/panel', get_post_type() ); } ?> <main class="svq-main-page"> <?php echo ' <H2>Welcome to my custom Template. You can use this template globally within your website</H2>'; ?> <?php stax()->get_template_part( 'template-parts/content/entry', get_post_type() ); ?> </main><!-- #primary --> <?php endwhile; ?> <?php get_sidebar(); ?> </div> </div> <?php //get_footer();

Schritt 3: Laden Sie die Seitenvorlage in Ihre Designdateien hoch .

Laden Sie mit Hilfe eines FTP-Programms wie Filezilla oder über Ihr Hosting-Panel Ihre benutzerdefinierte Datei in das Stammverzeichnis Ihrer Designdateien hoch. In unserem Fall hier befindet sich dies entweder in den folgenden Verzeichnispfaden:

i) wp-content > Themen > Stax

ii) Empfohlen: wp-content > Themes > stax-child

Dies gilt, wenn Sie ein untergeordnetes Thema auf Ihrer Website verwenden, und stax-child ist Ihr untergeordnetes Thema.

Wir empfehlen, das untergeordnete Design zu verwenden, während Sie Seitenvorlagen oder andere Dateianpassungen innerhalb Ihres Designs anpassen, um zu vermeiden, dass Anpassungen während Design-Updates verloren gehen.

Schritt 4: Erstellen Sie eine neue Seite und weisen Sie ihr das Template „PageWithNoFooter“ zu

Navigieren Sie dazu in Ihrem WordPress-Dashboard zum Abschnitt Seiten > Neu hinzufügen und erstellen Sie Ihre Seite.

Nachdem Sie die Seite erstellt haben, weisen Sie ihr das Template „PageWithNoFooter“ zu und speichern Ihre Änderungen.

Nachfolgend finden Sie eine beispielhafte Darstellung dazu:

Bei der Vorschau der Seite im Front-End wird auf unserer Seite jetzt keine Fußzeile auf Ihrer Seite gerendert. Sie haben auch das benutzerdefinierte HTML, das wir hinzugefügt haben.

Nachfolgend ein Screenshot dazu:

Sie können die Vorlage auf jeder Seite verwenden, auf der Sie das Layout anwenden möchten, oder auf jeder Seite, auf der Sie keine Fußzeile haben möchten.

Erstellen einer einzelnen Seitenvorlage

Benutzerdefinierte Seitenvorlagen für einzelne Seiten sind eher seitenspezifisch. Wie bereits erwähnt, werden diese Vorlagen zur Auswahl berücksichtigt, wenn einer Seite keine „Seitenvorlage“ zugeordnet ist.

Bei diesen Vorlagen können Sie die Seite entweder per Slug oder Seiten-ID anvisieren. Es ist auch wichtig, die Zukunftsaussichten Ihrer Website zu berücksichtigen, wenn Sie entscheiden, ob Sie einen Seiten-Slug oder eine ID verwenden. Wenn Sie beispielsweise beabsichtigen, Ihre Website zu einer anderen Domain zu migrieren, wäre die Verwendung einer Seiten-ID beim Erstellen Ihrer Vorlagendatei nicht angemessen. Stattdessen wird die Verwendung des Slugs als bessere Option angesehen. Wenn andererseits Ihre Website von mehreren Personen verwaltet wird und Sie der Meinung sind, dass die Möglichkeit besteht, dass sie den Seiten-Slug ändern könnten, wäre es viel besser, beim Erstellen der Seitenvorlage eine Seiten-ID zu verwenden.

In unserem Fall erstellen wir hier eine benutzerdefinierte Seitenvorlage für unsere Kontaktseite und deaktivieren die Fußzeile der Seite. Um eine solche Vorlage zu erstellen, müssen Sie Folgendes tun:

Schritt 1: Kopieren Sie den Inhalt der page.php

In diesem Schritt müssen Sie zuerst die page.php in Ihren Designdateien finden.

Sobald Sie die Datei gefunden haben, wählen Sie sie aus, um sie zu bearbeiten und ihren Inhalt zu kopieren.

Schritt 2: Erstellen Sie eine neue Vorlage für die Seite

Erstellen Sie im Stamm Ihrer Designdateien die Seitenvorlage für die Kontaktseite. Sie können entweder die Datei page-{id}.php oder page-{slug}.php verwenden. In unserem Fall hier verwenden wir den Slug, also benennen wir unsere Vorlage als page-contact.php, da „contact“ unser Seiten-Slug ist, wie unten zu sehen ist:

Nachfolgend finden Sie auch eine Abbildung zum Speicherort der Datei:

Schritt 3: Fügen Sie den Inhalt der Datei page.php ein

Sie müssen nun den Inhalt der Datei page.php, die wir in Schritt 1 oben kopiert haben, in unsere neue Datei page-contact.php einfügen. Anschließend können Sie die Datei anpassen, um Ihre gewünschten Codeänderungen zu integrieren, und Ihre Änderungen speichern. In unserem Fall deaktivieren wir die Fußzeile auf der Kontaktseite, sodass unser endgültiger Code wie folgt lautet:

 <?php namespace Stax; get_header(); ?> <div <?php stax()->main_section_class(); ?>> <div class="svq-site-content"> <?php /** * Renders the single blog post template. * * @hooked stax_show_single - 10 * @includes template-parts/single.php */ do_action( 'stax_single' ); ?> </div> </div> <?php //get_footer();

Wenn Sie sich jetzt Ihre Kontaktseite in der Vorschau ansehen, werden Sie feststellen, dass die Seite keine Fußzeile enthält.

Unten ist ein Screenshot-Vergleich auf der Seite zu Beginn und nach dem Anwenden der neuen Vorlage.

Kontaktseite mit Fußzeile

Kontaktseite ohne Fußzeile

Fazit

Das Erstellen benutzerdefinierter Seitenvorlagen für Ihre Website ist relativ einfach. In diesem Leitfaden haben wir uns speziell mit der manuellen Erstellung benutzerdefinierter Vorlagen in Ihrem WordPress-Theme befasst. Als Anwendungsfall haben wir hier das kostenlose Stax Theme verwendet. Sie können jedoch dieselbe Technik auf alle anderen WordPress-Themes anwenden, die den WordPress-Codierungsstandards folgen. Es gibt jedoch auch andere Möglichkeiten, wie Sie benutzerdefinierte Seitenvorlagen erstellen können, z. B. die Verwendung von Seitenerstellern wie Elementor.

Wir hoffen, dass dieser Artikel die notwendigen Einblicke in die manuelle Erstellung benutzerdefinierter Seitenvorlagen bietet. Fühlen Sie sich frei, unten zu kommentieren, falls Sie Fragen oder Anregungen haben.