Les articles de votre blog ici ? Inscrivez votre blog !

Caption & Image WordPress

Publié le 28 décembre 2010 par Seomix @rochdaniel

L'outil d'ajout d'images dans WordPress est vraiment bien conçu.

Il vous permet notamment de modifier le nom du média, sa balise Alt et d'y ajouter une description pour vous même dans l'administration. On peut également y ajouter une légende pour vos visiteurs.

Sauf que celle-ci est gérée par ce qu'on appelle le Caption Image, et que son affichage correct dépend énormément du thème WordPress que vous utilisez.

Dans cet article :
  • »
  • »
  • »
  • »
  • »

Qu'est ce que le caption image ?

Le caption image n'est rien d'autre que la légende que l'on affiche ou non sous une contenu multimédia sur WordPress, ce qui inclut aussi la mise en page autour de ce contenu. Par exemple sur SeoMix :

Un exemple de mise en page du caption de WordPress

Cette légende à deux avantages :

  • Donner une explication supplémentaire de votre contenu à vos visiteurs
  • Améliorer la compréhension de ces images par les moteurs de recherches

Styler le caption image

Le problème de cette fonctionnalité, c'est qu'elle dépend à 100% du thème que vous utilisez. Si celui-ci est bien conçu, aucun problème. Dans l'autre cas, vos images et vos textes ne seront pas bien centrés, et il n'y aura de démarcation suffisante pour séparer visuellement votre légende du reste de votre contenu texte.

Voici l'affichage par défaut d'une image (ici avec un alignement à gauche):

Affichage par défaut d'une image sous WordPress

Et voici maintenant différentes solutions pour mieux intégrer ce type de médias.

L'affichage CSS des images WordPress

Alignement des images

Commençons par le commencement. Le fichier style.css vous permet de modifier l'affichage de votre site. Nous allons donc l'utiliser pour améliorer le rendu de vos images. Trouvez le fichier CSS de votre thème WordPress, et ajoutez-y les lignes de code données ci-dessous.

Alignement des images

Tout d'abord, il faut réussi à intégrer votre média dans le reste de votre contenu :

.alignleft{float:left}
.alignright{float:right}
.aligncenter{display:block;margin:0 auto;text-align:center}

Notre image est désormais centrée correctement. Pour améliorer le rendu, ajoutez-y des marges pour aérer l'espace autour de l'image.

.alignleft{float:left;margin-right:15px}
.alignright{float:right;margin-left:15px}
.aligncenter{display:block;margin:0 auto;text-align:center}

Ce qui nous donne :

Une image correctement alignée

Des images qui se démarquent

Nous allons maintenant donner un couleur différente autour de nos images, pour leur donner plus de profondeur et pour permettre à la légende de se démarquer. Cela passe par un style appliqué au caption de WordPress.

Attention, il faut dans ce cas utiliser le premier bloc d'alignement CSS donné lors du point précédent.

