キャプション – 林家次男

そろそろ WordPress 3.9 が来そうですね！

TinyMCE のメジャーバージョンが上がったり、その他細かく変わっている3.9、一応追えるだけ追ってます。

今回は WordPress 3.9 から実装される、キャプションとギャラリーの HTML5 対応について。

HTML5 対応とは

WordPress 3.6 から追加されました HTML5 対応。

3.6 から使えたのは、

コメントリスト
コメントフォーム
検索フォーム

の3つでした。

3.9 からは新たにここへ、ギャラリーとキャプションが追加されるというわけです。

キャプションの HTML5 対応での変化

キャプション、HTML5 でない通常の出力コードは

<div class="wp-caption" style="" id="attachment_xxx">
	<img height="xxx" width="xxx" src="http://example.com/img.jpg" alt="xxx" title="xxx" class="wp-image-xxx">

	<p class="wp-caption-text">
		キャプションのテキスト
	</p>
</div>

div で画像とキャプションのテキストを囲う出力です。

HTML5 に対応させると、

<figure class="wp-caption" style="" id="attachment_xxx">
	<img height="xxx" width="xxx" src="http://example.com/img.jpg" alt="xxx" title="xxx" class="wp-image-xxx">

	<figcaption class="wp-caption-text">
		キャプションのテキスト
	</figcaption>
</figure>

図表を示すタグである figure とその注釈を示す figcaption にそれぞれ置き換わり、正しい意味づけのマークアップへと変貌します。

ギャラリーの HTML5 対応での変化

ギャラリー、HTML5 でない通常の出力コードは

<div class="gallery ..." id="gallery-x" ...>
	<dl class="gallery-item">
		<dt class="gallery-icon landscape">
			<a href="http://example.com/img.jpg">
				<img height="150" width="150" ... />
			</a>
		</dt>
		<dd class="wp-caption-text gallery-caption">
			キャプションのテキスト
		</dd>
	</dl>
	<dl class="gallery-item">
		…
	</dl>
	<br style="clear: both">
</div>

出力は dl、定義リストでマークアップされています。

HTML5 に対応させると、

<div class="gallery ..." id="gallery-x" ...>
	<figure class="gallery-item">
		<div class="gallery-icon landscape">
			<a href="http://example.com/img.jpg">
				<img height="150" width="150" ... />
			</a>
		</div>
		<figcaption class="wp-caption-text gallery-caption">
			キャプションのテキスト
		</figcaption>
	</figure>
	<figure class="gallery-item">
		…
	</figure>
	<br style="clear: both">
</div>

キャプションの対応と似た感じ、画像を figure で括り、キャプションは figcaption でキャプションを示すように。

そして dt → div ですね。

HTML5 マークアップによって意味づけがなされたことを見てとれます。

キャプション・ギャラリーの HTML5適用方法

コードは簡単、add_theme_support のにて記述。

add_theme_support( 'html5', array( 'caption', 'gallery' ) );

すでに記述がある場合は、配列に caption と gallery を足してやればいいです。

適用できるもの全てを HTML5 にする場合はこう。

// キャプション、コメントフォーム、検索フォーム、コメントリスト、ギャラリーを html5 マークアップにしてくれる
add_theme_support( 'html5', array( 'caption', 'comment-list', 'comment-form', 'gallery', 'search-form' ) );

WordPress 3.8以下で足しておいても問題は起きないし何も変わらないので、今のうちに書いておくといいかも。

css の追加・変更が必要

HTML5 対応に伴い、スタイル指定を少し変えてやる必要があります。

Twenty Thirteen, Twenty Fourteen のギャラリー&キャプション HTML5 対応&修正コミットを参考にしてスタイル指定をちょっと変えてあげればいいです。

ﾎﾎまとめ

毎回のバージョンアップで機能が次々と追加されるので楽しいですね。

次は増えた関数で使えそうなのをまとめようと思います。

バージョンアップマニアとしてはしばらく愉快な日々が続きそう。

タグ: キャプション

WordPress 3.9 でキャプションとギャラリーが HTML5 に対応、テーマ作ってる人は要チェック。