Erstellen Sie eine benutzerdefinierte Seitenvorlage in einem WordPress-Theme

Eines der wichtigsten Verkaufsargumente von WordPress ist die Idee von Themes. Ein einziges Thema fügt dem Design und der Funktionalität der Website einen großen Wert hinzu. Es gibt jedoch Websites, die auf verschiedenen Seiten unterschiedliche Designs haben.

Leider hindern mehrere WordPress-Themes Benutzer daran, Layouts und Funktionen für eine andere Seite in der Hierarchie zu ändern. Die benutzerdefinierte WordPress-Seitenvorlage ermöglicht es Benutzern, benutzerdefinierte Anforderungen wie die rechte/linke Seitenleiste auf einer bestimmten Seite, eine zusätzliche Call-to-Action-Funktionalität oder möglicherweise eine eindeutige Kopfzeile für eine bestimmte Zielseite zu integrieren. Lassen Sie uns weiter eintauchen, um zu sehen, wie benutzerdefinierte WordPress-Seitenvorlagen verschiedene Arten von Inhalten anzeigen.

Eine benutzerdefinierte WordPress-Seitenvorlage kann für eine Reihe von Zwecken verwendet werden. Einige Ideen umfassen:

• Aktuelle Beiträge jeder Kategorie anzeigen
• Betten Sie Google Map oder ein beliebiges Skript ein
• Liste aller Autoren.
• Kürzlich hochgeladene Bilder
• Benutzerdefinierte Designseite für das Portfolio
• Kontaktseite

Das Erscheinungsbild aller Seiten und Beiträge, die auf einer WordPress-Website erstellt werden, wird von einer Vorlagendatei namens page.php verwaltet . Das Erstellen oder Bearbeiten einer benutzerdefinierten Seitenvorlage in WordPress erfordert Grundkenntnisse in HTML, CSS und PHP.

Öffnen Sie einfach einen beliebigen Texteditor und fügen Sie den folgenden Code darin ein.

 <?php /* Vorlagenname: PageWithoutSidebar */ ?>

Die obige Codezeile teilt WordPress mit, dass es sich um eine Vorlagendatei namens PageWithoutSidebar handelt . Sie können einen beliebigen Namen verwenden. Speichern Sie nun diese Datei als PageWithoutSidebar.php . Auch hier können Sie einen beliebigen anderen Namen für die Datei verwenden. Aber vergessen Sie nicht, die Erweiterung als .php . beizubehalten

Jetzt testen wir unsere neu erstellte Vorlagendatei.

Melden Sie sich bei Ihrem Hosting-Panel an. In diesem Beispiel verwende ich Cloudways – Ein am schnellsten verwaltetes WordPress-Hosting. Cloudways unterstützt WordPress-Anwendungen mit den Anbieteroptionen für AWS, DigitalOcean, GCP, Linode und Vultr. Navigieren Sie zum Ordner /wp-content/themes . Öffnen Sie Ihren aktuellen Theme-Ordner und laden Sie die Datei PageWithoutSidebar.php dort hoch .

Gehe zu WordPress Admin Panel > Seiten > Neu hinzufügen . Sie können die neue benutzerdefinierte Seitenvorlage auf der rechten Seite sehen.

Erstellen Sie eine neue Seite und legen Sie ihre Vorlage auf PageWithoutSidebar fest. Wenn Sie fertig sind, veröffentlichen Sie es.

Öffnen Sie die neu erstellte Seite. Da die Vorlage noch keine Gestaltungselemente enthält, wird eine leere Seite wie im Bild unten angezeigt.

Dies zeigt, dass die benutzerdefinierte Seitenvorlage in WordPress erfolgreich implementiert wurde, daher können Sie ein benutzerdefiniertes responsives WordPress-Theme erstellen

Es ist jetzt an der Zeit, einige Codezeilen hinzuzufügen, um den Inhalt der Seite anzuzeigen.

In dieser Demo werde ich besprechen, wie Sie die Standardseitenvorlage von Twenty Sixteen anpassen können.

Das Standard-Erscheinungsbild der Seiten wird durch die Datei page.php generiert, die sich im Ordner /wp-contents/themes/IHR THEME/ befindet . Öffnen Sie page.php und kopieren Sie diesen Code.

 <?php get_header(); ?>

