Wie man eine Liste von Kindseiten für eine übergeordnete Seite in WordPress anzeigt

Kürzlich fragte uns einer unserer Leser, wie man Unterseiten einer WordPress-Seite anzeigt. Das ist eine Frage, die wir bei WPBeginner ziemlich oft erhalten, und sie unterstreicht einen häufigen Bedarf zur Verbesserung der Website-Navigation und Benutzererfahrung. 

Wenn Sie Ihre WordPress-Website mit übergeordneten und untergeordneten Seiten organisieren, möchten Sie möglicherweise Ihre untergeordneten Seiten oder Unterseiten auf der Hauptseite anzeigen. Dies hilft Benutzern, alle verfügbaren Informationen in einem bestimmten Abschnitt leicht zu sehen und schnell zu relevanten Unterthemen zu navigieren.

Möglicherweise möchten Sie auch den Link zur Haupt-Überseite auf jeder Unterseite anzeigen, um die Navigation zu erleichtern und einen brotkrümelartigen Effekt zu erzielen. Diese optimierte Navigation verhindert, dass Benutzer sich in den Tiefen Ihrer Website verirren, und verbessert ihr gesamtes Surferlebnis.

In diesem Artikel zeigen wir Ihnen, wie Sie ganz einfach eine Liste von Child-Seiten für eine übergeordnete Seite in WordPress anzeigen.

Wann müssen Sie eine Liste von Child-Seiten anzeigen?

WordPress verfügt über zwei Standard-Beitragstypen namens Beiträge und Seiten. Beiträge sind Blog-Inhalte und werden normalerweise mit Kategorien und Tags organisiert.

Seiten sind einmalige oder eigenständige Inhalte, die immer aktuell sind, wie z. B. eine „Über uns“-Seite oder eine „Kontakt“-Seite.

In WordPress können Seiten hierarchisch sein, was bedeutet, dass Sie sie mit übergeordneten und untergeordneten Seiten organisieren können. Zum Beispiel möchten Sie vielleicht eine Produktseite mit Unterseiten für Funktionen, Preise und Support erstellen.

Um eine Unterseite zu erstellen, folgen Sie unserer Anleitung zur Erstellung einer Unterseite in WordPress.

Nachdem Sie Ihre übergeordneten und untergeordneten Seiten erstellt haben, möchten Sie möglicherweise die untergeordneten Seiten auf der Hauptseite auflisten.

Jetzt ist ein einfacher Weg, dies zu tun, indem Sie die übergeordnete Seite manuell bearbeiten und eine Liste von Links einzeln hinzufügen.

Sie müssen jedoch jedes Mal, wenn Sie eine Unterseite hinzufügen oder löschen, die übergeordnete Seite manuell bearbeiten.

Wäre es nicht schöner, wenn Sie einfach eine Child-Seite erstellen könnten und diese automatisch als Link auf der übergeordneten Seite erscheinen würde?

Das gesagt, schauen wir uns einige andere dynamische Möglichkeiten an, um schnell eine Liste von untergeordneten Seiten auf der übergeordneten Seite in WordPress anzuzeigen. Wir zeigen Ihnen drei Methoden, damit Sie diejenige auswählen können, die am besten zu Ihnen passt:

• Methode 1. Kindseiten auf der übergeordneten Seite mit einem Plugin anzeigen
• Methode 2. Unterseiten für eine übergeordnete Seite mit Code auflisten
• Methode 3. Unterseiten dynamisch ohne Shortcode anzeigen

Methode 1. Kindseiten auf der übergeordneten Seite mit einem Plugin anzeigen

Diese Methode ist der einfachste Weg, Kindseiten auf einer übergeordneten Seite anzuzeigen, und wird für alle Benutzer empfohlen.

Zuerst müssen Sie das Page-list Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung, wie man ein WordPress-Plugin installiert.

Nach der Aktivierung müssen Sie die übergeordnete Seite bearbeiten und einfach den folgenden Shortcode dort einfügen, wo Sie die Liste der untergeordneten Seiten anzeigen möchten.

[Unterseiten]

Sie können Ihre Seite jetzt speichern und in einem neuen Browser-Tab in der Vorschau anzeigen. Sie werden feststellen, dass eine einfache Aufzählungsliste aller Unterseiten angezeigt wird.

Wenn Sie möchten, können Sie etwas benutzerdefiniertes CSS hinzufügen, um das Erscheinungsbild der Liste zu ändern.

Hier ist ein Beispiel-CSS, das Sie als Ausgangspunkt verwenden können.

ul.page-list.subpages-page-list {
    list-style: none;
    list-style-type: none;
    background-color: #eee;
    border: 1px solid #CCC;
    padding: 20px;
}

Nach dem Anwenden Ihres benutzerdefinierten CSS können Sie die übergeordnete Seite in der Vorschau anzeigen.

So sah es auf unserer Test- WordPress-Website aus:

Das Plugin bietet eine Reihe von Shortcode-Parametern, mit denen Sie Tiefe, auszuschließende Seiten, Anzahl der Elemente und mehr festlegen können.

Für Details lesen Sie bitte die Plugin-Seite für detaillierte Dokumentation.

Methode 2. Unterseiten für eine übergeordnete Seite mit Code auflisten

Diese Methode ist etwas fortgeschritten und erfordert das Hinzufügen von Code zu Ihrer WordPress-Website. Wenn Sie dies noch nie getan haben, werfen Sie bitte einen Blick auf unseren Leitfaden zum Kopieren und Einfügen von Code in WordPress.

Um Unterseiten unter einer übergeordneten Seite aufzulisten, müssen Sie den folgenden Code in ein Code-Snippet-Plugin oder in die functions.php-Datei Ihres Themes einfügen:

