現在、このサイトを HTML5 で再構築しようと画策しています。今日はその「準備編」ということで、WordPress で HTML5 をパブリッシュするために、どのようにテンプレートをいじればよいかを考えてみました。ここでは WordPress 2.9 のデフォルトのテーマ、WordPress Default 1.6 に手を加えていきます。

文書型宣言

header.php の 7 行目 (実際に出力されるのは 1 行目) あたりで以下のように文書型が宣言されています:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

これを以下のように修正します:

<!DOCTYPE html>

HTML5 の文書型宣言では大文字か小文字かは問われませんので、<!DOCTYPE HTML> でも <!doctype html> でもでもかまいません。

文字コード宣言

header.php の 11 行目あたりに以下の記述があります:

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

これをこのように書き替えます:

<meta charset="<?php bloginfo('charset'); ?>" />

<?php bloginfo('charset'); ?> の部分は WordPress の設定画面で指定した文字コードが出力されます。たとえば <meta charset="UTF-8" /> など。

JavaScript

IE が HTML5 の新しい要素タイプを認識でないという問題を解決するため、header.phphead 要素内で、CSS より先に html5shiv スクリプトを以下のようにインクルードします。

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

CSS

sectionnav といった HTML5 の新しい要素タイプのうち、ブロックボックスとしてレンダリングしたいものについて CSS で明示します。これは header.phphead 要素内に style 要素として書いてもいいし、style.css などの CSS ファイルに書いてもいいです。

section, nav, article, aside, hgroup, header, footer, figure, figcaption {
  display: block;
}

まとめ

header.php のおもな変更点をまとめるとこんな感じです:

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="<?php bloginfo('charset'); ?>" />
<title> . . . <title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
section, nav, article, aside, hgroup, header, footer, figure, figcaption {
  display: block;
}
</style>
. . .
</head>
. . .

これで、WordPress で HTML5 を書くための最低限の準備は整いました。あとは肝心の body 要素内のコンテンツのマークアップですが、それはまた次回。