Le besoin
1.5 Insérer une image (<img>) avec légende:
- image et légende dans une balise <figure role = « group »>
- alt paramétrable
- si title présent, identique à alt
Résultat
- Si nécessaire, le champ texte alternatif doit être rempli par l’utilisateur
- Si le champ attribut title reste vide, l’attribut title n’est pas généré.
- Ajout de code dans functions.php du thème pour avoir la balise figure et le rôle=”group”.
Exemple d’une image informative avec légende

Sur le site la ville de Bayonne.
Méthode
RTE
- Dans l’éditeur : ajouter un média,
- Dans la bibliothèque : déposer ou sélectionner un fichier si l’image n’existe pas dans la bibliothèque
- Remplir le champ « Légende » avec : La place de Toros
- Remplir le champ « Texte alternatif » (<= 80 caractères) avec : La plaza de Toros, statue d’un taureau au centre, arènes de style néo mauresque.
- Insérer l’image dans l’article
- Si l’attribut title doit être rempli, modifier l’image et y coller le contenu du champ Texte alternatif, pour que l’attribut title soit identique à l’attribut alt.
Thème
Pour générer la balise <figure>, ajouter le code suivant dans le fichier « functions.php » du thème :
add_theme_support('html5', array('caption'));
Pour ajouter le role= « group », ajouter le code suivant dans le fichier « functions.php » du thème :
add_filter('img_caption_shortcode', 'my_img_caption_shortcode_filter',10,3); function my_img_caption_shortcode_filter($val, $attr, $content = null) { extract(shortcode_atts(array( 'id' => '', 'align' => '', 'width' => '', 'caption' => '' ), $attr)); if ( 1 > (int) $width || empty($caption) ) return $val; $capid = ''; if ( $id ) { $id = esc_attr($id); $capid = 'id="figcaption_'. $id . '" '; $id = 'id="' . $id . '" '; //aria-labelledby="figcaption_' . $id . '" ' } $resultat = '<figure role="group" ' . $id . 'class="wp-caption ' . esc_attr($align) .'">'; //$resultat .= 'style="width: '.((int) $width) . 'px">'; $resultat .= do_shortcode( $content ); $resultat .= '<figcaption ' . $capid . 'class="wp-caption-text"><span>' . $caption . '</span></figcaption>'; $resultat .= '</figure>'; return $resultat; }
Code généré
<figure id="attachment_60" class="wp-caption alignnone" role="group"> <img class="wp-image-60 size-full" width="230" height="154" alt="La plaza de Toros, statue d'un taureau au centre, arènes de style néo mauresque." src="http://gta21.accesbilis.fr/wp-content/uploads/2015/06/plaza-de-toros.jpg" /> <figcaption id="figcaption_attachment_60" class="wp-caption-text"> <span>La plaza de Toros</span> </figcaption> </figure>