function wpb_list_child_pages() { 
 
global $post; 
 
if ( is_page() && $post->post_parent )
 
    $childpages = wp_list_pages( 'sort_column=menu_order&title_li=&child_of=' . $post->post_parent . '&echo=0' );
else
    $childpages = wp_list_pages( 'sort_column=menu_order&title_li=&child_of=' . $post->ID . '&echo=0' );
 
if ( $childpages ) {
 
    $string = '<ul class="wpb_page_list">' . $childpages . '</ul>';
}
 
return $string;
 
}
 
add_shortcode('wpb_childpages', 'wpb_list_child_pages');

Bei WPBeginner empfehlen wir immer, Code in WordPress mit dem WPCode Plugin hinzuzufügen.

WPCode ermöglicht es Ihnen, benutzerdefinierten Code einfach hinzuzufügen, ohne Ihre Theme-Dateien zu bearbeiten, sodass Sie sich keine Sorgen machen müssen, Ihre Website zu beschädigen.

Zuerst müssen Sie das kostenlose WPCode-Plugin installieren und aktivieren. Schritt-für-Schritt-Anleitungen finden Sie in dieser Anleitung zur Installation eines WordPress-Plugins.

Nach der Aktivierung des Plugins navigieren Sie in Ihrem WordPress-Dashboard zu Code-Snippets » Snippet hinzufügen .

Von dort aus fahren Sie mit der Maus über die Option „Fügen Sie Ihren benutzerdefinierten Code hinzu (Neuer Ausschnitt)“ und klicken Sie auf die Schaltfläche „Benutzerdefinierten Ausschnitt hinzufügen“.

Wählen Sie dann aus der Liste der Optionen, die auf dem Bildschirm erscheinen, ‘PHP Snippet’ als Code-Typ aus.

Fügen Sie als Nächstes einen Titel für Ihr Snippet hinzu, der Ihnen helfen kann, sich daran zu erinnern, wofür der Code bestimmt ist.

Fügen Sie nun einfach den obigen Code in das Feld ‘Code-Vorschau’ ein.

Schalten Sie dann einfach den Schalter von ‘Inaktiv’ auf ‘Aktiv’ um und klicken Sie oben auf der Seite auf die Schaltfläche ‘Snippet speichern’.

Dieser Code prüft zuerst, ob eine Seite eine übergeordnete Seite hat oder ob die Seite selbst eine übergeordnete Seite ist.

Wenn es sich um eine übergeordnete Seite handelt, werden die zugehörigen Unterseiten angezeigt. Wenn es sich um eine Unterseite handelt, werden alle anderen Unterseiten ihrer übergeordneten Seite angezeigt.

Schließlich, wenn dies nur eine Seite ohne untergeordnete oder übergeordnete Seite ist, tut der Code einfach nichts. In der letzten Zeile des Codes haben wir einen Shortcode hinzugefügt, damit Sie untergeordnete Seiten einfach anzeigen können, ohne Ihre Seitenvorlagen zu ändern.

Um Unterseiten anzuzeigen, fügen Sie einfach den folgenden Shortcode auf einer Seite oder in einem Text-Widget in der Seitenleiste ein:

[wpb_childpages]

Vergessen Sie nicht, Ihre Änderungen zu speichern und sie in einem Browser-Tab in der Vorschau anzuzeigen. So sieht es auf unserer Testseite aus.

Sie können diese Seitenliste nun mit etwas benutzerdefiniertem CSS gestalten.

Hier ist ein Beispiel für CSS-Code, den Sie als Ausgangspunkt verwenden können:

ul.wpb_page_list {
    list-style: none;
    list-style-type: none;
    background-color: #eee;
    border: 1px solid #CCC;
    padding: 20px;
}

Methode 3. Unterseiten dynamisch ohne Shortcode anzeigen

Die Verwendung von Shortcodes ist praktisch, aber das Problem dabei ist, dass Sie Shortcodes auf allen Seiten hinzufügen müssen, die übergeordnete oder untergeordnete Seiten haben.

Möglicherweise haben Sie Shortcodes auf vielen Seiten und vergessen manchmal sogar, sie hinzuzufügen.

Ein besserer Ansatz wäre, die Seiten-Template-Datei in Ihrem Theme zu bearbeiten, damit sie automatisch Unterseiten anzeigen kann.

Dazu müssen Sie die Hauptvorlage page.php bearbeiten oder eine benutzerdefinierte Seiten-Vorlage in Ihrem Theme erstellen.

Sie können Ihr Hauptthema bearbeiten, aber diese Änderungen gehen verloren, wenn Sie Ihr Thema ändern oder aktualisieren. Deshalb wäre es besser, wenn Sie ein Child-Theme erstellen und dann Ihre Änderungen im Child-Theme vornehmen.

In Ihrer Seitenvorlagendatei müssen Sie diese Codezeile dort einfügen, wo Sie die Kindseiten anzeigen möchten.

<?php wpb_list_child_pages(); ?>

Das ist alles. Ihr Theme erkennt nun automatisch untergeordnete Seiten und zeigt sie in einer einfachen Liste an.

Sie können die Stile mit CSS und Formatierung anpassen.

Hier ist ein Beispiel dafür, wie die OptinMonster-Website die übergeordnete Seite und Unterseiten anzeigt:

Wir hoffen, dieser Artikel hat Ihnen geholfen, Kindseiten für eine übergeordnete Seite in WordPress aufzulisten. Möglicherweise möchten Sie auch unseren Leitfaden zu den wichtigsten Seiten, die Sie erstellen sollten, auf einer neuen WordPress-Website und unseren Vergleich der besten Drag & Drop WordPress Page Builder, um benutzerdefinierte Layouts ohne Code zu erstellen, ansehen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.