WordPress自作テーマのベースに使うためのHTMLテンプレートを作りました

Update 2013/10/30 Web制作メモ > WordPress

WordPressテーマをリニューアルした際、ベースとして使うためのごくシンプルなHTMLのテンプレートを作成してみました。そのときのメモです。

使用したもの

テキストエディタ（Sublime Text2を使用しています）
ダミー画像（なんでもいいです）
ブラウザ（Google Chromeを使用しています）

おおまかな流れ

テンプレート作成のおおまかな流れを記します。

ダミー画像を1枚用意しておく
テキストエディタで4つのHTMLファイルを作成する
（index.html、single.html、page.html、archive.html）
ブラウザでHTMLファイルを表示させてみる
テキストエディタでCSSファイルを作成する
HTMLファイルにCSSファイルへのリンクを追記する
もういちどブラウザでHTMLファイルを表示させてみる

HTMLファイルを作成する

テキストエディタを開き、4つのHTMLファイルを作成します。クラス名や属性などはほとんど書いていません。

作成したら、ダミー画像といっしょに保存します。

index.html

ブログのトップページのテンプレートです。以下のような、オーソドックスなブログの構成です。

ヘッダー
ナビゲーションメニュー
記事（3こ表示）
ページャー
サイドバー
フッター

書き終わったらindex.htmlという名前で保存します。

コード（長いので折り畳んでいます）とサンプルファイルです。

index.htmlのコード：

<!--header-->
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8" />
        <title>10251</title >
</head>
	
<body>
<header>
	<h1><a href="#">10251</a></h1>
	<nav>
		<ul>
			<li><a href="#">メニュー1</a></li>
			<li><a href="#">メニュー2</a></li>
			<li><a href="#">メニュー3</a></li>
		</ul>
	</nav>
</header>

<!--index-->
<div>
	<article>
		<header>
			<h2><a href="#">記事タイトル</a></h2>
			<div>
				<time>2013.10.23</time>
				<a href="#">カテゴリー名とか</a>
			</div>
			<img src="dummy.png">
		</header>

		<p>テキストテキストテキストテキスト</p>
		<p>テキストテキストテキストテキスト</p>
		<a href="#">続きを読む</a>
	</article>

	<article>
		<header>
			<h2><a href="#">記事タイトル</a></h2>
			<div>
				<time>2013.10.22</time>
				<a href="#">カテゴリー名とか</a>
			</div>
			<img src="dummy.png">
		</header>

		<p>テキストテキストテキストテキスト</p>
		<p>テキストテキストテキストテキスト</p>
		<a href="#">続きを読む</a>
	</article>

	<article>
		<header>
			<h2><a href="#">記事タイトル</a></h2>
			<div>
				<time>2013.10.21</time>
				<a href="#">カテゴリー名とか</a>
			</div>
			<img src="dummy.png">
		</header>

		<p>テキストテキストテキストテキスト</p>
		<p>テキストテキストテキストテキスト</p>
		<a href="#">続きを読む</a>
	</article>

<div>1 <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> ... </div>

</div>

<!--sidebar-->
<aside>
	<section>
		<h3>ウィジェットタイトル</h3>
		<p>ウィジェットなかみ</p>
	</section>

	<section>
		<h3>ウィジェットタイトル</h3>
		<p>ウィジェットなかみ</p>
	</section>

	<section>
		<h3>ウィジェットタイトル</h3>
		<p>ウィジェットなかみ</p>
	</section>
</aside>

<!--footer-->
<footer>
<a href="#">コピーライト表記</a>
</footer>

</body>
</html>

index.htmlを開く（別ウィンドウ）

single.html

ブログの記事ページのテンプレートです。

ヘッダー
ナビゲーションメニュー
ぱんくずリスト
記事
ソーシャルボタン
関連記事
前の記事と次の記事へのページャー
サイドバー
フッター

書き終わったらsingle.htmlという名前で保存します。

コード（長いので折り畳んでいます）とサンプルファイルです。

※2013.10.25：コードとサンプルのファイルを一箇所修正しました

single.htmlのコード：

<!--header-->
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8" />
        <title>10251</title >
</head>
	
<body>
<header>
	<h1><a href="#">10251</a></h1>
	<nav>
		<ul>
			<li><a href="#">メニュー1</a></li>
			<li><a href="#">メニュー2</a></li>
			<li><a href="#">メニュー3</a></li>
		</ul>
	</nav>
</header>

