Beim WordPress-Theme Yoko Unterseiten der aktuellen Seite auflisten

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
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 &rarr;', '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:

Yoko mit einer Unterseiten-Übersicht
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 Verfasst von:

Karl Lorey studiert Informatik im Master am KIT in Karlsruhe. Er interessiert sich für Webentwicklung und damit verbundene Technologien. Seine Bachelorarbeit mit dem Titel “Gamification Framework for Subjective Assessment of Influence in Online Social Networks” beschäftigt sich mit der Einschätzung von Einfluss und weiteren Eigenschaften in sozialen Netzwerken durch ein von ihm erstelltes “gamifiziertes” Framework.

5 Kommentare

  1. Günter
    August 15
    Antworten

    Man könnte natürlich auch im CSS die für das nicht aufklappen bzw. nicht angezeigten Unterpunkte die Einträge von display: none wieder auf display: block ändern.
    So tat ich es in einem Child-Theme – und das funktioniert dann auch sehr gut.

    • Günter
      August 15
      Antworten

      /* --- Smartphones and small Tablet PCs --- */
      @media screen and (max-width : 620px) {

      #branding #mainnav ul li a {
      display: block;
      font-size: 0.7em;
      margin: 0;
      padding: 10px 7px;
      }

      #branding #mainnav ul ul a {
      display: block !important; margin: 0;
      }

      nav#subnav ul.menu li.menu-item {
      width: 100%;
      margin:0;
      float: none;
      overflow: hidden;
      background-color: #FFF;
      border-bottom: 1px solid #ddd;
      text-align: center;
      }
      nav#subnav ul.menu li.menu-item a {
      width: 100%;
      margin: 0;
      padding: 12px 0 11px;
      float: left;
      display: block;
      background-color: #FFF;
      }
      nav#subnav ul.menu li.menu-item a:hover, nav#subnav ul.menu li.menu-item a:active, nav#subnav ul.menu li.menu-item a:focus {color: #000 !important;
      background: #fef349;
      text-decoration: none;
      }

      nav#subnav ul.menu li.menu-item ul.sub-menu li.menu-item {
      display: block;
      }

      ________

      so klappt das Hauptmenu oben wieder auf, und die Unterpunkte im Sub Menu werden auch bei kleinen Screens wieder angezeigt.

      • August 25
        Antworten

        Vielen Dank für die Idee und den Code. Ich werde es testen und eventuell in den Artikel übernehmen :)

  2. Stef
    Januar 6
    Antworten

    Günther, das hat bestens geklappt. Danke!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.