Ajouter une miniature à un article sur WordPress via un custom field

Dans la même lignée que l’article « Afficher les articles relatifs sous forme de miniature« , je vous propose aujourd’hui d’utiliser un champ personnalisé pour afficher une miniature de l’article. Le tout sans plugin en 5 minutes chrono !

Création du champ personnalisé

Ouvrez le fichier index.php via l’administration WordPress – passez par l’onglet Apparence puis Editeur . Recherchez la ligne correspondante au titre de l’article. Elle se présente sous cette forme à quelques détails près :

<h1><a href="<?php the_permalink() ?>" title="<?php  the_title(); ?>"><?php the_title() ?></a></h1>

Positionnez votre curseur juste au dessus de cette ligne et copiez collez le code suivant :

<img src="<?php $key="Image"; echo get_post_meta($post->ID,  $key, true); ?>" alt="<?php the_title(); ?>" />

Ce code est tout simplement celui d’une image, à la différence près que la source de l’image correspond à la valeur que nous indiquerons dans le champ personnalisé de l’article en question par la suite.

Création du champ personnalisé

Ouvrez l’article de votre choix puis cliquez sur Saisissez-en un nouveau dans le module Champ personnalisé. Entrez comme Nom, Image puis comme Valeur, l’URL de votre champ personnalisé. Validez en cliquant sur Ajouter un champ personnalisé.

Capture décran - Ajout dun champ personnalisé à un article
Capture d’écran – Ajout d’un champ personnalisé à un article

Design de la miniature

Pour styliser votre miniature, il vous faudra encadrer votre code d’une balise DIV comme ceci :

<div id="introIMG"><img src="<?php $key="Image"; echo  get_post_meta($post->ID, $key, true); ?>" alt="<?php  the_title(); ?>" /></div>

Puis créer les différents styles dans la feuille de style en cascade (CSS) de cette manière :

#introIMG {
float:left;
margin:6px 20px 0 0;
overflow:hidden;
min-height:110px;
}

#introIMG img {
border:none;
padding:4px;
width:80px;
height:80px;
margin-top:40px;
}

Si vous souhaitez offrir la possibilité au visiteur de pouvoir accéder à l’article en cliquant dessus, il suffit d’encadrer la balise IMG d’une balise a :

<div id="introIMG"><a href="<?php the_permalink()  ?>"><img src="<?php $key="Image"; echo  get_post_meta($post->ID, $key, true); ?>" alt="<?php  the_title(); ?>" /></a></div>

Un moyen simple de rendre vos articles plus attrayants ! Enfin, sachez que cette miniature peut également être affichée dans les archives, les articles… par simple insertion du code dans les fichiers PHP adéquat.

17 commentaires

  1. Atahualpa : affichez vos extraits d’articles avec miniatures | Job Alternative

    […] solution toute simple est celle donné par le site Protuts. Nous allons opter pour plus de souplesse en adoptant le plugin Get The Image qui permet d’afficher […]

  2. Aurélien Denis

    @thierry : oui, mais c’est toujours mieux de se passer d’un plugin d’autant plus qu’une fois le tout configuré – ce qui prendre guère plus de 10 minutes, il suffit d’indiquer le lien vers la miniature et le tour est joué !

    Après, ce qu’il y a de bien avec WordPress, c’est que l’on a toujours la méthode « plugins » et la méthode « manuelle ». Chacun ses goûts donc !

  3. CedricADW

    L’astuce marche super bien, bon tuto ! Par contre, y aurait-il un moyen pour appliquer le « Champ personnalisé » à tous ses articles en quelques clics ??
    En fait, je viens de changer de thème et je dois me remettre toutes les vignettes dans mes articles !
    Quand je vois que j’en ai 400, ça me fait un peu mal au cul de devoir le faire !!!!

    P.S : dernière petite chose, quand on copie le code dans les encadré de ton article et qu’on le colle dans notre fichier, il ajoute automatiquement les numéros de lignes, c’est chiant de devoir les effacés !

    Mais merci;)

  4. Benjamin Denis

    @CedricADW: normalement, si le nom du champ personnalisé est le même que celui de ton ancien thème, les miniatures devraient s’afficher, car les champs personnalisés se gardent dans la base de donnée.

    Quand aux bouts de code, je suis de ton avis, moi aussi ça me fait chier mais j’ai remarqué que ça le faisait pas dans tous les navigateurs comme, par exemple, IE (pour une fois qu’il fait quelque chose de bien celui là).

    On va essayer de voir ce qu’on peut faire…

    Voilà voilà

  5. CedricADW

    @Rainbow : En fait, j’ai jamais mis le champ personnalisé sur mon ancien thème, tant pis, je vais prendre quelques heures pour le rajouter !

    Pour les bouts de code, te tracasse pas, c’était juste une petite remarque au passage

    A+

    1. Aurélien Denis auteur de l’article

      Oui, la dernière image a été supprimée car nous avons changé de système sur Protuts.net.

      J’en ai également profité pour remettre en place les lignes de code qui étaient fausses.

      Merci !

  6. div image

    Boujours à tous pourriez vous me dire ou je dois placer ce code à quel endroit de l’index.php

    Pour styliser votre miniature, il vous faudra encadrer votre code d’une balise DIV comme ceci :

    ID, $key, true); ?> » alt= » » />

    Merci par avance
    Cordialement DTinfo

  7. Simon

    Salut tout le monde.

    Je suis bloqué avec le systeme « featured image » pour mes thumbnails.
    Côté back office tout est nickel mais côté front pas de miniature !?

    Est ce que quelqu’un a déjà eu ce problème sous la 3.0.3 ?

    Thks !)

Laisser un commentaire

Thèmes & Plugins
Premium By WP Channel

WP Alacarte propose des produits et services de qualité
made in France pour la plateforme WordPress.

Tout est prêt pour créer votre site à la carte !

  • Thèmes et extensions premium
  • Facilité d’utilisation garantie
  • Temps de chargement optimisé
  • Personnalisation avancée
Découvrir

Rejoignez la communauté WordPress !

Faites partie de l’aventure en devenant membre d’une association WordPress. Conférences, ateliers, BarCamp, WordCamp… Venez
partager votre passion pour WordPress !

Aurélien DENIS,
président des associations WordPress Francophone et WPMX