Tout savoir sur WordPress
Tutoriel WordPress

Lier automatiquement avec un lien la miniature d’un article

Cette astuce permet de modifier la sortie HTML de la fonction the_post_thumbnail() pour qu’elle retourne une image englober dans un lien hypertexte ramenant vers l’article.

En général, quand on met en place une liste d’articles avec une miniature (Image à la Une), on englobe cette image dans un lien hypertexte qui ramène à l’article. Cela permet d’inciter les visiteurs à cliquer sur l’image pour accéder à l’article. En effet, je pense que la plupart d’entre nous ont le réflexe de cliquer sur la miniature d’un article. Cela est plutôt logique puisqu’une image attire plus l’oeil qu’un texte.

Dans ce cas, il serait intéréssant de faire en sorte que la fonction the_post_thumbnail() retourne une image englobée par un lien menant vers l’article.

Pour cela, copier le code ci-dessous dans le fichier functions.php présent à la racine de votre thème :

[pastacode lang=”php” message=”” highlight=”” provider=”manual”]


add_filter('post_thumbnail_html', 'gkp_post_thumbnail_html', 10, 2 );
function gkp_post_thumbnail_html( $html, $post_id ) {
    $html = '<a href="' . get_permalink( $post_id ) . '">' . $html . '</a>';
    return $html;
}

[/pastacode]

A partir de maintenant, la fonction the_post_thumbnail() permet d’obtenir la miniature d’un article avec un lien hypertexte vers l’article en question.

Exemple d’utilisation dans une boucle WordPress :

[pastacode lang=”php” message=”” highlight=”” provider=”manual”]


<?php
while ( have_posts() ) : the_post(); ?>

  <h2><?php the_title(); ?></h2>
  <?php the_excerpt(); ?>
  <?php the_post_thumbnail(); ?>
<?php
endwhile;
?>

[/pastacode]

Cet article a été mis à jour il y a 4525 jours - Il n'est peut être plus à jour !

Article écrit par Jonathan B.

Jonathan est le co-fondateur de WP Media, startup connue pour être l’auteur de WP Rocket et Imagify. Il est aussi co-organisateur du WordCamp Lyon et Paris.

15 Commentaires

  1. Mais il faut appeler quelle fonction ? post_thumbnail comme d’habitude? Ce serait bien de mettre un exemple. De toute manière, ça arrive trop tard, mes thèmes sont déjà écrits. Mais peut-être pour le prochain…

  2. Merci :-) (et comme ça, qu’est-ce que tu utilises comme plugin pour afficher le code dans le billet ?) – rhaaa, cette newsletter cochée par défaut m’agace !

  3. Ah oui, c’est mieux comme ça – c’est hard de se retrouver avec une newsletter parce qu’on a posté trop vite.
    Et merci pour le plugin. Enfin un qui marche avec du HTML…

  4. @Li-an : C’est ça, il faut utiliser la fonction the_post_thumbnail().

    J’ai ajouté un exemple d’utilisation dans l’article :)

  5. Pas bête comme technique :)

    Par contre il faudrait savoir exactement quel est le code généré. Imagine que le code soit quelque chose comme :

    <a href="lien-de-mon-article/" rel="nofollow"><img src="url-de-mon-image.jpg" alt="nom-de-mon-image" /></a>
    

    C’est comme si tu écrivais un lien intitulé “nom-de-mon-image” pour un lecteur d’écran. Autant te dire que ce n’est pas très clair :/

    Du coup il faudrait plutôt utiliser la fonction ainsi :

    $attr = array (
       alt=> 'Lire la suite de l'article ' . get_the_title()
    );
    the_post_thumbnail('thumbnail',$attr);
    

    Ou quelque chose de proche.

    Tu vois ce que je veux dire ?
    (ou pourquoi pas l’insérer dans la fonction directement… si possible)

  6. @Geoffrey : A toi de faire ce que tu veux avec la fonction the_post_thumbnail() au niveau de la configuration des attributs de la balise .

    L’astuce consiste juste à ajouter un lien autour de la miniature.

  7. Bonjour,

    Enfin la réponse à ce que je cherchais (et j’ai parcouru des pages de recherche google…)!

    Cela dit, je suis totalement novice, enfin presque puisque je sais tout de même aller fouiller dans les thèmes et fichiers de wordpress, mais j’ai un souci avec le thème que j’utilise, Panoramica, puisque les 3 portfolios situés entre le menu de la page d’accueil et les billets ne sont désormais plus alignés horizontalement pour s’afficher sur une magnifique colonne. Pas vraiment ce que je souhaite !

    Vous auriez une idée sur le pourquoi ??

  8. @idoru: Pour ce genre de question, il faudrait plutôt demander à l’auteur du thème que vous utilisez ;)

  9. C’est aussi ce que je pensais faire ! En même temps comme j’utilise un thème gratuit, je ne suis pas persuadée qu’il ait envie d’entrer dans son code afin de me donner la solution, mais je vais tout de même tenter la chose…

    A tout hasard, connaitriez-vous un plug-in permettant d’afficher dans une lightbox (de préférence) toutes les images d’un dossier à partir de LA SEULE image présente dans un billet ou une page ?
    Je m’explique : peintre, je veux utiliser wordpress comme showroom. j’ai 3 axes de travail, dessins, aquarelles et acryliques avec pour ces 2 derniers pas loin d’une centaine d’images et je me vois mal faire 100 pages ou billets ou 2 pages/billets incorporant 100 images. L’idéal serait donc, à partir d’une seule vignette, de proposer une lightbox affichant les x images de chaque groupe.

    Cela fait quelques jours que je cherche ceci dans les pages relatives à wordpress et que j’essaie différentes lightbox. Sans succès !

  10. @idoru: Je vous conseille plutôt de poster votre question sur le forum de WordPress FR. Il y aura plus de chances d’obtenir une réponse au sujet d’un plugin ;)

  11. Bonjour.

    On pourrait rajouter un if ( !is_single() ) devant pour n’afficher le lien que sur les pages listant les articles, on n’a pas besoin du lien quand on est sur l’article en question.

  12. Bonjour,

    J’aimerai savoir comment adapter cette fonction pour qu’elle cible les articles d’une catégorie (tous les articles de la catégories Actualités).

    Merci.