Beim WordPress-Theme Yoko Unterseiten der aktuellen Seite auflisten

Karl Lorey — Sat, 05 May 2012 19:27:51 GMT

Yoko ist ein sehr schönes Theme für WordPress. Es passt sich automatisch der Fensterbreite bzw. dem Endgerät an („responsive layout“) und lässt sich somit nicht nur auf dem PC, sondern auch auf mobilen Endgeräten sehr gut betrachten.

Als Problem ergibt sich leider der Nachteil, dass bei einer mobilen Ansicht des WordPress-Theme Yoko das Menü nicht mehr aufgeklappt werden kann (Touch-Bedienung). Dies führt dazu, dass Unterseiten, die nicht direkt im Inhalt der Seite verlinkt sind, auf einem mobilen Endgerät nicht mehr zu finden sind.

Yoko um eine Unterseiten-Übersicht erweitern

Yoko mit einer Unterseiten-Übersicht

Eine einfache und elegante Möglichkeit dieses Problem mit Yoko zu umgehen, ist die Erstellung eines WordPress-Seiten-Template, welches nach dem eigentlichen Seiten-Inhalt alle Unterseiten als Liste in einer Übersicht anzeigt. Dies ermöglicht eine erleichterte Bedienung des Themes und damit auch das problemlose mobile Navigieren durch die Webseite. Zunächst muss dazu das Theme Yoko selbst und danach der WordPress-Inhalt angepasst werden. Die Anpassung sollte maximal 20 Minuten in Anspruch nehmen (je nach Anzahl der umzustellenden Seiten).

Anpassung des Theme im Yoko-Theme-Ordner

Die beste Möglichkeit Yoko anzupassen, ist das Erstellen eines neuen Templates. Hierzu muss lediglich eine Datei namens „subpageindex.php“ im Yoko-Ordner (wp-content/themes/yoko) mit folgendem Inhalt erstellt werden:

<?php
/*
Template Name: Subpage index
*/
get_header(); ?>

<div id="wrap">
<div id="main">

    <div id="content">

        <?php the_post(); ?>

        <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

            <header class="page-entry-header">
                <h1 class="entry-title"><?php the_title(); ?></h1>
            </header><!--end page-entry-hader-->

            <div class="single-entry-content">
                <?php the_content(); ?>
                <div class="clear"></div>
                <?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'yoko' ), 'after' => '</div>' ) ); ?>
                <?php edit_post_link( __( 'Edit →', 'yoko' ), '<span class="edit-link">', '</span>' ); ?>
            </div><!--end entry-content-->

            <!-- Subpage index -->
            <h2>Unterseiten</h2>
            <?php
            // Hier werden die direkten Unterseiten geladen
            $children = wp_list_pages('title_li=&depth=1&child_of='.$post->ID.'&echo=0');
            // Falls es Unterseiten gibt, werden diese ausgegeben
            if ($children) { ?>
                <ul>
                <?php echo $children; ?>
                </ul>
            <?php } ?>

        </article><!-- end post-<?php the_ID(); ?> -->

        <?php comments_template( '', true ); ?>

    </div><!-- end content -->

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

Der Inhalt dieser Datei gleicht dem Standard-Template einer normalen Seite (vgl. page.php), erweitert diese jedoch um eine Liste der direkten Unterseiten. Um die Unterseiten innerhalb des article-Tag einzubinden, wurde der Inhalt der Datei content-page.php mit eingebunden (Zeilen 14-37). Dieser würde sonst durch den Aufruf von

<?php get_template_part( 'content', 'page' ); ?>

nachgeladen.

Wichtig: Diese Änderungen werden, wie das Original-Theme Yoko auch, unter der GNU General Public License veröffentlicht.

Anpassung des Inhalts

Das erstellte Yoko-Template „Subpage index“ muss dann nur noch als Template der betroffenen Seiten eingestellt werden. Im WordPress-Adminpanel öffnet man die Seite, welche eine Übersicht der Unterseiten zeigen soll, zum Bearbeiten und wählt nun auf der rechten Seite unter „Template“ die Option „Subpage index“.

Ergebnis: Yoko mit einer Unterseiten-Übersicht

Auf einer Seite ohne eigentlichen Inhalt sieht das Ganze dann folgendermaßen aus:

Das WordPress-Theme Yoko mit einer Unterseiten-Übersicht

Wer sich bei der Anpassung Arbeit sparen möchte, der kann sich die aktuellste Version des WordPress Theme Yoko auf GitHub forken.

Für Anregungen oder Tipps steht für euch wie immer die Kommentarfunktion bereit!

Karl Lorey (Einträge über Yoko)

Beim WordPress-Theme Yoko Unterseiten der aktuellen Seite auflisten

Yoko um eine Unterseiten-Übersicht erweitern

Anpassung des Theme im Yoko-Theme-Ordner

Anpassung des Inhalts

Ergebnis: Yoko mit einer Unterseiten-Übersicht