In diesem Teil stelle ich verschiedene Möglich­keiten zu Darstellung von Naviga­tionen vor. Ich erstelle die Naviga­tionen in einer eigenen Datei namens navi.php. Diese Datei ist ein Tertiäres Template, welches im Unter­ordner template_parts liegt.

Seiten

Die einfachste Form der Navigation ist die Ausgabe der stati­schen 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>

Beitrags­na­vi­gation (Beitragsseiten/Blog "posts")

Um die Beitrags­seiten zu blättern, wenn nicht alle Beiträge auf einer Seite darge­stellt werden, benötigen wir eine Navigation. Diese wird durch Template tags reali­siert. Diese Navigation wird üblicher­weise 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 Seiten­ba­sierte Beitragsseitennavigation

<?php the_posts_pagination( array ('type' => 'list', 'prev_text' => 'Zurück', 'next_text' => 'Weiter')); ?>

Beitrags­na­vi­gation (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 reali­siert. Diese Navigation wird üblicher­weise unterhalb des Loops in der single.php ausge­geben. Der Aufbau ist identisch zum Blog, lediglich die Schreib­weise ist anders. post statt posts.

<?php previous_post_link();?>
<?php next_post_link();?>

üblicher­weise in der single.php einzu­bringen um Seiten innerhalb eines Beitrages anzuzeigen.

<div class="pagelink"><?php wp_link_pages('pagelink=Page %'); ?></div>

Naviga­ti­ons­be­reiche müssen in der functions.php regis­triert 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üpo­sition noch im entspre­chenden 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 einge­bunden werden. Dazu muss im <head> Bereich

<?php wp_enqueue_script('jquery');?>

eingefügt werden.

Anschließend laden wir folgendes Script. In diesem Testsze­nario 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>