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>
        

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.