Comment ajouter des vignettes aux liens des articles précédents et suivants dans WordPress
Souhaitez-vous afficher des vignettes avec les liens des articles précédents et suivants dans WordPress ?
Au bas de chaque article, WordPress affiche des liens vers les articles précédents et suivants pour une navigation facile. L'ajout de vignettes à ces liens les rendra plus attrayants pour vos lecteurs.
Dans cet article, nous allons vous montrer comment utiliser les vignettes avec les liens des publications précédentes et suivantes dans WordPress.
Pourquoi afficher des vignettes avec les liens des articles précédents et suivants ?
Votre blog WordPress offre des fonctionnalités utiles pour aider vos visiteurs à trouver du nouveau contenu et à naviguer sur votre site.
Ces fonctionnalités incluent des menus de navigation, une barre de recherche et un widget d'archives de publications.
Une autre fonctionnalité de navigation utile se trouve au bas de chaque article de blog dans WordPress. Vous y trouverez des liens vers les articles de blog précédents et suivants de votre site.
Ces liens renforcent l'engagement des utilisateurs, car lorsque vos visiteurs auront fini de lire un article de blog, ils chercheront autre chose à lire. Cependant, les liens paraîtront plus interactifs si vous ajoutez des vignettes.
Cela étant dit, voyons comment ajouter des vignettes aux liens des publications précédentes et suivantes dans WordPress.
Utiliser des vignettes avec les liens des articles précédents et suivants dans WordPress
Pour ajouter des vignettes aux liens de vos publications précédentes et suivantes, vous devrez ajouter du code aux fichiers de votre thème WordPress. Si vous ne l’avez jamais fait auparavant, consultez notre guide sur la façon de copier et coller du code dans WordPress.
Ajout de code au fichier function.php de votre thème
La première étape consiste à ajouter l'extrait de code suivant à votre fichier function.php, dans un plugin spécifique au site ou en utilisant un plugin d'extraits 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;
}
Une fois que vous avez enregistré vos modifications, 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 vignettes.
Ajout de code au modèle single.php de votre thème
Ensuite, vous devez ouvrir le fichier single.php de votre thème. Ce fichier comprend déjà du code qui ajoute des liens vers les publications précédentes et suivantes sans vignettes. Vous devrez d'abord supprimer ce code.
Par exemple, voici une capture d’écran du fichier single.php du thème Twenty TwentyOne. Recherchez la section intitulée // Navigation dans les articles précédent/suivant.
Vous devez maintenant supprimer le code de cette section en commençant par the_post_navigation jusqu'à la fin de la boucle. Après cela, vous devez coller le code suivant à sa place :
wpb_posts_nav();
Assurez-vous de sauvegarder le fichier lorsque vous avez terminé.
Ajout de code CSS à la feuille de style de votre thème
Pour styliser les liens précédent et suivant, vous devrez ajouter du CSS personnalisé à la feuille de style de votre thème. Vous pouvez en savoir plus dans notre guide sur la façon d’ajouter facilement du CSS personnalisé à votre site WordPress.
Ajoutez ce code au fichier styles.css de votre thème ou en utilisant le personnalisateur de thème WordPress :
.wpb-posts-nav {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 50px;
align-items: center;
max-width: 1200px;
margin: 100px auto;
}
.wpb-posts-nav a {
display: grid;
grid-gap: 20px;
align-items: center;
}
.wpb-posts-nav h4,
.wpb-posts-nav strong {
margin: 0;
}
.wpb-posts-nav a svg {
display: inline-block;
margin: 0;
vertical-align: middle;
}
.wpb-posts-nav > div:nth-child(1) a {
grid-template-columns: 100px 1fr;
text-align: left;
}
.wpb-posts-nav > div:nth-child(2) a {
grid-template-columns: 1fr 100px;
text-align: right;
}
.wpb-posts-nav__thumbnail {
display: block;
margin: 0;
}
.wpb-posts-nav__thumbnail img {
border-radius: 10px;
}
N'oubliez pas de sauvegarder vos modifications.
Prévisualisation des liens précédent et suivant avec des miniatures
Désormais, lorsque vous consultez une publication sur votre site Web, vous verrez que les liens précédent et suivant au bas de la publication comportent désormais des vignettes.
Si l’une des publications liées n’a pas déjà d’image en vedette, vous ne verrez pas de miniature. Pour savoir comment ajouter des vignettes à une publication, consultez notre guide sur la façon d'ajouter des images en vedette ou de publier des vignettes dans WordPress.
Alternative : afficher les publications populaires avec des vignettes
Une autre façon d’engager vos lecteurs après avoir lu un article consiste à afficher une liste des articles populaires après chaque article. Cela donnera à vos lecteurs la possibilité de voir votre meilleur contenu, plutôt que simplement les articles précédents et suivants qui ont été publiés.
Vos publications populaires contiennent votre contenu le plus réussi. Les afficher à vos visiteurs renforcera la confiance, améliorera la preuve sociale et garantira que vos visiteurs restent plus longtemps sur votre site Web.
Lorsque vous consulterez la première méthode de notre guide sur la façon d’afficher les publications par vues dans WordPress, vous découvrirez à quel point il est facile d’ajouter des publications populaires à l’aide du plugin MonsterInsights.
Le widget de publications populaires de MonsterInsights propose une large gamme de thèmes attrayants ainsi que de nombreuses options de personnalisation.
Vous voudrez peut-être également consulter notre guide sur la façon d’ajouter des widgets personnalisés après la publication dans WordPress, où vous pourrez apprendre à ajouter différents types de contenu à la fin de chaque article de blog.
Nous espérons que ce didacticiel vous a aidé à apprendre à utiliser les vignettes avec les liens des publications précédentes et suivantes dans WordPress. Vous souhaiterez peut-être également apprendre à accélérer les performances de WordPress ou consulter notre liste des meilleurs plugins de réseaux sociaux pour WordPress.
Si vous avez aimé cet article, abonnez-vous à notre chaîne YouTube pour les didacticiels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.