fbpx

メニュー

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

高橋文樹 高橋文樹

この投稿は 11年半 前に公開されました。いまではもう無効になった内容を含んでいるかもしれないことをご了承ください。

画像につけられるキャプションというのはなかな味わい深く、つまらない写真でもクスリと笑わせることができてしまいます。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を採用しているので、たとえば教科書で「図1を参照」とか書いてあるページから画像が溢れちゃった場合にfigureでマークアップしてリンクしておけばすぐ見られるとか、そういう機能が実装されるかもしれません。

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

[429] [429] Client error: `POST https://webservices.amazon.co.jp/paapi5/getitems` resulted in a `429 Too Many Requests` response: {"__type":"com.amazon.paapi5#TooManyRequestsException","Errors":[{"Code":"TooManyRequests","Message":"The request was de (truncated...)

すべての投稿を見る

高橋文樹ニュースレター

高橋文樹が最近の活動報告、サイトでパブリックにできない情報などをお伝えするメーリングリストです。 滅多に送りませんので、ぜひご登録お願いいたします。 お得なダウンロードコンテンツなども計画中です。