<div class="content-area">
                <main class="site-main" role="main">
                                <?php
                                // Starte die Schleife.
                                while (have_posts()): the_post();

                                                // Einschließen der Seiteninhaltsvorlage.
                                                get_template_part( 'Vorlagenteile/Inhalt', 'Seite');

                                                // Wenn Kommentare geöffnet sind oder wir mindestens einen Kommentar haben, laden Sie die Kommentarvorlage.
                                                if ( comments_open() || get_comments_number() ) {
                                                                comments_template();
                                                }

                                                // Ende der Schleife.
                                Endzeit;
                                ?>

                </main><!-- .site-main -->

                <?php get_sidebar( 'content-bottom' ); ?>

</div><!-- .content-area -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Fügen Sie diesen Code in PageWithoutSidebar.php direkt unter dieser Codezeile ein.

 <?php /* Vorlagenname: PageWithoutSidebar */ ?>

Speichern Sie es!

Ihre vollständige PageWithoutSidebar.php- Datei sieht wie folgt aus.

 <?php /* Vorlagenname: PageWithoutSidebar */ ?>

<?php get_header(); ?>

<div class="content-area">

                <main class="site-main" role="main">

                                <?php

                                // Starte die Schleife.
                                while (have_posts()): the_post();

                                                // Einschließen der Seiteninhaltsvorlage.
                                                get_template_part( 'Vorlagenteile/Inhalt', 'Seite');

                                                // Wenn Kommentare geöffnet sind oder wir mindestens einen Kommentar haben, laden Sie die Kommentarvorlage.
                                                if ( comments_open() || get_comments_number() ) {

                                                                comments_template();

                                                }

                                                // Ende der Schleife.
                                Endzeit;

                                ?>

                </main><!-- .site-main -->

                <?php get_sidebar( 'content-bottom' ); ?>

</div><!-- .content-area -->

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Gehen Sie zurück zu Ihrer Seite und aktualisieren Sie sie. Sie werden feststellen, dass alles so funktioniert, wie es beim standardmäßigen WordPress Twenty Sixteen-Theme funktioniert.

Lassen Sie es uns jetzt anpassen. Wie Sie sehen können, befindet sich auf der rechten Seite eine Seitenleiste. Ich werde es nur von dieser Seite entfernen. Alle anderen Seiten haben die Standarddarstellung des Themas Twenty Sixteen.

Öffnen Sie die Datei PageWithoutSidebar.php . Scrollen Sie nach unten bis zum Ende der Datei und entfernen Sie :

 <?php get_sidebar(); ?>

Dies ist die Codezeile, die die Seitenleiste auf der Seite abruft. Nachdem Sie die Linie entfernt haben, speichern Sie sie . Öffnen Sie die URL der Seite und die Seitenleiste ist nicht mehr vorhanden!

Wie Sie sehen, wurde die Seitenleiste erfolgreich von dieser Seite entfernt. Die Textausrichtung ist jedoch nicht gut. Auf der rechten Seite ist ein Leerzeichen. Die Lösung besteht darin, den Text zu rechtfertigen und so zu erweitern, dass er den Bildschirm ausfüllt.

Gehen Sie zurück zu PageWithoutSidebar.php und suchen Sie:

 <div class="content-area">

Ändern Sie einfach " content-area " in " site-content-fullwidth " und Sie sind fertig. Aktualisieren Sie die Seite und der Inhalt hat die volle Breite.

Immer noch neugierig, warum ich eine benutzerdefinierte Seitenvorlage erstellt habe, wenn ich die Datei page.php einfach hätte bearbeiten können ? Es ist ziemlich offensichtlich, dass, wenn die Datei page.php bearbeitet wird, alle Seiten der Website die Änderungen zeigen würden. Um ein benutzerdefiniertes Erscheinungsbild auf bestimmten Seiten anzuwenden, ist die benutzerdefinierte Seitenvorlage in WordPress praktisch. Sie können in WordPress auch eine benutzerdefinierte Benutzerrolle definieren, um Benutzern unterschiedliche Berechtigungen zuzuweisen.

Wenn Sie Fragen haben, können Sie diese gerne im Kommentarbereich unten posten.