WordPress: un shortcode [caption] HTML5

Suite de mon étude sur la conformité de WordPress à HTML 5. Cette fois, je vais aborder l’affichage des images, et l’utilisation du shortcode [ caption], avec pour objectifs, l’utilisation des balises <figure> et <figcaption>.

[ caption] n’est pas forcément le shortcode le plus connu, alors qu’il est l’un des plus utilisé. Il est en effet, la plupart du temps, inséré automatiquement par l’éditeur de texte, lorsque nous insérons une image. Si nous restons en mode visuel, nous ne le voyons jamais.

Par défaut, le code HTML généré par ce shortcode ressemble à cela:

1
2
3
4
5
6
<div id="attachment_xxx" class="wp-caption aligncenter" style="width: 310px">
    <a href="image.jpg">
        <img class="size-medium wp-image-xxx" height="80" width="300" alt="" src="thumbnail.jpg" title=" ..." />
    </a>
    <p class="wp-caption-text" > Texte / Légende</p>
</div>

Ce code est tout à fait correct (sauf  peut-être l’attribut style="width: 310px" ), mais nous souhaitons remplacer la base <div>, par <figure>, et <p>, par <figcaption>.

Balises <figure> et <figcaption>

Nous souhaitons donc obtenir quelque chose qui ressemble à cela:

1
2
3
4
5
6
<figure id="attachment_xxx" class="wp-caption aligncenter" style="width: 310px">
    <a href="image.jpg">
        <img class="size-medium wp-image-xxx" height="80" width="300" alt="" src="thumbnail.jpg" title=" ..." />
    </a>
    <figcaption class="wp-caption-text">Texte / Légende</figcaption>
</figure>

Pour cela, il faut«surcharger» le shortcode proposé par défaut par WordPress:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
add_filter('img_caption_shortcode', 'html5_img_caption_shortcode', 1, 3 );
function html5_img_caption_shortcode($string, $attr, $content = null) {
    extract(shortcode_atts(array(
        'id'    => '',
        'align' => 'alignnone',
        'width' => '',
        'caption' => ''
    ), $attr)
    );
    if ( 1 > (int) $width || empty($caption) )
        return $content;
 
    $width_style= ' style="width: ' . $width . 'px"';
    if ( $id ) $id = 'id="' . esc_attr($id) . '" ';
 
    return '<figure ' . $id . 'class="wp-caption ' . esc_attr($align) . '"' . $width_style . ' >' .
        do_shortcode( $content ) .
        '<figcaption class="wp-caption-text">' . $caption . '</figcaption>'.
        '</figure>';
}

Je suis parti du shortcode d’origine, qui se trouve dans le fichier wp-includes/media.php. Ce code peut être placé soit dans le fichier functions.php d’un thème, soit dans un plugin.

Conclusion

Comme je l’ai déjà précisé dans les articles précédents, obtenir un site conforme à HTML5 nécessite de travailler sur le thème, mais également sur le code généré par le moteur de blog. Heureusement, le mécanisme de shortcode, proposé par WordPress , nous permet de le faire relativement facilement. Dans un prochain article, je présenterai une méthode pour rendre les images, et le shortcode « responsive », avant d’aborder le shortcode Gallery.

1 thought on “WordPress: un shortcode [caption] HTML5”

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *