Images à la une avec WordPress

By 13 octobre 2011WordPress

Petit rappel sur les images à la une dans WordPress

Les images à la une sont un moyen d’attacher une image à un post, une page ou custom_type. Ca permet par exemple d’afficher une vignette propre à chaque article dans une page où on liste les articles. Si les images à la une n’apparaissent pas dans l’admin de votre site, ajoutez cette ligne dans votre fichier functions.php

add_theme_support( 'post-thumbnails' );

Si vous ne précisez rien, les images à la une seront disponibles pour les posts et les pages. Vous pouvez aussi les activer uniquement pour les posts

add_theme_support( 'post-thumbnails', array( 'post' ) ); // Ajouter les images à la une sur les articles uniquement

Afficher une image à la une

Pour afficher votre image à la une, c’est très simple :

the_post_thumbnail(); // affiche la miniature par défaut

Par défaut, une image uploadée dans WordPress a 4 tailles. Pour afficher votre image à la une, passez une chaîne à la fonction the_post_thumbnail(), exemple

the_post_thumbnail('large');

Les valeurs possibles sont thumbnail, medium, large, full. Il peut être prudent de tester l’existence d’une image à la une avant de tenter de l’afficher…

if ( has_post_thumbnail() ) { // dans la boucle the_post_thumbnail(); }

Ne récupérer que l’url d’une image à la une

WordPress a prévu une fonction pour afficher l’image à la une et une pour récupérer le tag html complet sans l’afficher get_the_post_thumbnail(). Que faire si on ne veut récupérer que l’attribut src de l’image pour utiliser dans les css par exemple ?

$imageData = wp_get_attachment_image_src(get_post_thumbnail_id ( $post_ID ), 'medium');
echo $imageData[0]; // attribut src de l'image à la une

Note : Le tableau retourné contient 3 éléments, url, largeur, hauteur. Pour aller plus loin, rien ne vaut le Codex

41 commentaires

  • Michael dit :

    Merci pour ce petit morceau de code que je viens de trouver directement en recherchant pour un client sur google (3 premiers liens sur le moteur de recherche) comment ajout « l’image à la une » d’une page x.
    Je pensais tomber sur le manuel de wordpress en premier et non.
    Modification apporté pour le client, qui travaille dans le secteur de la peinture & décoration, en 10 mins.
    Vive le SEO.

  • juliette dit :

    bonjour, je rencontre un problème sur mon site en test. Lorsque j’insère une image dans une page, l’image se met automatiquement à la une, et du coup l’image à la une prend la place du header…
    J’ai insérer le bout de code pour que l’image à) la une ne soit active que sur les articles, mais rien y fait…
    Auriez-vous une piste?

    Merci pour vos réponses.

    • artcompix dit :

      Bonsoir Juliette,

      Je vois pas trop d’où peut venir le problème… L’image qui se met automatiquement à la une, je pense qu’il y a problème dans le fichier php.
      Pourrais-tu poster le code stp ?

      A+

  • Gorn dit :

    Un grand merci à toi ! C’est exactement ce que je cherchais et ça m’a bien servi pour l’un de mes sites.

  • Cyril dit :

    Bonjour, dans quel fichier du template doit on integré ce morceau de code ?

    • artcompix dit :

      Bonjour Cyril,

      De quel morceau de code parles-tu ?
      Le premier va dans functions.php comme indiqué. Les autres vont dans la page php qui contient the_loop, fonction centrale de Worpdress qui parcourt les articles dispos en fonction de la page affichée.
      Dis-moi si ça te paraît clair 😉

  • bicou dit :

    Bonjour,
    Merci pour ces infos.
    Comment peut-on extraire le texte alternatif d’une image ?
    Merci

  • conilas dit :

    Bonjour,

    Je souhaiterai pouvoir afficher une image à la une dans la page d’accueil de mon site (plus précisement dans le descriptif des derniers articles parus qui comporte un read more) mais pas dans l’article proprement dit, est ce techniquement possible ?

    merci

  • Vincent dit :

    Très intéressant. Par contre, comment on peut ajouter le lien vers l’article sur l’image ?
    Merci

  • Sebastien dit :

    Super, merci beaucoup, voila un site qui ma aider beaucoup. !!!!

  • Jessica dit :

    Bonsoir,
    J’ai un problème avec une « image à la une ».
    Mon thème me permet de sélectionner un header différent pour chaque page du site via l’ « image à la une ».
    Cette fonctionnalité fonctionne pour toutes les pages, sauf pour la page « blog », celle qui affiche les articles. Je ne comprends pas pourquoi… Lorsque je ne lui attribue pas l’affichage des articles, la page « blog » affiche bien l' »image à la une » sélectionnée en header.

    Avez-vous une idée?
    Merci.

    • artcompix dit :

      Bonjour Jessica,

      Savez-vous quelle page de votre thème affiche votre liste d’articles ? Habituellement c’est index.php ou home.php et je ne vois pas comment vous auriez pu attribuer une « image à la une » à ces pages qui n’apparaissent pas dans le back-office. Quel thème utilisez-vous ?

      Dites-moi

  • Vick dit :

    Bonjour,
    je débute complètement avec WordPress.
    Je voudrais simplement créer un blog avec différents articles, chaque article ayant une image que je voudrais visible à la une.
    J’ai utilisé GK Portfolio comme thème. Il me semblait qu’il faisait ce que je voulais automatiquement mais .. en fait naaaan ! ^^

    J’ai regardé ce que vous proposiez ici et sur d’autres forums mais je ne comprend pas où placer les différentes lignes que vous donnez ..

    Merci d’avance !! 😀
    Vick

    • artcompix dit :

      Bonjour,

      Si votre thème ne propose pas automatiquement cette option, alors il faut utiliser mon tutotiel 😉 Les différents fichiers à modifier sont donnés. Ils se trouvent tous dans le dossier de votre thème :

      1. functions.php pour déclarer l’utilisation des Images à la une
      2. le fichier de votre thème qui affiche les images à la une (ça peut être index.php…)

      A+

      • Vick dit :

        Bonjour !
        Merci pour ta réponse ! Entre temps, j’ai réussi ! ^^
        mais un autre problème est apparu … (ils n’arrivent jamais seuls .. )
        L’image à la une s’affiche nickel pour tous les articles ce qui est parfait 🙂 mais le souci, c’est que je voudrais supprimer l’image à la une dans l’article lui même … En cherchant un peu, j’ai trouvé qu’il fallait que je supprime « the_post_thumbnail(); » à un endroit mais je n’ai pas vraiment trouvé où …

        • artcompix dit :

          Bonjour,

          Alors, il faut forcément chercher dans le dossier de ton thème 😉 Moi j’utilise TextWrangler (je suis sur Mac) pour rechercher la fonction dans tous les fichiers de mon thème. En général, c’est le fichier single.php dans ton dossier de thèmes. Essaye 😉

          Bonne chance

  • Isabelle dit :

    Bonjour,

    je cherche à centrer mon image à la une, est ce possible ? Elle apparait sur la gauche et ça m’embête.

    • artcompix dit :

      Bonjour Isabelle
      Je ne peux pas tester présentement mais je dirai qu’il faut centrer l’image dans son élément parent… A essayer avec un margin:0 auto; dans le parent. Ici on centre uniquement sur l’axe horizontal bien sûr.
      Cordialement
      Artcompix

  • Marie dit :

    Bonjour.

    Je suis en train de reprendre un site qui m’a été confié (pour une association) et afin de le rendre plus dynamique, j’ai mis en place un slider sur la page d’accueil.
    Dans ce slider apparaissent les 3 derniers articles d’une catégorie. Tout fonctionne correctement, je suis contente.

    Afin que le slider soit attractif, il utilise l’ « image à la une » de chaque article. On ne peut pas utiliser les images insérées dans l’article. Jusque là, je veux bien.

    Là où c’est embêtant, c’est que je ne veux pas que cette « image à la une » apparaisse au début de chacun de mes articles, ce n’est pas beau et cela vient en doublon avec les images insérées dans l’article.

    Par conséquent, je souhaite « cacher » les images à la une dans mes articles mais qu’elles soient bien présentes de manière non visible afin que le slider les utilise.

    J’ai beau regarder toutes les choses que vous avez expliquées, je ne m’en sors pas du tout, je n’arrive pas à masquer les images à la une.

    Pouvez-vous m’aider ?

    Cordialement.

    • artcompix dit :

      Bonsoir
      Le fait que l’image à la une s’affiche en début de vos articles tient au gabarit utilisé par votre thème. Donc, il faut trouver le nom du fichier php qui affiche vos articles et supprimer la fonction the_post_thumbnail();
      Dites-moi si vous y arrivez
      Cordialement
      Artcompix

      • Marie dit :

        Bonjour.

        Mon thème est un enfant de Themify Base.
        Si je supprime toute la ligne concernant the_post_thumbnail les vignettes en début d’articles ne sont pas masquées.

        Cordialement.

        • artcompix dit :

          Bonsoir
          Alors ce n’est pas le bon fichier que vous avez touché 😉 Êtes-vous sûre que c’est le bon fichier qui s’affiche ? Faites un echo(‘test’); qq part pour vérifier

          • Marie dit :

            Bonjour.

            Pouvez-vous m’expliquer comment fonctionne ce test et où dois-je le faire SVP ?

            Cordialement.

          • artcompix dit :

            Il faut que le test soit à l’intérieur de balises php et à l’intérieur de la balise body pour être visible dans la page. Par exemple
            < ?php echo 'TEST'; ?>
            Dans votre page après wp_header();
            Dites-moi

  • Charlotte dit :

    Bonjour,

    Savez-vous s’il est possible de supprimer l’Image à la Une de l’article sur les pages lorsque notre site est hébergé sur WordPress ?

    Effectivement, nous devons créer un blog pour un projet scolaire, entièrement gratuitement (budget étudiant oblige), mais l’image qui se met en haut à gauche me dérange vraiment beaucoup..

    Si vous avez des conseils, ou si c’est tout simplement impossible, n’hésitez pas à me répondre!

    Merci d’avance 🙂

    • artcompix dit :

      Bonjour Charlotte,
      Je ne suis pas sûr mais ça m’étonnerait… Essayez d’aller voir dans les options du thème pour le personnaliser (Apparence > Personnaliser).
      En tous cas, bon courage pour votre projet.

  • Ollilie dit :

    Bonjour,

    Je souhaite ajouter une image a la une a mes article sur mon blog wordpress. Impossible de trouver le fichier functions.php.
    Je n’ai pas crée le thème de mon blog moi même, c’était un tout fait de WordPress.
    Merci pour votre aide !

  • Ollilie dit :

    Bonjour,

    Je viens de créer mon second blog wordpress, mais impossible de trouver le fichier functions.php pour insérer une image a la une à mes articles.
    J’ai pris un thème déjà existant, est-ce l’explication ?
    Merci beaucoup pour votre aide !

    Aurélie

    • artcompix dit :

      Bonjour,
      Réponse un peu tardive je l’avoue mais je n’ai pas reçu les notifiactions… Si tu ne trouves pas le fichier functions.php, alors il faut le créer et le mettre dans le dossier de ton thème.

  • Bridilou dit :

    Bonjour,

    Je suis un peu perdu.

    Avant la mise à jour par mon hebergeur, j’avais la possibilité d’intégrer une image à chaque création d’article (dans le pavé « image à la une »).

    Aujourd’hui, je ne l’ai plus.

    Je sais qu’il faut que j’aille dans le fichier functions.php mais où se trouve-t-il ?

    Merci d’avance.

  • Sophie H dit :

    Bonjour,

    Débutante avec WordPress j’aimerais savoir s’il est possible de conserver l’image à la une uniquement dans l’article et de définir une autre image pour la miniature qui s’affiche dans la page Home. Peut-être un pluging ?

    Merci d’avance

  • Baptiste dit :

    Bonjour.

    On a un gros problème. Je bidouille parfois l’éditeur sans être un spécialiste, mais je sais récupérer mes erreurs.

    J’ai simplement ajouté votre ligne

    dans mon fichier functions.php, comme vous le proposez. Depuis plus moyen d’accéder à mon site, au wp-admin, rien. Tout est planté. Mon site était terminé, la dernière erreur venait de l’image à la une… Là, je désespère.

    • Baptiste dit :

      J’ai donc maintenant une erreur 500 lors de tentative d’accès au site. Ca ne sent vraiment pas bon. Si j’étais vous, je modifierai cet article pour que plus personne ne se retrouve dans cette situation. Et je vous en prie, aidez-moi 🙂

Laisser un commentaire