<div><a href="#">Home </a> > <a href="#">カテゴリー名とか</a> > 記事タイトル</div>
<!--single-->
<div>
	<article>
		<header>
			<h1>記事タイトル</h1>
			<div>
				<time>2013.10.23</time>
				<a href="#">カテゴリー名とか</a>
			</div>
			<img src="dummy.png">
			
			<ul>
				<h3>関連記事</h3>
				<li><a href="#">記事タイトル</a></li>
				<li><a href="#">記事タイトル</a></li>
				<li><a href="#">記事タイトル</a></li>
			</ul>
		</header>

		<p>テキストテキストテキストテキスト</p>
		<p>テキストテキストテキストテキスト</p>
		<p>テキストテキストテキストテキスト</p>
		<p>テキストテキストテキストテキスト</p>
		<p>テキストテキストテキストテキスト</p>
	
		<ul class="share"><!--シェアボタン-->
		<li><a href="#">FB</a></li>
		<li><a href="#">Twitterシェア</a></li>
		<li><a href="#">Google+</a></li>
		<li><a href="#">はてぶ</a></li>
		<li><a href="#">Pocket</a></li>
		<li><a href="#">RSS</a></li>
		<li><a href="#">Feedly</a></li>
		</ul>

		<ul>
			<h3>関連記事</h3>
			<li><a href="#"><img src="dummy.png">記事タイトル</a></li>
			<li><a href="#"><img src="dummy.png">記事タイトル</a></li>
			<li><a href="#"><img src="dummy.png">記事タイトル</a></li>
			<li><a href="#"><img src="dummy.png">記事タイトル</a></li>
		</ul>


		<dl>
			<dt>前の記事</dt>
			<dd><a href="#"><img src="dummy.png">記事タイトル</a></dd>
		</dl>

		<dl>
			<dt>次の記事</dt>
			<dd><a href="#"><img src="dummy.png">記事タイトル</a></dd>
		</dl>
	</article><!--2013.10.25 article要素を閉じる位置を修正-->
</div>
<!--sidebar-->
<aside>
	<section>
		<h3>ウィジェットタイトル</h3>
		<p>ウィジェットなかみ</p>
	</section>

	<section>
		<h3>ウィジェットタイトル</h3>
		<p>ウィジェットなかみ</p>
	</section>

	<section>
		<h3>ウィジェットタイトル</h3>
		<p>ウィジェットなかみ</p>
	</section>
</aside>

<!--footer-->
<footer>
<a href="#">コピーライト表記</a>
</footer>

</body>
</html>

single.htmlを開く（別ウィンドウ）

page.html

ブログの固定ページのテンプレートです。

ヘッダー
ナビゲーションメニュー
ぱんくずリスト
ページ部分
（用途は様々なので、ここにはほとんど何も書いていません）
サイドバー
フッター

書き終わったらpage.htmlという名前で保存します。

コード（長いので折り畳んでいます）とサンプルファイルです。

page.htmlのコード：

<!--header-->
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8" />
        <title>10251</title >
</head>
	
<body>
<header>
	<h1><a href="#">10251</a></h1>
	<nav>
		<ul>
			<li><a href="#">メニュー1</a></li>
			<li><a href="#">メニュー2</a></li>
			<li><a href="#">メニュー3</a></li>
		</ul>
	</nav>
</header>

<div><a href="#">Home </a> > ページタイトル</div>
<!--page-->
<div>
	<article>
		<header>
			<h1>ページタイトル</h1>
		</header>

		<p>お問い合わせフォームとか、</p>
		<p>サイトマップとか、</p>
		<p>プロフィールとかとかを載せるページ</p>
	</article>

</div>

<!--sidebar-->
<aside>
	<section>
		<h3>ウィジェットタイトル</h3>
		<p>ウィジェットなかみ</p>
	</section>

	<section>
		<h3>ウィジェットタイトル</h3>
		<p>ウィジェットなかみ</p>
	</section>

	<section>
		<h3>ウィジェットタイトル</h3>
		<p>ウィジェットなかみ</p>
	</section>
</aside>

<!--footer-->
<footer>
<a href="#">コピーライト表記</a>
</footer>

</body>
</html>

page.htmlを開く（別ウィンドウ）

archive.html

カテゴリーやタグ、日付別に記事一覧を表示させるページのテンプレートです。

ヘッダー
ナビゲーションメニュー
ぱんくずリスト
何のページかを表示する見出し
記事（3こ表示）
ページャー
サイドバー
フッター

書き終わったらarchive.htmlという名前で保存します。

コード（長いので折り畳んでいます）とサンプルファイルです。

