Vous souhaitez afficher des miniatures avec les liens vers les publications précédentes et suivantes dans WordPress ?
Au bas de chaque publication, WordPress affiche des liens vers les publications précédentes et suivantes pour faciliter la navigation. L’ajout de miniatures à ces liens les rendra plus attrayants pour vos lecteurs.
Dans cet article, nous allons vous afficher comment utiliser les miniatures avec les liens des publications précédentes et suivantes dans WordPress.
Pourquoi afficher des miniatures avec les liens des publications précédentes et suivantes ?
Votre blog WordPress offre quelques fonctionnalités utiles pour aider vos internautes à trouver du nouveau contenu et à naviguer sur votre site.
Ces fonctionnalités comprennent des menus de navigation, une barre de recherche et un widget d’archivage des publications.
Une autre fonctionnalité de navigation utile se trouve avant chaque publication en avant d’un blog WordPress. Vous y trouverez des liens vers les publications précédentes et suivantes de votre site.
Ces liens renforcent l’engagement des utilisateurs/utilisatrices, car lorsque vos internautes auront fini de lire un article de blog, ils chercheront quelque chose d’autre à lire. Cependant, les liens seront plus interactifs si vous ajoutez des miniatures.
C’est également un bon moyen d’attirer l’attention sur vos publications de blog les plus performantes. Par exemple, vous pouvez avoir un contenu pilier qui génère déjà une tonne de trafic et convertit ces lecteurs en abonnés/abonnés e-mail. L’ajout de miniatures avec des liens vers les publications vous aiderait uniquement à développer votre liste d’e-mails et votre petite entreprise.
Ceci étant dit, voyons comment ajouter des miniatures aux liens de la publication précédente et de la publication suivante dans WordPress.
Utilisation de miniatures avec les liens des publications précédentes et suivantes dans WordPress
Pour ajouter des miniatures aux liens de vos publications précédentes et suivantes, vous devrez ajouter du code aux fichiers de votre thème WordPress. Si vous n’avez jamais fait cela auparavant, consultez notre guide sur la façon de copier et coller du code dans WordPress.
Ajout de code à l’aide de WPCode
La première étape consiste à ajouter l’extrait de code suivant à l’aide d’une extension telle que WPCode.
WPCode est la meilleure extension d’extraits de code qui vous permet d’ajouter du code sans casser votre site. Il est livré avec beaucoup de modèles prêts à l’emploi ainsi, de sorte que vous n’avez pas à écrire du code à partir de zéro.
Pour Premiers pas, vous devrez installer et activer l’extension WPCode. Pour plus de détails, consultez notre article sur l’installation d’une extension WordPress.
De là, allez à la page « + Extraits de code « . Cliquez ensuite sur « Ajouter une nouvelle ».
Vous accéderez à une bibliothèque d’extraits de code dans laquelle vous trouverez des tonnes de modèles prédéfinis.
Sous la rubrique » Ajouter votre code personnalisé « , cliquez sur » Utiliser un extrait « .
Donnez un nom à l’extrait de code afin de pouvoir vous y référer ultérieurement.
Copiez ensuite le code abonné dans l’éditeur de texte WPCode. Confirmez-vous que vous avez sélectionné « PHP Sélectionné » comme type de code.
function wpb_posts_nav(){
$next_post = get_next_post();
$prev_post = get_previous_post();
if ( $next_post || $prev_post ) : ?>
<div class="wpb-posts-nav">
<div>
<?php if ( ! empty( $prev_post ) ) : ?>
<a href="<?php echo get_permalink( $prev_post ); ?>">
<div>
<div class="wpb-posts-nav__thumbnail wpb-posts-nav__prev">
<?php echo get_the_post_thumbnail( $prev_post, [ 100, 100 ] ); ?>
</div>
</div>
<div>
<strong>
<svg viewBox="0 0 24 24" width="24" height="24"><path d="M13.775,18.707,8.482,13.414a2,2,0,0,1,0-2.828l5.293-5.293,1.414,1.414L9.9,12l5.293,5.293Z"/></svg>
<?php _e( 'Previous article', 'textdomain' ) ?>
</strong>
<h4><?php echo get_the_title( $prev_post ); ?></h4>
</div>
</a>
<?php endif; ?>
</div>
<div>
<?php if ( ! empty( $next_post ) ) : ?>
<a href="<?php echo get_permalink( $next_post ); ?>">
<div>
<strong>
<?php _e( 'Next article', 'textdomain' ) ?>
<svg viewBox="0 0 24 24" width="24" height="24"><path d="M10.811,18.707,9.4,17.293,14.689,12,9.4,6.707l1.415-1.414L16.1,10.586a2,2,0,0,1,0,2.828Z"/></svg>
</strong>
<h4><?php echo get_the_title( $next_post ); ?></h4>
</div>
<div>
<div class="wpb-posts-nav__thumbnail wpb-posts-nav__next">
<?php echo get_the_post_thumbnail( $next_post, [ 100, 100 ] ); ?>
</div>
</div>
</a>
<?php endif; ?>
</div>
</div> <!-- .wpb-posts-nav -->
<?php endif;
}
Ensuite, permutez le bouton de « Inactif » à « Actif ».
L’extrait de code prendra alors effet.
Il vous suffit ensuite de cliquer sur le bouton « Mettre à jour ».
Maintenant, nous devons retourner à la page « +Ajouter un extrait de code « .
À nouveau, sous l’option « Ajouter votre code personnalisé », vous sélectionnerez « Utiliser un extrait ».
Donnez un nom à l’extrait de code afin de pouvoir vous y référer ultérieurement.
Copiez ensuite le code abonné dans l’éditeur de texte WPCode. Confirmez-vous que vous avez sélectionné « PHP Sélectionné » comme type de code.
wpb_posts_nav();
Ce code indique à WordPress où afficher la navigation avec l’image mise en avant.
Ensuite, défilez vers le bas jusqu’à la section Insertion. Vous devez cliquer sur la liste déroulante située à côté d’Emplacement.
À partir de là, allez dans Page-Specific et choisissez Insert After Post (Insérer après la publication). Ainsi, les miniatures apparaîtront correctement à côté des liens.
Enfin, rendez l’extrait de code direct en permutant le bouton « Actif ».
Cliquez ensuite sur « Mise à jour ».
Une fois les modifications enregistrées, cette fonction peut être appelée à partir du Modèle dans lequel vous souhaitez afficher les liens des publications précédentes et suivantes avec des miniatures.
Désormais, lorsque vous consultez une publication sur votre site, vous verrez que les liens précédent et suivant au bas de la publication comportent désormais des miniatures.
Désormais, lorsque vous consultez une publication sur votre site, vous verrez que les liens précédent et suivant au bas de la publication comportent désormais des miniatures.
Note : Si l’une des publications en liens n’a pas encore d’image mise en avant, vous ne verrez pas de miniature.
Pour savoir comment ajouter des miniatures à un article, consultez notre guide sur l ‘ajout d’images fonctionnalité en avant ou de miniatures de publication dans WordPress.
Alternative : Affichage des publications les plus populaires avec des miniatures
Une autre façon d’impliquer vos lecteurs après qu’ils aient lu une publication est d’afficher une liste de publications populaires après chaque article. Cela donnera à vos lecteurs une chance de voir votre meilleur contenu plutôt que de se contenter des articles précédents et suivants qui ont été publiés.
Vos publications les plus populaires contiennent vos contenus les plus réussis. En les affichant à vos internautes, vous renforcez la confiance, améliorez la preuve sociale et faites en sorte que vos visiteurs restent plus longtemps sur votre site.
En consultant la première méthode de notre guide sur l ‘affichage des publications par vues dans WordPress, vous découvrirez à quel point il est facile d’ajouter des publications populaires à l’aide de l’extension MonsterInsights.
Le widget Popular Posts de MonsterInsights offre une large plage de thèmes attrayants et de nombreuses options de personnalisation.
Vous pouvez également consulter notre guide sur l ‘ajout de widgets personnalisés après la publication dans WordPress, où vous apprendrez à ajouter différents types de contenu à la fin de chaque publication de blog.
Nous espérons que ce tutoriel vous a aidé à apprendre comment utiliser les miniatures avec les liens de la publication précédente et suivante dans WordPress. Vous voudrez peut-être aussi apprendre comment accélérer les performances de WordPress ou consulter notre liste des meilleures extensions de réseaux sociaux pour WordPress.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Atesz says
Hello,
thnak you for this code. I would like to add the post navigation in the middle of my page as a block. So I tried to create a shortcode calling the wpb_posts_nav funtion:
add_shortcode( ‘custom-post-nav’, ‘wpb_posts_nav’ );
but if I use the shortcode [custom-post-nav] in the block editor, I cannot publish the post and I get the following: “Updating failed. The response is not a valid JSON response”
The post nav still appears but only If I paste the code at the end of the page and then they go to wrong place (to the top).
Do you know where is the problem?
Thank you in advance!
WPBeginner Support says
For your JSON response error, we would recommend going through our troubleshooting guide below!
https://www.wpbeginner.com/wp-tutorials/how-to-fix-the-invalid-json-error-in-wordpress-beginners-guide/
Administrateur
Sekh Sahajahan says
Hello sir have you any solution to remove the 3 line navigation bar from menu bar because it automatically added.
Markus Martin says
Hi Syed. Does this still work especally with the new version of wordpress?
patricia says
Hello! How would I do, if i want to use this for custom post type? thanks
MarykeVanRensburg says
I got it to work. It seems the } in this « <?php } ?> » was the problem. I removed it and it works. Now just to figure out how to only show next and previous in same category. Thanks
bowetech says
HOw would i set it up so that it will actually get the next post from its current category ?
Japh says
Nice and simple solution, I really like it. Great answer for your Facebook asker
Wordpress Themes Labs says
nice guide
MarykeVanRensburg says
Can you tell me how to only show previous and next in the same category? Thanks for this code. I’m going to try it.
wpbeginner says
@MarykeVanRensburg I think the TRUE variable there means in category browsing.
MarykeVanRensburg says
@wpbeginner I used the code, but it doesn’t work in an Artisteer created theme. The code in my theme is as follows:
‘next_link’ => theme_get_previous_post_link(‘« %link’), ‘prev_link’ => theme_get_next_post_link(‘%link »’),
and I need to change it to show a thumbnail and only a certain category. Thanks.
wpbeginner says
@MarykeVanRensburg AFter the link area just add ,true
our code above will do only category browsing. Unfortunately we do not provide support for specific frameworks.
Sugeng Santoso says
I love this.
Dragon Blogger says
Really cool, I do think using thumbnails with latest/next post may be overkill if you already use it with « related posts » there is limited real estate which is especially true for the growing trend of mobile browsing.
wpbeginner says
@Dragon Blogger That is only if you are assuming that the site has related posts. Some may not. We are using it on our List25 site which is relatively new site, so related articles is not very helpful at the time. That is why we are using single post navigation.
Dragon Blogger says
@wpbeginner @Dragon Blogger
Dragon Blogger says
@wpbeginner your are right and make a good point about newer sites without enough content to do images for related content.