In diesem Teil stelle ich verschiedene Möglichkeiten zu Darstellung von Navigationen vor. Ich erstelle die Navigationen in einer eigenen Datei namens navi.php. Diese Datei ist ein Tertiäres Template, welches im Unterordner template_parts liegt.
Seiten
Die einfachste Form der Navigation ist die Ausgabe der statischen Seiten.
<nav>
<ul>
<?php
$args = array( //öffnet ein array mit dem Bezeichner $args
title_li => '' //Belegt den Listen Titel mit einem leeren String
);
wp_list_pages($args); //gibt die Liste aller Seiten mit den Argumenten aus dem Array aus
?>
</ul>
</nav>
Beitragsnavigation (Beitragsseiten/Blog "posts")
Um die Beitragsseiten zu blättern, wenn nicht alle Beiträge auf einer Seite dargestellt werden, benötigen wir eine Navigation. Diese wird durch Template tags realisiert. Diese Navigation wird üblicherweise unterhalb des Loops in der index.php ausgegeben.
<?php previous_posts_link('Vorherige Seite',max_num_pages);?> <!--Link zum vorigen Beitrag-->
<?php next_posts_link('Nächste Seite',max_num_pages);?> <!--Link zum nächsten Beitrag-->
Oder eine Seitenbasierte Beitragsseitennavigation
<?php the_posts_pagination( array ('type' => 'list', 'prev_text' => 'Zurück', 'next_text' => 'Weiter')); ?>
Beitragsnavigation (Innerhalb des Beitrages "post")
Um innerhalb eines Beitrags zum vorigen oder nächsten Beitrag navigieren zu können, kann ebenfalls eine Navigation eingebaut werden. Diese wird ebenfalls durch Template tags realisiert. Diese Navigation wird üblicherweise unterhalb des Loops in der single.php ausgegeben. Der Aufbau ist identisch zum Blog, lediglich die Schreibweise ist anders. post statt posts.
<?php previous_post_link();?>
<?php next_post_link();?>
Navigation für Seiten innerhalb eines Beitrages
üblicherweise in der single.php einzubringen um Seiten innerhalb eines Beitrages anzuzeigen.
<div class="pagelink"><?php wp_link_pages('pagelink=Page %'); ?></div>
Navigations Menüs
Navigationsbereiche müssen in der functions.php registriert werden.
<!--Navigation-->
<?php
add_action( 'after_setup_theme', 'ms_register_navigation_nav' ); //Name kann frei gewählt werden
function ms_register_navigation_nav() { //Muss hier der Selbe sein
register_nav_menu( 'nav_main','Haupt Navigation' ) ); //Name im Backend
register_nav_menu( 'nav_social','Haupt Navigation' ) ); //mehrere Menüs können in einer Funktion erstellt werden.
}
?>
Anschließend kann das Menü im Backend gepflegt werden, dann muss die Menüposition noch im entsprechenden Template notiert werden.
<?php
$args = array(
'theme_location' => 'nav_main' //Navigationsregister
'depth' => '2' //Maximale Tiefe der Unterpunkte
'container' => '' //Überflüssigen Container löschen.
);
wp_nav_menu($args);
?>
Toggle Navigation mit jQuery
Zunächst muss JQuery in das Template eingebunden werden. Dazu muss im <head> Bereich
<?php wp_enqueue_script('jquery');?>
eingefügt werden.
Anschließend laden wir folgendes Script. In diesem Testszenario unterhalb des Footers.
<script>
jQuery(document).ready(function() {
jQuery('html').addClass('js'); //fügt die Klasse js zum <html> tag hinzu.
var navToggle = ['<div id="toggle-nav">Menu</div>'].join(""); //Variable navToggle wird erstellt. Div mit id "toggle-nav" wird vor dem header eingefügt.
jQuery(".site-header").prepend(navToggle)
});
jQuery(function() {
var pull = jQuery('#toggle-nav'); //erstellt die Variable zum auf- zuklappen der Navigation
menu = jQuery('.site-nav'); //legt fest welche Navigation gekappt werden soll
menuHeight = menu.height();
jQuery(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
jQuery(window).resize(function(){
var w = jQuery(window).width();
if(w > 710 && menu.js(':hidden')) { //Stile zum ausblenden der Navigation werden ab 710px wieder entfernt.
menu.removeAttr('style');
}
});
});
</script>