archive.htmlのコード：

<!--header-->
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8" />
        <title>10251</title >
</head>
	
<body>
<header>
	<h1><a href="#">10251</a></h1>
	<nav>
		<ul>
			<li><a href="#">メニュー1</a></li>
			<li><a href="#">メニュー2</a></li>
			<li><a href="#">メニュー3</a></li>
		</ul>
	</nav>
</header>

<div><a href="#">Home </a> > カテゴリー名とか</div>
<!--archive-->

<div>
	<h2>‘カテゴリー名’ の記事一覧</h2>
	<article>
		<header>
			<h2><a href="#">記事タイトル</a></h2>
			<div>
				<time>2013.10.23</time>
				<a href="#">カテゴリー名とか</a>
			</div>
			<img src="dummy.png">
		</header>

		<p>テキストテキストテキストテキスト</p>
		<p>テキストテキストテキストテキスト</p>
		<a href="#">続きを読む</a>
	</article>

	<article>
		<header>
			<h2><a href="#">記事タイトル</a></h2>
			<div>
				<time>2013.10.22</time>
				<a href="#">カテゴリー名とか</a>
			</div>
			<img src="dummy.png">
		</header>

		<p>テキストテキストテキストテキスト</p>
		<p>テキストテキストテキストテキスト</p>
		<a href="#">続きを読む</a>
	</article>

	<article>
		<header>
			<h2><a href="#">記事タイトル</a></h2>
			<div>
				<time>2013.10.21</time>
				<a href="#">カテゴリー名とか</a>
			</div>
			<img src="dummy.png">
		</header>

		<p>テキストテキストテキストテキスト</p>
		<p>テキストテキストテキストテキスト</p>
		<a href="#">続きを読む</a>
	</article>

<div>1 <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> ... </div>

</div>

<!--sidebar-->
<aside>
	<section>
		<h3>ウィジェットタイトル</h3>
		<p>ウィジェットなかみ</p>
	</section>

	<section>
		<h3>ウィジェットタイトル</h3>
		<p>ウィジェットなかみ</p>
	</section>

	<section>
		<h3>ウィジェットタイトル</h3>
		<p>ウィジェットなかみ</p>
	</section>
</aside>

<!--footer-->
<footer>
<a href="#">コピーライト表記</a>
</footer>

</body>
</html>

archive.htmlを開く（別ウィンドウ）

CSSファイルを作成する

これだけではさすがに見づらいので、少しだけCSSを書いてみます。ひとまずイメージをつかむために、要素セレクタのみで最小限の装飾をしてみました。

a{
	color: cadetblue;
	text-decoration: none;
}

body{
	width: 50em;
        margin: 0 auto;
}

nav{
	margin-bottom: 2em;
	border-bottom: 1px solid lightgray;
}

nav ul{
	list-style: none;
}

nav li{
	display: inline;
}

body > div{
	float: left;
	width: 28em;
	margin-bottom: 3em;
}

article{
	margin-bottom: 3em;
}

article header img{
	margin-top: 1em;
}

ul img,
dl img{
	width:100px;
	height: auto;
}

dl{
	display: inline-block;
	vertical-align: top;
	width: 40%;
}

aside{
	float: right;
	width: 20em;
	margin-bottom: 3em;
}

aside section{
	margin-bottom: 2em;
}

aside section:nth-child(3){
	margin-bottom: 0;
}

footer{
	clear: both;
	padding: 1em 0;
	background: lightgray;
}

書き終わったらstyle.cssという名前で、HTMLファイルと同じ場所に保存します。

HTMLにCSSへのリンクを追記する

4つのHTMLファイルの6行目と7行目の間に、以下を追記します。

<link rel="stylesheet" type="text/css" href="style.css">

追記したら、それぞれのファイルを保存します。

もういちどHTMLファイルをひらく

4つのHTMLファイルをもういちど開いてみます。

なんとなくブログっぽいかたちになりました（ちょっとだけ）。当然これでは不十分なので、HTMLのほうで適切にクラスやidをつけたり、divで囲ったりなどしていきます。

ここからテーマ完成までの流れのメモを、引き続き書いていこうと思っています。

10251

WordPress自作テーマのベースに使うためのHTMLテンプレートを作りました

使用したもの

おおまかな流れ

HTMLファイルを作成する

index.html

single.html

page.html

archive.html

CSSファイルを作成する

HTMLにCSSへのリンクを追記する

もういちどHTMLファイルをひらく

新しい記事

古い記事

よく読まれている投稿