Ich habe langsam mal angefangen eine Dokumentation für Dicentis zu schreiben und dafür habe ich eine neue WordPress Seite erstellt. Allerdings bin ich auf ein kleines Problem gestoßen und dafür gab es bis dato keine Lösung, die mich zufrieden gestellt hat. Ich möchte nämlich die Möglichkeit haben auf einer Seite alle Unterseiten der aktuellen Seite als Liste darzustellen. Und das natürlich automatisch ohne manuell eine Liste zu pflegen. So habe ich mich mal kurz hingesetzt und habe mir das Plugin Child Page Tree programmiert.

Screenshot der Dicentis Dokumentation
Mit Child Page Tree kann man schnell alle Unterseiten der aktuellen Seite anzeigen lassen. Und mit ein wenig CSS auch noch so anpassen, wie man es braucht.

Funktionalität von Child Page Tree

Child Page Tree ist ein relativ einfaches Plugin, aber es erfüllt seinen Zweck. Installiert man das Plugin wird eine Auswahl-Box über den Veröffentlichen Button angezeigt, mit der man die Position des Baums festlegen kann. Für meine Zwecke reichen drei Optionen mit denen ich einstellen kann, dass (1) gar kein Baum angezeigt wird, (2) der Baum am Anfang der Seite oder (3) am Ende der Seite angezeigt wird.

Screenshot der Selectbox vom Child Page Tree Plugin
Mit einer Selectbox ist schnell die Position festgelegt

Im Frontend wird dann geprüft, ob und wo ein Unterseiten-Baum angezeigt werden soll. Das Plugin benutzt die WordPress Funktion wp_list_pages, sodass eine ungeordnete Liste auch die Hierarchie abbildet. Möchte man die Liste etwas bearbeiten bevor sie im Frontend zu sehen ist kann man einfach den eingebauten Filter child_page_tree_before_output verwenden und die Liste ändern oder eine ganz neue Liste erstellen. Standardmäßig besteht das $args Array aus folgenden Werten:

$args = [
    'echo' => 0,
    'child_of' => $post_id,
    'title_li' => ''
 ];

Das Plugin bindet zudem mit dem Handle child_page_tree_style etwas CSS ein um die Liste schöner zu designen. Möchte man das Aussehen ändern kann man entweder mit dem Handle das CSS ausschließen (Codex: wp_dequeue_style) oder man kann auch mit Custom CSS, wie es z.B. mit Jetpack angeboten wird, einfach das CSS überschreiben. Die Liste könnt ihr mit der ID ul#child_page_tree ansprechen und eine Klasse nennt euch sogar die Position der Liste: .prepend oder .append .

Child Page Tree: Liste ohne Style
Ohne Style wird die Liste als normale ungeordnete Liste dargestellt. Somit wird das Theme CSS benutzt.
Child Page Tree: Liste mit Style
Mit etwas CSS kann man schnell die Liste stylisch etwas aufwerten und dem Design besser anpassen.

Voraussetzung

Es gilt noch zu erwähnen, dass Child Page Tree PHP 5.4 voraussetzt. Sprich, wenn eure Webseite noch mit PHP 5.3 oder niedriger läuft wird das Plugin nicht funktionieren. Ihr bekommt allerdings eine Warnung im Backend. Nichtsdestotrotz rate ich dringend dazu die PHP Version zu aktualisieren und auf PHP 5.5 aber besser noch PHP 5.6 zu wechseln.

Entwicklung

Wenn ihr interessiert seit, könnt ihr das Plugin entweder im WordPress.org Repository finden oder auf GitHub. Pull Requests und Verbesserungsvorschläge könnt ihr jederzeit gerne stellen.

Veröffentlicht von Hans-Helge

Der studierte Informatiker arbeitet als Entwickler und Trainer bei ChurchTools und betreut neben eigenen Projekten einige andere Webseiten u.A. im ehrenamtlichen Bereich.

Beteilige dich an der Unterhaltung

4 Kommentare

  1. Hallo Hans,

    so ein Plugin hätte ich die Tage erst mal gebraucht. Allerdings fände ich es besser, wenn ich die Unterseiten, frei, mittels Shortcode einfügen kann.
    lg
    Jochen

    1. Ein Shortcode habe ich halt nicht gebraucht, aber möglich wäre es. Bist du Entwickler? Dann kannst du gerne einen Pull Request stellen 🙂

      1. Nein, war auch nur eine Anregung. Ich brauche das Plugin momentan nicht mehr.

Schreibe einen Kommentar

Schreibe einen Kommentar zu Hans-Helge Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert