Navigation zur vorherigen und nächsten Seite

Die einzelnen Seiten dieser Webseite wurden thematisch geordnet. Zum Beispiel gehört diese Seite zur Rubrik „Webdesign“, und es gibt mehrere Seiten mit Tricks und Kniffen zu diesem Thema. Die Idee ist nun, dem Leser zu erlauben, unkompliziert von einer dieser Seite zur nächsten oder zur vorherigen, oder auch zur Übersichtsseite oder ganz zurück zu Start zu blättern. Entsprechende Buttons wurden oben und unten auf jeder Seite angelegt.

Es gibt mehrere Wege, um eine solche Navigation zu realisieren. Es existieren durchaus diverse Plugins für diesen Zweck. Hier wurde jedoch ein direkterer Weg gewählt: Das Seiten-Template wurde entsprechend editiert (!Um dies selbst durchzuführen, sollten zumindest Grundkenntnisse der Programmiersprache PHP vorhanden sein! Und von CSS sowieso). Dazu zunächst etwas Grundsätzliches: Das Design einer WordPress-Webseite wird im Theme festgelegt. Das Theme ist eine Sammlung von Dateien. Auf wordpress.org stehen jede Menge kostenfreie und auch kostenpflichtige Themes zur Verfügung, welche man auf den eigenen Server herunterladen kann. Und dort nach Belieben editieren könnte, bis das Design so aussieht, wie man es gern hätte. Aber: Zu diesen Themes werden immer wieder Updates angeboten. Wenn man ein solches Update durchführt, werden ggf. die editierten Dateien überschrieben. Der saubere Weg, um dies zu vermeiden, ist das Verwenden eines Child Theme. In diesem müssen (neben einigen unbedingt erforderlichen Dateien)  nur die Dateien stehen, in welchen eine Änderung im Vergleich zum Parent Theme vorgenommen wurde (wenn die Datei im  Child Theme auftaucht, wird diese verwendet, sonst die des Parent Theme. Eine wichtige Ausnahme siehe unten). Ein Update des Parent Themes lässt die Dateien des Child Themes unbeeinflusst. Es gibt im Netz einige Anleitungen, wie man ein  Child Theme anlegt.

In diesem Child Theme soll nun das Standard-Template für die Startseite editiert werden. Dieses wird in der Datei page.php festgelegt. Es definiert, wie eine Standardseite der Webseite aufgebaut sein soll. Sofern sie dort noch nicht besteht, muss nun also die Seite page.php ins Child Theme kopiert werden (also ins Verzeichnis wp-content/themes/name des child themes/, oder dort ins Unterverzeichnis ./page-templates/). Anm.: Neben page.php kann es noch weitere Templates für Spezialseiten geben. Hier ist der Dateiname beliebig, die Datei muss aber eine Kommentarzeile enthalten, welche WordPress darüber informiert, dass es sich um ein Template handelt.  Siehe zum Beispiel hier. Die Editierung dieser Spezial-Template-Dateien funktioniert ansonsten genauso wie im Fall des Standard-Templates. 

PHP-Dateien lassen sich einfach mittels Text-Editor editieren. In der Datei  page.php werden nun ans Ende zwei Funktionen eingefügt (den Code dieser beiden Funktionen findet man am Ende dieser Seite). Und im Hauptteil der Datei  page.php müssen dann an der passenden Stelle die entsprechenden Funktionsaufrufe eingefügt werden, nämlich 

  • $prevnextArray=getPrevNext();  Die Funktion getPrevNext() ermittelt Namen und URL der vorherigen und nächsten Seite sowie der Übersichtsseite, und speichert diese Informationen in die Feld-Variable $prevnextArray. Dieser Aufruf muss deshalb irgendwo oben im Hauptteil vor dem erstmaligen Aufruf von outputPrevNext() erfolgen.
  • outputPrevNext($prevnextArray, x); Die Funktion outputPrevNext(): fügt die entsprechenden Buttons zur Webseite hinzu. Dieser Aufruf muss somit an der Stelle in die Datei  page.php eingefügt werden, an der die Buttons tatsächlich erscheinen sollen (ggf. auch mehrmals, z.B. wenn wie hier die Buttons sowohl am Beginn und am Ende der Seite eingefügt werden sollen. Das ist auch der Grund, warum hier überhaupt mit zwei Funktionen gearbeitet wurde). Die zuvor erstellte Feld-Variable $prevnextArray wird jetzt verwendet.  Anstelle von x müssen folgende Werte eingetragen werden:
    • 1 (oder ein anderer Wert > 0): Der Button mit dem Link zur Startseite wird über den übrigen Buttons eingefügt.
    • -1 (oder ein anderer Wert < 0): Der Button mit dem Link zur Startseite wird unter den übrigen Buttons eingefügt.
    • 0: Der Button mit dem Link zur Startseite  erscheint nicht.

