HTML5完全対応のWordPressのテーマファイル「TwentyTen Five」

WordPress3.xのデフォルトのテーマファイル「Twenty Ten」をHTML5に完全対応させたテーマファイル「TwentyTen Five」を紹介します。

Use HTML5 in WordPress TwentyTen

[ad#ad-2]

「Twenty Ten」はWordPressの3.0からのデフォルトの新しいテーマファイルで、doctypeにHTML5が使用されています。しかし、HTML5の新しい要素や属性などは他の箇所には使用されていません。

「TwentyTen Five」は、この「Twenty Ten」をベースに適切な箇所にHTML5の要素や属性を使用したテーマファイルです。
見た目は「Twenty Ten」と同じシンプルなデザインです。

「TwentyTen Five」のキャプチャ

当サイトでの「TwentyTen Five」のプレビューです。

「TwentyTen Five」のキャプチャ

[ad#ad-2]

「TwentyTen Five」で具体的にどのようにHTML5にしているのかは、下記のページで解説がされています。

Using HTML5 To Transform WordPress' TwentyTen Theme

例：ホームページの記事

<div id="post-19">
…
</div>

記事を内包するdiv要素に対して、article要素を使用します。

<article id="post-19">
…
</article>

例：日付や時間

<a href="http://wp-themes.com/?p=19" title="4:33 am"
rel="bookmark"><span>October 17, 2008</span></a>

日付や時間のデータにHTML5を使って、コンテクストを与えることができます。

<a href="http://wp-themes.com/?p=19" title="4:33 am"
rel="bookmark"><time datetime="2008-10-17T04:33Z"
pubdate>October 17, 2008</time></a>

他にも、画像、フォーム、ヘッダ、フッタ、ナビゲーションなど個別にビフォー・アフターが掲載されているので、オリジナルのテーマファイルをHTML5にする際にも役立つ情報が満載です。