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é.

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.