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

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という名前で保存します。
コード(長いので折り畳んでいます)とサンプルファイルです。
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ファイルと同じ場所に保存します。
HTMLにCSSへのリンクを追記する
4つのHTMLファイルの6行目と7行目の間に、以下を追記します。
追記したら、それぞれのファイルを保存します。
もういちどHTMLファイルをひらく
4つのHTMLファイルをもういちど開いてみます。
なんとなくブログっぽいかたちになりました(ちょっとだけ)。当然これでは不十分なので、HTMLのほうで適切にクラスやidをつけたり、divで囲ったりなどしていきます。
ここからテーマ完成までの流れのメモを、引き続き書いていこうと思っています。