WordPressのメディアをfigure+figcaptionにする小粋な春の装い

画像につけられるキャプションというのはなかな味わい深く、つまらない写真でもクスリと笑わせることができてしまいます。boketeなんかはその極みといった感じでしょうか。

html5からfigure要素とfigcaption要素というのが追加され、まさにこの画像+キャプション芸のためのマークアップが爆誕しました。

WordPressでも画像を挿入した際にキャプションを入れることができるのですが、キャプション付きの画像を挿入した際のマークアップはdivになってしまいます。これはお洒落じゃないですねー。よくないです。

WordPressのキャプションはwp_captionというショートコードで実現されていますが、このショートコードは内部にフィルターを用いています。このため、さくっと乗っ取りが可能です。

/**
 * キャプションを上書き
 * @param string $markup 空文字が渡ってきます
 * @param array $attr ショートコード属性値
 * @param string $content imgタグやaタグ
 * @return string
 */
function _my_caption_shortcode($string, $attr, $content = null) {
     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) . '" ';

     return '<figure ' . $id . 'class="wp-caption ' . esc_attr($align) . '" style="width: ' . (10 + (int) $width) . 'px">'
     . do_shortcode( $content ) . '<figcaption class="wp-caption-text">' . $caption . '</figcaption></figure>';
}
add_filter('img_caption_shortcode', '_my_caption_shortcode', 10, 3);

最後のreturnのところはもともとの関数img_caption_shortcodeからパクった部分で、これをdivとpからfigureとfigcaptionに変えただけです。

これで皆さんのブログもちょっとお洒落なマークアップに変わりました。よかったですね。ただし、見映えはなにも変わりませんし、figureとfigcaptionだからといって特にどうこうなるわけでもありません。flipboardなんかはfigureとfigcaptionを積極的に見ていくらしいですが、divで包んでもぶっこ抜いていきますしね。

ePub 3とかはHTML5を採用しているので、たとえば教科書で「図１を参照」とか書いてあるページから画像が溢れちゃった場合にfigureでマークアップしてリンクしておけばすぐ見られるとか、そういう機能が実装されるかもしれません。

そんなわけで、やったところであまり変わりませんが、先生は、私の下着に薔薇の花の刺繍のあることさえ、知らないという感じでこっそりマークアップお洒落してみてください。