WordPressをHTML5で制作する用のテーマファイル -Toolbox

WordPressのテーマファイルをHTML5で制作する際、ベースとなるテーマファイルを紹介します。

Toolbox
プレビュー

[ad#ad-2]

テーマファイルには装飾となるデザインは一切施されておらず、HTML5の要素が配置されたものとなっています。

見出し・パラグラフのサンプル

リスト・テーブルのサンプル

フォームのサンプル

HTMLの構成もWordPress用にベーシックなものをHTML5でマークアップしたものとなっています。

HTML5

ヘッダ箇所の抜粋。

<header id="branding">
	<hgroup role="banner">
		<h1 id="site-title"><span><a href="http://wp-themes.com/" title="Theme Preview" rel="home">Theme Preview</a></span></h1>
		<h2 id="site-description">Previewing Another WordPress Blog</h2>
	</hgroup>

	<nav id="access" role="navigation">
		<h1 class="section-heading">Main menu</h1>
		<div class="skip-link screen-reader-text"><a href="#content" title="Skip to content">Skip to content</a></div>

		<div class="menu"><ul><li class="current_page_item"><a href="http://wp-themes.com/" title="Home">Home</a></li><li class="page_item page-item-2"><a href="http://wp-themes.com/?page_id=2" title="About">About</a></li><li class="page_item page-item-46"><a href="http://wp-themes.com/?page_id=46" title="Parent Page">Parent Page</a><ul class='children'><li class="page_item page-item-49"><a href="http://wp-themes.com/?page_id=49" title="Sub-page">Sub-page</a></li></ul></li></ul></div>
	</nav><!-- #access -->
</header><!-- #branding -->