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

wordpress-theme-template
Update Web制作メモ >

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ファイルを作成します。クラス名や属性などはほとんど書いていません。

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

ThemeSample01

index.html

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

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

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

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

single.html

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

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

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

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

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

page.html

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

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

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

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

archive.html

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

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

書き終わったら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ファイルと同じ場所に保存します。

ThemeSample02

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

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

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

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

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

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

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