/*On style le bloc image*/
.wp-caption {
 border:1px solid #999;
 padding:10px;
 background:#eee}
/*Ajout d'espace pour aérer autour de l'image*/
 .alignleft{margin-right:10px}
 .alignright{margin-left:10px}
/*On centre l'image.*/
 .wp-caption img {margin:0;padding:0;border:0 none}
/*Alignement, taille et couleur de la légende*/
.wp-caption p,.wp-caption-text {
 font-family:verdana;
 text-align:center;
 font-size:1em;
 line-height:1.6em;
 font-weight:bold;
 color:#555;
 padding:0;margin:0}

Ce qui donne permet donc d'encadrer toutes les images de WordPress (du moins celles avec une légende):

Une image stylée avec le caption de WordPress

Si vous partez du thème de base TwentyTen, vous aurez un problème de compatibilité. Il faudra dans ce cas ajouter cette ligne pour supprimer une marge trop importante sous votre légende.

#content .wp-caption p {margin:0}

Des caption images en CSS3

Pour ceux qui veulent aller plus loin, on peut ajouter quelques effets CSS3, comme des arrondis ou des ombrages :

/*Ajout des arrondis sur le caption*/
.wp-caption {
    -moz-border-radius:6px;
    -khtml-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px}
/*Ajout d'une ombre sous le caption*/
.wp-caption{
    -moz-box-shadow:0 3px 4px rgba(0,0,0,.5);
    -webkit-box-shadow:0 3px 4px rgba(0,0,0,.5);
    box-shadow:0 3px 4px rgba(0,0,0,.5)}

Voilà le rendu final de votre image :

Un peu de CSS3 pour vos images WordPress

On peut bien entendu aller beaucoup plus loin avec les CSS. Il suffit de laisser libre cours à votre imagination et de suivre l'un des nombreux tutoriels que l'on peut trouver sur Internet. Le code final utilisé est donc

.alignleft{float:left}
.alignright{float:right}
.aligncenter{display:block;margin:0 auto;text-align:center}
/*On style le bloc image*/
.wp-caption {
border:1px solid #999;
padding:10px;
background:#eee}
/*Ajout d'espace pour aérer autour de l'image*/
.alignleft{margin-right:10px}
.alignright{margin-left:10px}
/*On centre l'image.*/
.wp-caption img {margin:0;padding:0;border:0 none}
/*Alignement, taille et couleur de la légende*/
.wp-caption p,.wp-caption-text {
font-family:verdana;
text-align:center;
font-size:1em;
line-height:1.6em;
font-weight:bold;
color:#555;
padding:0;margin:0}
/*Ajout des arrondis sur le caption*/
.wp-caption {
-moz-border-radius:6px;
-khtml-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px}
/*Ajout d'une ombre sous le caption*/
.wp-caption{
-moz-box-shadow:0 3px 4px rgba(0,0,0,.5);
-webkit-box-shadow:0 3px 4px rgba(0,0,0,.5);
box-shadow:0 3px 4px rgba(0,0,0,.5)}

L'affichage HTML des images WordPress

Le souci des CSS, c'est qu'ils dépendent du rendu HTML du caption. Autrement dit, impossible d'ajouter des contenus ou d'en supprimer. Pour cela, il faudrait modifier l'affichage html.

Là aussi, c'est un jeu d'enfant. Copiez ce code dans le fichier functions.php de votre thème WordPress. Ce hack affiche le caption par défaut. Mais il est alors possible de le modifier et de le personnaliser en fonction de vos besoins.

add_filter( 'img_caption_shortcode', 'captionhtml', 10, 3 );
function captionhtml($current_html,$attr,$content) {
     extract(shortcode_atts(array('id'   => '','align' => 'alignnone','width' => '','caption' => ''),$attr));
     if ( 1 > (int) $width || empty($caption) )return $content;
     if ( $id ) $id = 'id="'  esc_attr($id)  '" ';
     // On ouvre le caption
       $out ='<div '$id'class="wp-caption 'esc_attr($align)'" style="width:'(10 + (int) $width)'px">';
     // L'image
       $out .= do_shortcode($content);
     // La légende
       $out .= '<p>Essai : '$caption'</p>';
     // On ferme le caption
       $out .= '</div>';
 return $out;}

Il faut aussi savoir que les informations du caption sont utilisées aussi pour les pages d'images (le fichier attachment.php de votre thème). Sur SeoMix, ce n'est pas le cas puisqu'un clic sur un contenu média va l'ouvrir avec un effet lightbox. Sur certains blogs WordPress, cela va ouvrir une nouvelle page contenant uniquement l'image.

  • La légende correspond alors à l'excert (le résumé)
  • La description correspond à the_content (le contenu)
  • Le titre de l'image à the_title (le titre de la page)

Désactiver la légende des images

On peut bien entendu désactiver la légende (et donc la mise en page qui va avec) lorsque l'on rédige des articles. Pour cela, copiez également ce dans le fichier functions.php de votre thème WordPress.

function caption_off() {return true;}
add_filter( 'disable_captions', 'caption_off' );

Quand vous ajouterez une image dans l'administration, vous verrez toujours le champ "Légende". Mais une fois insérée et affichée dans votre blog, celle-ci disparaîtra.

Ce dernier code vient de l'excellent site anglais WpRecipes : Disable image caption in wordpress post editor