Mettre en place une navigation page précédente / page suivante sous WordPress

Sous WordPress, il est possible de créer des menus pour un thème sur-mesure. Ces menus peuvent être composés de différentes choses. Pas que des pages, mais aussi des posts, des catégories ou des liens personnalisés. Il peut alors être utile d’indiquer au visiteur ou il se trouve par rapport au menu principal du site.

Ici on va afficher en bas de page l’entrée précédente ou suivante du menu principal par rapport à ce qui est consulté actuellement.

Attention, cette navigation ne se base pas sur les posts mais bien sur les éléments qui composent un des menus mis en place sur le site.

Voici le code qui permet d’y arriver :

$menu_items = wp_get_nav_menu_items('menu-principal');
    
    foreach($menu_items as $index=>$menu_item):

        if($menu_item->object_id == get_queried_object_id()){

            if(!empty($menu_items[$index-1])){
                $prev = $menu_items[$index-1];
            }

            if(!empty($menu_items[$index+1])){
                $next = $menu_items[$index+1];
            }

            if(!empty($prev)):
            ?>
            <a class="prev-link" href="<?= $prev->url ?>">
                <img src="<?= get_template_directory_uri() ?>/assets/img/icons/arrow_back-white-48dp.svg" alt="">
                <?= $prev->title ?>
            </a>
            <?php
            endif;

            if(!empty($prev) && !empty($next)):
                ?>
                <div class="slash">/</div>
                <?php
            endif;

            if(!empty($next)):
            ?>
            <a class="next-link" href="<?= $next->url ?>">
                <?= $next->title ?>
                <img src="<?= get_template_directory_uri() ?>/assets/img/icons/arrow_forward-white-48dp.svg" alt="">
            </a>
            <?php
            endif;
        }
        
     
    endforeach;

Maintenant, les explications :

La fonction wp_get_nav_menu_items permet de récupérer toutes les entrées d’un menu en particulier. Ces entrées peuvent être aussi bien des posts que des pages ou autre chose (tout ce qui est permi par la composition d’un menu sous WordPress). Elles seront ensuite stockées dans la variable $menu_items.

Il faut passer l’identifiant du menu désiré à wp_get_nav_menu_items comme ceci :

$menu_items = wp_get_nav_menu_items('menu-principal');

On va ensuite parcourir ces résultats avec un simple foreach.

Il nous faut ensuite savoir ce que nous sommes en train de consulter sur le site (une page, un post, autre chose), c’est là qu’intervient la fonction get_queried_object_id().

On passe donc en revue toutes les entrées du menu, une par une grace au foreach et on les compare à la valeur retournée par la fonction get_queried_object_id.

Si la valeur d’une entrée du menu est égale à l’identifiant de l’objet actuellement consulté alors ce qu’il y a dans la condition suivante s’execute :

if($menu_item->object_id == get_queried_object_id()){
    //code...
}

Dans cette condition on va chercher à savoir s’il existe une entrée précédente et une entrée suivante :

if(!empty($menu_items[$index-1])){
    $prev = $menu_items[$index-1];
}

if(!empty($menu_items[$index+1])){
    $next = $menu_items[$index+1];
}

Si $prev existe, on affichera un lien comme ceci :

if(!empty($prev)):
?>
<a class="prev-link" href="<?= $prev->url ?>">
    <img src="<?= get_template_directory_uri() ?>/assets/img/icons/arrow_back-white-48dp.svg" alt="">
    <?= $prev->title ?>
</a>
<?php
endif;
<?php

On fera pareil pour next en suivant la même structure.

Très bonne journée !