Créer une pagination avec les thumbnails

Créer une pagination avec les thumbnails dans wordpress

Aujourd’hui on va voir comment on peut styliser la navigation des articles en y ajoutant une image. Plutôt qu’une simple numérotation, ou une pagination classique avec seulement le titre, pourquoi ne pas afficher l’image à la une et le titre des articles suivants et précédents ?

Le code suivant est à insérer dans son fichier single.php ou content-single.php ou équivalent:

<?php
$prevPost = get_previous_post(true);

if ($prevPost) {

    $args = array(
        'posts_per_page' => 1,
        'include' => $prevPost->ID
    );

    $prevPost = get_posts($args);

    foreach ($prevPost as $post) {

        setup_postdata($post);
        ?>

                    <div class="post-previous">



                        <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('navprev'); ?></a>

                        <a class="previous" href="<?php the_permalink(); ?>">« <?php the_title(); ?></a>            



                    </div>

        <?php
        wp_reset_postdata();
    } //end foreach
} // end if



$nextPost = get_next_post(true);

if ($nextPost) {

    $args = array(
        'posts_per_page' => 1,
        'include' => $nextPost->ID
    );

    $nextPost = get_posts($args);

    foreach ($nextPost as $post) {

        setup_postdata($post);
        ?>

                    <div class="post-next">

                        <a class="next" href="<?php the_permalink(); ?>"><?php the_title(); ?> »</a>

                        <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('navprev'); ?></a>



                    </div>

                    <?php
                    wp_reset_postdata();
                } //end foreach
            } // end if
            ?>

        </div>

On place ce code à la fin de notre fichier après le while qui ferme notre boucle, et avant le else si jamais vous avez un affichage conditionnel de l’article.

Un peu de css pour styliser le tout:

#post-nav{max-width: 90%;
margin: auto;min-height: 6em;display:block;}
.post-previous{float:left;margin: 1em;
background-color: #fff;
padding: 1em;max-height: 75px;}
.post-next{float:right;margin: 1em;
background-color: #fff;
padding: 1em;max-height: 75px;}
.post-previous a,.post-next a {text-decoration:none;color:#555}

et voici un rendu possible sur un site, on voit au bas de l’écran deux petites images.

z

Le css ici n’est donné qu’à titre d’exemple, si jamais vous utilisez bootstrap, vous pouvez obtenir le même résultat rien qu’en utilisant les classes adéquates, ce qui allégera votre fichier de style.

<div class="row">
                    <div class="col-lg-12 col-xs-12">
              
<?php
$prevPost = get_previous_post(true);

if ($prevPost) {

    $args = array(
        'posts_per_page' => 1,
        'include' => $prevPost->ID
    );

    $prevPost = get_posts($args);

    foreach ($prevPost as $post) {

        setup_postdata($post);
        ?>

                    <div class="col-lg-6 col-xs-12 pull-left">

                        <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('navprev'); ?></a>

                        <a class="previous" href="<?php the_permalink(); ?>">« <?php the_title(); ?></a>            
                    </div>
        <?php
        wp_reset_postdata();
    } //end foreach
} // end if

$nextPost = get_next_post(true);
if ($nextPost) {
    $args = array(
        'posts_per_page' => 1,
        'include' => $nextPost->ID
    );

    $nextPost = get_posts($args);

    foreach ($nextPost as $post) {
        setup_postdata($post);
        ?>
                    <div class="col-lg-6 col-xs-12 pull-right">
                        <a class="next" href="<?php the_permalink(); ?>"><?php the_title(); ?> »</a>
                        <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('navprev'); ?></a>
                    </div>
                    <?php
                    wp_reset_postdata();
                } //end foreach
            } // end if
            ?>
        </div> 
                </div>

Mis à jour le Par Copier coller | Dans wordpress