Comment lier automatiquement les images mises en avant aux articles dans WordPress

Les images mises en avant sont souvent la première chose que les gens remarquent sur un blog. Elles attirent l'attention, captivent les lecteurs et donnent le ton de votre article.

Mais dans certains thèmes WordPress, cliquer sur l'image mise en avant n'emmène les visiteurs nulle part. Au lieu d'ouvrir votre article, elle reste simplement là.

Cela peut sembler anodin, mais cela peut laisser les visiteurs perplexes et les rendre moins enclins à continuer la lecture. C'est un problème mineur mais sérieux.

Heureusement, il existe une solution simple. Je vais vous montrer comment rendre les images mises en avant cliquables dans WordPress afin que vos visiteurs bénéficient de l'expérience fluide qu'ils attendent.

Pourquoi lier les images mises en avant aux articles dans WordPress ?

La raison est simple. Les visiteurs s'attendent à ce que les images fonctionnent comme des liens. Lorsqu'ils voient une image mise en avant, ils souhaitent naturellement cliquer dessus pour ouvrir l'article complet.

Les images mises en avant sont généralement grandes, colorées et occupent plus d'espace, de sorte que les visiteurs ont tendance à les remarquer en premier. Elles permettent également aux gens de toucher plus facilement vos articles lorsqu'ils utilisent un téléphone ou une tablette.

Mais si vos images mises en avant ne sont pas cliquables, cela peut dérouter les visiteurs. 😕

Ils pourraient essayer de toucher l'image, s'attendant à ce qu'elle ouvre l'article, pour finalement réaliser que rien ne se passe. Cette petite frustration peut amener certains utilisateurs à quitter votre site plus rapidement, ce qui pourrait nuire à votre engagement.

Cela rend également votre site moins accessible. Les images plus grandes sont plus faciles à cliquer ou à toucher pour tout le monde, en particulier pour les personnes ayant des difficultés motrices ou celles qui utilisent des écrans plus petits.

Bien que de nombreux thèmes WordPress modernes lient l'image mise en avant à l'article, certains ne le font toujours pas. Si votre thème en fait partie, je vais vous montrer exactement comment y remédier.

Dans la section suivante, je vais vous apprendre comment lier automatiquement les images mises en avant aux articles dans WordPress. Et voici tout ce que je vais couvrir dans ce guide :

• Lier automatiquement les images mises en avant aux articles dans WordPress
• Astuce bonus : Optimisez vos images mises en avant pour la vitesse
• FAQ : Lier automatiquement les images mises en avant aux articles WordPress
• Plus de guides sur l'utilisation des images dans WordPress

Commençons.

Lier automatiquement les images mises en avant aux articles dans WordPress

Cette méthode nécessite d'ajouter du code à vos fichiers WordPress. Si vous ne l'avez jamais fait auparavant, consultez notre guide pour débutants sur le collage d'extraits du web dans WordPress.

Bien que vous puissiez ajouter le code au fichier functions.php de votre thème, je recommande d'utiliser un plugin d'extraits de code à la place. C'est beaucoup plus sûr, plus facile à gérer, et vos modifications ne seront pas perdues si vous mettez à jour ou changez de thème.

Notre meilleur choix est WPCode, le meilleur plugin de snippets de code pour WordPress. Il vous permet d'ajouter et de gérer du code personnalisé sans toucher aux fichiers de votre thème, vous ne risquez donc pas de casser votre site web.

De plus, il est approuvé par bon nombre de nos marques partenaires pour sa fiabilité et sa facilité d'utilisation. Vous pouvez en savoir plus dans notre avis complet sur WPCode.

Tout d'abord, vous devez installer et activer le plugin gratuit WPCode. Si vous avez besoin d'aide, suivez notre tutoriel sur comment installer un plugin WordPress pour des instructions étape par étape.

Une fois le plugin activé, vous pouvez naviguer vers Extraits de code » Ajouter nouveau dans votre zone d'administration WordPress.

Ensuite, vous verrez la page « Ajouter un extrait de code ».

Vous pouvez survoler l'option « Ajouter votre code personnalisé (Nouvel extrait de code) » et cliquer sur le bouton « + Ajouter un extrait personnalisé ».

Sur l'écran suivant, vous sélectionnerez le type de code pour votre extrait.

Ici, vous voudrez cliquer sur la case « Extrait de code PHP ».

Cela vous mènera à l'éditeur WPCode.

La première chose à faire ici est de donner un nom à votre extrait de code. Ceci est uniquement pour votre référence, donc cela peut être n'importe quoi qui vous aide à comprendre rapidement à quoi sert l'extrait.

Ensuite, collez l'un des deux extraits de code suivants dans la boîte « Aperçu du code ». Vous n'avez besoin d'en utiliser qu'un seul.

Le premier est une option simple qui rend l'image mise en avant cliquable partout, y compris sur les archives, la page d'accueil et les pages de publication unique :