Das ist allerdings noch längst nicht alles: Bis hierher wurde nur für die Funktionalität gesorgt. Die Buttons müssen zudem noch mit dem entsprechenden Design versehen werden. Das Design wird in der Datei style.css definiert. Dateien dieses Namens existieren sowohl im Parent Theme als auch im  Child Theme – und im Unterschied zu den oben beschriebenen Template-Dateien werden auch beide verwendet. Die Datei style.css des Child Theme  muss somit nur die Style-Definitionen enthalten, welche sich von denen des Parent Theme unterscheiden bzw. dort gar nicht vorkommen (falls ein Element in beiden Themes definiert wurde, wird die Definition des Child Theme  verwendet).

Die folgenden Style-Definitionen wurden verwendet (d.h. in die Datei style.css des Child Theme  geschrieben):

.prevnext-navigation {

/* Der komplette Navigationsbereich soll 100% der Seitenbreite einnehmen */
width: 100%;
padding-top: 1em;
padding-bottom: 1em;

}
.gotoParent {

/* Die Navigation zur Elternseite soll maximal 20% der Seitenbreite einnehmen. Sie wird als Tabelle dargestellt (s.u.)*/
display: table;
max-width: 20%;
margin: auto;
position: relative;
padding-bottom: 0.5em;
color: white;

}
.gotoPrevious {

/* Die Navigation zur vorherigen Seite soll links neben der Navigation zur Elternseite „floaten“. Im Unterschied zu anderen Design-Varianten (etwa der Darstellung des kompletten Navigationsbereichs als einzige Tabelle) hat dies den Vorteil, dass bei schmalen Bildschirmen (Smartphones!) das Design umgebrochen wird: Die Buttons zur vorherigen, zur nächsten und zur Elternseite werden automatisch übereinander angeordnet, wenn nebeneinander kein Platz mehr ist. Ansonsten Darstellung identisch zur Navigation zur Elternseite*/
display: table;
max-width: 20%;
float: left;
margin-left: 10%;
padding-bottom: 0.5em;
color: white;

}
.gotoNext {

/* Die Navigation zur nächsten Seite soll rechts neben der Navigation zur Elternseite „floaten“. Ansonsten siehe oben*/
display: table;
max-width: 20%;
float:  right;
margin-right: 10%;
padding-bottom: 0.5em;
color: white;

}
.clearer {

/* Der Clearer ist ein wichtiges Element, wenn man mit Float-Design arbeitet. Es ist die Zeile, welche nach den floatenden Elementen folgt (kann einfach eine Leerzeile sein). „Clear: both“ sorgt dafür dass diese Zeile unter den floatenden Elementen angeordnet wird. Lässt man den Clearer weg, kann es passieren, dass die floatenden Elemente unten abgeschnitten werden (wenn sie höher sind als das Element, neben welchem sie floaten) */
clear:both;

}

.tr {

/* Die Navigationen zur Elternseite, zur vorherigen und zur nächsten Seite wurden jeweils als Tabelle dargestellt (display: table). Diese Tabelle enthält nun genau eine Zeile, welche mit .tr definiert und eben als Tabellenzeile dargestellt wird*/
display: table-row;

}
.arrowTD {

/* Die Tabellenzeile enthält nun wiederum mehrere Tabellenzellen. Die als .arrowTD definierten Zellen enthalten die nach inks, rechts bzw. oben weisenden Pfeile*/
display: table-cell;
text-align: center;
vertical-align: middle;
font-size: 200%;
padding-right: 0.25em;
padding-left: 0.25em;

}
.buttonTD {

/*Die als .buttonTD definierten Tabellen-Zellen enthalten den Button-Text*/
display: table-cell;
text-align: center;
vertical-align: middle;
padding-right 0.5em;
padding-left: 0.5em;

}

