{"id":2102,"date":"2012-02-27T08:57:44","date_gmt":"2012-02-27T07:57:44","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=2102"},"modified":"2015-01-18T16:12:07","modified_gmt":"2015-01-18T15:12:07","slug":"wordpress-transformer-code-caption-html5-figure-figcaption","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/wordpress\/wordpress-transformer-code-caption-html5-figure-figcaption","title":{"rendered":"WordPress – Transformer le code d’un [caption] pour obtenir du HTML5 avec figure et figcaption"},"content":{"rendered":"

WordPress propose dans ses outils de mise en page une mani\u00e8re d’afficher vos l\u00e9gendes directement sous votre image. Une bonne solution pour afficher un court descriptif de votre photographie.
\nDans le cadre d’un document en HTML5 (doctype par d\u00e9faut de WordPress depuis quelques versions maintenant) il peut \u00eatre int\u00e9ressant d’utiliser autre chose que des simples div<\/code> pour baliser le contenu.<\/p>\n

Justement, HTML5 pr\u00e9voit ce type de cas avec les \u00e9l\u00e9ments figure<\/code> et figcaption<\/code>. Je vous renvoie \u00e0 ce propos sur le tr\u00e8s bon article sur figure<\/code> et figcaption<\/code><\/a> de Okko sur Alsacr\u00e9ations.<\/p>\n

Nous allons donc simplement remplacer les div<\/code> par des \u00e9l\u00e9ments dont la s\u00e9mantique est plus ad\u00e9quate. Pour cela nous allons utiliser le hook img_caption_shortcode<\/code> qui permet d’agir sur un shortcode enregistr\u00e9 par d\u00e9faut dans WordPress. <\/p>\n

add_filter('img_caption_shortcode', 'juiz_img_caption_shortcode_html5_compliant',10,3);\r\n\r\n\/**\r\n * Filtre sur le shortcode  pour un code \"HTML5 Compliant\"\r\n * @return text HTML d\u00e9crivant un contenu de type image\r\n **\/\r\nif ( !function_exists('juiz_img_caption_shortcode_html5_compliant')) {\r\n\tfunction juiz_img_caption_shortcode_html5_compliant($val, $attr, $content = null)\r\n\t{\r\n\t\textract(shortcode_atts(array(\r\n\t\t\t'id'\t=> '',\r\n\t\t\t'align'\t=> '',\r\n\t\t\t'width'\t=> '',\r\n\t\t\t'caption' => ''\r\n\t\t), $attr));\r\n\r\n\t\tif ( empty ($caption) || 1 > (int)$width )\r\n\t\t\treturn $val;\r\n\r\n\t\t$capid = '';\r\n\t\tif ( $id ) {\r\n\t\t\t$id = esc_attr($id);\r\n\t\t\t$capid = 'id=\"figcaption_'. $id . '\" ';\r\n\t\t\t$id = 'id=\"' . $id . '\" aria-labelledby=\"figcaption_' . $id . '\" ';\r\n\t\t}\r\n\r\n\t\treturn '<figure ' . $id . 'class=\"wp-caption ' . esc_attr($align) . '\" style=\"width: '\r\n\t\t. (10 + (int) $width) . 'px\">' . do_shortcode( $content ) . '<figcaption ' . $capid \r\n\t\t. 'class=\"wp-caption-text\">' . $caption . '<\/figcaption><\/figure>';\r\n\t}\r\n} \/\/endif !function_exists<\/code><\/pre>\n
Nous avons globalement r\u00e9\u00e9crit le shortcode propos\u00e9 par WordPress.<\/p>\n
Ce shortcode, ins\u00e9r\u00e9 automatiquement par WordPress lorsque vous ajoutez une l\u00e9gende \u00e0 une photo, vous retournera d\u00e9sormais le code HTML5 suivant, avec un bout d’ARIA pour y gouter :<\/p>\n
<figure id=\"attachment-23\" aria-labelledby=\"figcaption_attachment-23\"\r\nclass=\"wp-caption alignright\" style=\"width: 210px\">\r\n\t<img src=\"url-de-mon-image.jpg\" alt=\"\" \/>\r\n\t<figcaption id=\"figcaption_attachment-23\" \r\n\tclass=\"wp-caption-text\">\r\n\t\tTexte de description de l'image\r\n\t<\/figcaption>\r\n<\/figure><\/code><\/pre>\n
D’ailleurs ce code est directement pr\u00e9sent\u00e9 dans le codex de WordPress<\/a> pour illustrer la fonction add_filter<\/code>.<\/p>\n
Il est peut-\u00eatre 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.<\/p>\n","protected":false},"excerpt":{"rendered":"
WordPress propose dans ses outils de mise en page une mani\u00e8re d’afficher vos l\u00e9gendes 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\u00e9faut de WordPress depuis quelques versions maintenant) il peut \u00eatre int\u00e9ressant<\/p>\n","protected":false},"author":4,"featured_media":2116,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bluesky_dont_syndicate":"","_bluesky_syndication_accounts":"","_bluesky_syndication_text":"","footnotes":""},"categories":[13],"tags":[442,228,434,16,256,444,446],"coauthors":[597],"class_list":["post-2102","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-add_filter","tag-astuce","tag-hook","tag-html5","tag-image","tag-legende","tag-shortcode"],"acf":[],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t