function wpb_autolink_featured_images( $html, $post_id, $post_image_id ) {
$html = '<a href="' . get_permalink( $post_id ) . '" title="' . esc_attr( get_the_title( $post_id ) ) . '">' . $html . '</a>';
return $html;
}
add_filter( 'post_thumbnail_html', 'wpb_autolink_featured_images', 10, 3 );

La deuxième méthode fonctionne un peu différemment. Elle s'assure que l'image mise en avant n'est pas cliquable lorsqu'un visiteur est déjà sur cette page de publication spécifique, ce qui est mieux pour l'expérience utilisateur.

Ceci est utile si vous souhaitez uniquement lier les images mises en avant sur les vues non uniques, comme la page d'accueil, l'index du blog ou les pages de catégorie sur votre blog WordPress :

function wpb_autolink_featured_images( $html, $post_id, $post_image_id ) {

if (! is_singular()) { 

$html = '<a href="' . get_permalink( $post_id ) . '" title="' . esc_attr( get_the_title( $post_id ) ) . '">' . $html . '</a>';
return $html;

} else { 

return $html;

}

}
add_filter( 'post_thumbnail_html', 'wpb_autolink_featured_images', 10, 3 );

Je recommande le deuxième extrait pour une meilleure expérience utilisateur, mais l'un ou l'autre fera l'affaire ! 👍

Une fois que vous avez ajouté l'extrait, voici à quoi il pourrait ressembler dans votre éditeur WPCode :

Ensuite, faisons défiler la page jusqu'à la section « Insertion ».

Vous pouvez laisser la méthode sur « Insertion automatique », de sorte qu'elle insérera et exécutera automatiquement l'extrait de code à l'endroit approprié.

Enfin, basculez le commutateur de « Inactif » à « Actif ».

Ensuite, cliquez sur le bouton 'Enregistrer l'extrait'.

C'est tout. Vos images mises en avant seront désormais automatiquement liées à vos articles.

Astuce bonus : Optimisez vos images mises en avant pour la vitesse

Maintenant que vos images mises en avant sont cliquables, il est bon de s'assurer qu'elles se chargent rapidement. Des images volumineuses et non optimisées peuvent ralentir votre site, nuisant à l'expérience utilisateur et à votre référencement.

Avant de télécharger une image mise en avant sur WordPress, je recommande de redimensionner l'image pour qu'elle corresponde à la largeur du contenu de votre thème et de la compresser pour réduire la taille du fichier. Vous pouvez le faire facilement avec un outil de retouche d'image ou un plugin de compression d'images.

Il existe également d'autres techniques utiles.

Par exemple, vous pouvez activer le chargement différé, utiliser des formats d'image de nouvelle génération (comme WebP) et activer un CDN pour une livraison plus rapide sur différents lieux.

Pour en savoir plus, consultez notre guide complet sur comment optimiser les images pour les performances web.

FAQ : Lier automatiquement les images mises en avant aux articles WordPress

Maintenant, clarifions quelques préoccupations courantes concernant la liaison des images mises en avant dans WordPress.

Pourquoi mes images mises en avant ne sont-elles pas cliquables par défaut ?

Le fait que vos images mises en avant soient cliquables ou non dépend entièrement de votre thème WordPress. Certains thèmes modernes l'incluent par défaut, tandis que d'autres l'omettent.

Est-il sûr d'ajouter ce code au fichier functions.php de mon thème ?

Je comprends – modifier le fichier de thème peut sembler risqué. Et honnêtement, ça l'est un peu. Une petite faute de frappe dans le fichier functions.php pourrait vous bloquer l'accès à votre site web ou provoquer l'« écran blanc de la mort ».

C'est pourquoi je recommande d'utiliser un plugin comme WPCode. C'est une façon beaucoup plus sûre et plus conviviale pour les débutants d'ajouter du code à votre site.

L'ajout de cet extrait de code ralentira-t-il mon site web ?

Bonne nouvelle – non, ce n'est pas le cas. Le code utilise une fonctionnalité standard de WordPress qui le rend extrêmement léger et efficace. Vous ne remarquerez aucune différence en termes de vitesse ou de performance.

Plus de guides sur l'utilisation des images dans WordPress

J'espère que cet article vous a aidé à apprendre comment lier automatiquement les images mises en avant aux articles dans WordPress. Si vous avez trouvé ce guide utile, nous avons d'autres tutoriels qui peuvent vous aider à améliorer la façon dont vous utilisez les images sur votre site WordPress :

• Image de couverture vs Image mise en avant dans l'éditeur de blocs WordPress
• Comment définir une image à la une par défaut dans WordPress
• Comment ajouter des images mises en avant ou des miniatures d'articles dans WordPress
• Comment résoudre le problème de l'image mise en avant qui ne s'affiche pas dans WordPress
• Comment ajouter des légendes aux images mises en avant dans WordPress
• WebP vs PNG vs JPEG : Le meilleur format d’image pour WordPress
• Comment choisir le meilleur logiciel de conception Web
• Guide pour débutants sur les tailles d'images WordPress
• Beginner’s Guide to Image SEO

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.