WordPress propose dans ses outils de mise en page une manière d’afficher vos légendes directement sous votre image. Une bonne solution pour afficher un court descriptif de votre photographie.
Dans le cadre d’un document en HTML5 (doctype par défaut de WordPress depuis quelques versions maintenant) il peut être intéressant d’utiliser autre chose que des simples div pour baliser le contenu.
Justement, HTML5 prévoit ce type de cas avec les éléments figure et figcaption. Je vous renvoie à ce propos sur le très bon article sur figure et figcaption de Okko sur Alsacréations.
Nous allons donc simplement remplacer les div par des éléments dont la sémantique est plus adéquate. Pour cela nous allons utiliser le hook img_caption_shortcode qui permet d’agir sur un shortcode enregistré par défaut dans WordPress.
add_filter('img_caption_shortcode', 'juiz_img_caption_shortcode_html5_compliant',10,3);
/**
* Filtre sur le shortcode pour un code "HTML5 Compliant"
* @return text HTML décrivant un contenu de type image
**/
if ( !function_exists('juiz_img_caption_shortcode_html5_compliant')) {
function juiz_img_caption_shortcode_html5_compliant($val, $attr, $content = null)
{
extract(shortcode_atts(array(
'id' => '',
'align' => '',
'width' => '',
'caption' => ''
), $attr));
if ( empty ($caption) || 1 > (int)$width )
return $val;
$capid = '';
if ( $id ) {
$id = esc_attr($id);
$capid = 'id="figcaption_'. $id . '" ';
$id = 'id="' . $id . '" aria-labelledby="figcaption_' . $id . '" ';
}
return '<figure ' . $id . 'class="wp-caption ' . esc_attr($align) . '" style="width: '
. (10 + (int) $width) . 'px">' . do_shortcode( $content ) . '<figcaption ' . $capid
. 'class="wp-caption-text">' . $caption . '</figcaption></figure>';
}
} //endif !function_existsNous avons globalement réécrit le shortcode proposé par WordPress.
Ce shortcode, inséré automatiquement par WordPress lorsque vous ajoutez une légende à une photo, vous retournera désormais le code HTML5 suivant, avec un bout d’ARIA pour y gouter :
<figure id="attachment-23" aria-labelledby="figcaption_attachment-23"
class="wp-caption alignright" style="width: 210px">
<img src="url-de-mon-image.jpg" alt="" />
<figcaption id="figcaption_attachment-23"
class="wp-caption-text">
Texte de description de l'image
</figcaption>
</figure>D’ailleurs ce code est directement présenté dans le codex de WordPress pour illustrer la fonction add_filter.
Il est peut-être possible d’aller encore plus loin en utilisant les microformats. Je me penche sur la question et ne manquerai pas de vous tenir au jus.
Partager la publication "WordPress – Transformer le code d’un pour obtenir du HTML5 avec figure et figcaption"
Merci, en effet pourquoi s’en priver 😉
C’est bon ça et très utilise quand on a une structure HTML5 sur son site Internet.
/!\ Attention ligne 15, il y a un double empty.
Oh, bizarre, c’est une erreur JS ?
Elle n’apparaît pas dans l’interface d’admin… Oo
J’essaye de corriger ça au plus vite. Merci du signalement !
Finalement c’est corrigé, mais j’ai dû demander un formatage JS au lieu de PHP au niveau de la coloration syntaxique… si jamais ça vous arrive, suffit de lui mentir pour résoudre le problème 😉
Salut ! Avant tout, merci beaucoup pour ce code, qui est très utile.
J’aimerais réserver le même sort aux images qui n’ont pas de caption, et qui sont insérées quand même une à une dans le contenu. Comment faire ?
J’ai essayé de bidouiller une fonction en utilisant le filtre image_send_to_editor mais sans succès… Si jamais tu as une idée, ou une piste, d’avance merci 🙂
Bonsoir Marie,
J’allais te faire une réponse à rallonge, presque un mini tutoriel, quand je suis tombé sur celui de Grafikart :
http://www.grafikart.fr/tutoriels/wordpress/Shortcode-149
Il n’y a rien à jeter dans ce tutoriel et tout est d’actualité (en tout cas tout fonctionne d’après ce que j’ai vu).
En créant un shortcode et son bouton tu devrais pouvoir sélectionner une image, cliquer sur le bouton pour qu’elle ressorte entre tag ouvrant et tag fermant du shortcode.
Je te laisse suivre le tutoriel, si tu sèches j’ai des fichiers pour toi 😉
Au lieu du shortcode il y a également l’option de filtrer le contenu d’un article pour le passer dans une moulinette qui transformerait « img » en « figure>img » avant de l’afficher, mais je ne sais pas le quel serait le plus logique/performant/modulable.
Bonne soirée.
J’ai finalement opté pour l’option « moulinette PHP », en utilisant le code suivant : http://twitfat.com/iqcvf
Plus rapide à mettre en place, et modifie « une bonne fois pour toute » le contenu du billet avec les bonnes balises et les bons attributs, sans reposer sur un shortcode qu’il faudra « transférer » de thème en thème.
Néanmoins, j’ai bookmarké la vidéo car l’utilisation des shortcodes et leur mise en place dans l’éditeur de WordPress sont très bien expliquées.
Un grand merci pour ton aide !
Effectivement c’est une solution beaucoup plus courte 🙂
Le shortcode avait pour seul intérêt de pouvoir être adapté en cas de changement de thème. Le jour où « figure » n’est plus l’élément le plus adapté, le changement peut être un peu plus simple. (peut-être ?)
Merci pour le partage 😉
À bientôt.
Encore merci pour tes bons conseils, Geoffrey !
Après réflexion, j’ai opté pour la solution d’insérer automatiquement des shortcodes dans le contenu de mes billets, shortcodes que je « décode » ensuite via functions.php.
Cela fonctionne très bien et m’a permis de me creuser un peu la tête en PHP (qui n’est pas ma langue maternelle :-P).
Maintenant, comme on me l’a justement suggéré, il faut que je trouve un bon outil de cache pour que ça ne soit pas « décodé » à chaque fois…
Encore merci ! 🙂
Bonjour !
Je ne sais pas si ça pourra m’aider mais je cherche à faire apparaitre en hover la caption au hover sur ma galerie d’image. J’utilise le plugin « jQuery Masonry Image Gallery » qui se contente de mettre en page mes images. Hors j’aimerais qu’au passage de la souris, on est les infos de l’image (en l’occurrence des peintures).
Est-ce que ça va pouvoir m’aider, ou je ne suis pas du tout sur la bonne voie ? Merci !