現在、このサイトを 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.php の head 要素内で、CSS より先に html5shiv スクリプトを以下のようにインクルードします。
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
CSS
section や nav といった HTML5 の新しい要素タイプのうち、ブロックボックスとしてレンダリングしたいものについて CSS で明示します。これは header.php の head 要素内に 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 要素内のコンテンツのマークアップですが、それはまた次回。