Das war der CSS-Teil. Und hier nun noch die PHP-Funktionen (diese müssen in die Datei  page.php eingefügt werden, und zwar NACH dem PHP-Hauptprogramm, aber noch vor dem Ende des letzten PHP-Blocks, welcher mit „?>“ abgeschlossen wird.

Funktion zur Ermittlung von Namen und URL der vorherigen und nächsten Seite sowie der Übersichts- und der Startseite:

function getPrevNext(){

//Elternseite
global $post;
$parentID = $post->post_parent;

$pagelist = get_pages(’sort_column=menu_order&sort_order=asc&parent=‘.$parentID);
$pages = array();
foreach ($pagelist as $page) {
$pages[] += $page->ID;
}

$current = array_search(get_the_ID(), $pages);
$prevID = $pages[$current-1];
$nextID = $pages[$current+1];
//echo „Previous: „.$prevID.“ Current: „.$pages[$current].“ Next: „.$nextID;

//Navigation zur Startseite
$title=’Startseite‘;
$permalink=get_home_url();
$a='<a href=“‚.$permalink.'“ title=“‚.$title.'“>‘;
$array1 = array(„title“ => $title, „a“ => $a);
$array = array(„home“ => $array1);

//Navigation zur vorherigen Seite
if (!empty($prevID)) {
$title=get_the_title($prevID);
$permalink=get_permalink($prevID);
$a='<a href=“‚.$permalink.'“ title=“‚.$title.'“>‘;
$array1 = array(„title“ => $title, „a“ => $a);
$array[‚previous‘] = $array1;
}

//Navigation zur folgenden Seite
if (!empty($nextID)) {
$title=get_the_title($nextID);
$permalink=get_permalink($nextID);
$a='<a href=“‚.$permalink.'“ title=“‚.$title.'“>‘;
$array1 = array(„title“ => $title, „a“ => $a);
$array[’next‘] = $array1;
}

//Navigation zur Elternseite
if (!empty($parentID)) {
$title=get_the_title($parentID);
$permalink=get_permalink($parentID);
$a='<a href=“‚.$permalink.'“ title=“‚.$title.'“>‘;
$array1 = array(„title“ => $title, „a“ => $a);
$array[‚parent‘] = $array1;
}

return $array;

}

Funktion zur Darstellung der Buttons:

function outputPrevNext($array, $homePos=0){

//Beginn Navigationsbuttons
echo ‚<div class=“prevnext-navigation“>‘.“\n“;
// $homePos > 0: Navigation zur Startseite kommt zuerst
if ($homePos > 0) {

echo ‚ <div class=“gotoParent“>‘.“\n“;
//Tabellenzeile
echo ‚ <div class=“tr“>‘.“\n“;
//Tabellenzelle mit Doppelpfeil nach oben (mit Link unterlegt)
echo ‚ <div class=“arrowTD“>‘.$array[‚home‘][‚a‘].’&uArr;&uArr;</a></div>‘.“\n“;
//Tabellenzelle mit Textbutton (mit Link unterlegt)
echo ‚ <div class=“buttonTD“>‘.$array[‚home‘][‚a‘].$array[‚home‘][‚title‘].'</a></div>‘.“\n“;
//Tabellenzelle mit Doppelpfeil nach oben (mit Link unterlegt)
echo ‚ <div class=“arrowTD“>‘.$array[‚home‘][‚a‘].’&uArr;&uArr;</a></div>‘.“\n“;
echo ‚ </div>‘.“\n“;
echo ‚ </div>‘.“\n“;

}

//Navigation zur vorhergehenden Seite
if (array_key_exists(‚previous‘, $array)) {

echo ‚ <div class=“gotoPrevious“>‘.“\n“;
//Tabellenzeile
echo ‚ <div class=“tr“>‘.“\n“;
//Tabellenzelle mit Pfeil nach links (mit Link unterlegt)
echo ‚ <div class=“arrowTD“>‘.$array[‚previous‘][‚a‘].’&lArr;</a></div>‘.“\n“;
//Tabellenzelle mit Textbutton (mit Link unterlegt)
echo ‚ <div class=“buttonTD“>‘.$array[‚previous‘][‚a‘].$array[‚previous‘][‚title‘].'</a></div>‘.“\n“;
echo ‚ </div>‘.“\n“;
echo ‚ </div>‘.“\n“;

}

//Navigation zur folgenden Seite
if (array_key_exists(’next‘, $array)) {

echo ‚ <div class=“gotoNext“>‘.“\n“;
//Tabellenzeile
echo ‚ <div class=“tr“>‘.“\n“;
//Tabellenzelle mit Textbutton (mit Link unterlegt)
echo ‚ <div class=“buttonTD“>‘.$array[’next‘][‚a‘].$array[’next‘][‚title‘].'</a></div>‘.“\n“;
//Tabellenzelle mit Pfeil nach rechts (mit Link unterlegt)
echo ‚ <div class=“arrowTD“>‘.$array[’next‘][‚a‘].’&rArr;</a></div>‘.“\n“;
echo ‚ </div>‘.“\n“;
echo ‚ </div>‘.“\n“;

}

//Navigation zur Elternseite
if (array_key_exists(‚parent‘, $array)) {

echo ‚ <div class=“gotoParent“>‘.“\n“;
//Tabellenzeile
echo ‚ <div class=“tr“>‘.“\n“;
//Tabellenzelle mit Pfeil nach oben (mit Link unterlegt)
echo ‚ <div class=“arrowTD“>‘.$array[‚parent‘][‚a‘].’&uArr;</a></div>‘.“\n“;
//Tabellenzelle mit Textbutton (mit Link unterlegt)
echo ‚ <div class=“buttonTD“>‘.$array[‚parent‘][‚a‘].$array[‚parent‘][‚title‘].'</a></div>‘.“\n“;
//Tabellenzelle mit Pfeil nach oben (mit Link unterlegt)
echo ‚ <div class=“arrowTD“>‘.$array[‚parent‘][‚a‘].’&uArr;</a></div>‘.“\n“;
echo ‚ </div>‘.“\n“;
echo ‚ </div>‘.“\n“;

}

// $homePos < 0: Navigation zur Startseite kommt zuletzt
if ($homePos < 0) {

echo ‚ <div class=“gotoParent“>‘.“\n“;
//Tabellenzeile
echo ‚ <div class=“tr“>‘.“\n“;
//Tabellenzelle mit Doppelpfeil nach oben (mit Link unterlegt)
echo ‚ <div class=“arrowTD“>‘.$array[‚home‘][‚a‘].’&uArr;&uArr;</a></div>‘.“\n“;
//Tabellenzelle mit Textbutton (mit Link unterlegt)
echo ‚ <div class=“buttonTD“>‘.$array[‚home‘][‚a‘].$array[‚home‘][‚title‘].'</a></div>‘.“\n“;
//Tabellenzelle mit Doppelpfeil nach oben (mit Link unterlegt)
echo ‚ <div class=“arrowTD“>‘.$array[‚home‘][‚a‘].’&uArr;&uArr;</a></div>‘.“\n“;
echo ‚ </div>‘.“\n“;
echo ‚ </div>‘.“\n“;

}

//Zeilenumbruch.
//Diese Zeile, und die Klasse „clearer“, sorgen dafür, dass die Navigationen zur vorherigen und nächsten Seite
//(welche im CSS beide als Floats definiert werden sollen)
//vollständig dargestellt werden.
//Andernfalls kann es passieren, dass diese beiden Floats unten abgeschnitten werden,
//falls sie höher sein sollten als das Element, neben welchem sie floaten (hier: die Navigation zur Elternseite)
// Die Klasse „clearer“ muss dafür die CSS-Eigenschaft „clear: both“ bekommen
echo ‚<div class=“clearer“><br/></div>‘;

echo „</div>“;

}