WordPressのテーマを自由自在にカスタマイズするためには、テーマの構造を理解しなければならない。
それには、独自でテーマを作って見るのが一番近道だ。
という事で、テーマを試作することにした。
その記録を備忘録の意味も兼ねて記録していこう。
まず、静的サイトからWordpressのテーマを作る場合の工程は以下の通りだ。
1.HTMLとCSSで静的サイトを作成する
Web化したいコンテンツ（文章や画像）を用意する
通常、Webサイトを立ち上げたいと考える人は、公開したい内容を既に持っている。
（持っているから公開したいと考えるのだ）
まだ文章化されていなかったり画像化されていなかったりする場合は、要点だけ記述したサンプルコンテンツでもいいので準備する。
サイトマップとワイヤーフレームを考案する
サイトマップとはWebサイトのページ構成の事で、ツリー図で表現する。
これは、コンテンツを内容に応じて分類分けすればよいが、ユーザー視点で考案してもいい。
そしてワイヤーフレームとはページごとのレイアウトのラフ案だ。
コンテンツの配置ももちろんだが、下層ページなどへのリンクボタンやナビゲーションボタンをどう配置するのかを考えるので、サイトマップと見合わせながら考えるといい。
フォトショップで、実際の画面を作成する
ワイヤーフレームにしたがって、実際の線や色を使ってWEBページのイメージを作成する。
画像でしか表現できない部分をpng画像ファイルとして書き出す
タイトルロゴや背景画像、アイキャッチ画像など、HTMLとCSSでは表現できない部分を画像ファイルとして保存しておく。
HTMLタグとCSSを組んでいく
HTMLエディタを使って、まずコンテンツ（文章）を流し込み、見出しや本文、目次などアイテムごとにHTMLタグを設定していく。レイアウトやデザインはフォトショップで作ってあるWEBページイメージを見ながらCSSを使って設定していく。
2.静的サイトをWordPressへ変換する
a.静的サイトの各ページを、固定ページか投稿ページを決めて、PHP形式のファイルで保存する。
b.CSSファイルのヘッダにWordpressテーマの宣言を書く。
c.ページ内の動的部分をphpの構文に差し替え、Wordpressデータに置き換えていく。
本当にHTMLサイトを完成させる？
さてここで鶏が先か卵が先かについて整理していこう。
WordPressのテーマを作るには元になるHTMLサイトが必要だ。
しかし、コンテンツを更新しやすくするのがWordPressを使う理由なので、HTMLサイトがコンテンツも含めてあらかじめ完成しているケースはほとんどない。
ではどうやってコンテンツが完成していない状態で元になるHTMLサイトを作成するのか？
答えはHTMLひな形
答えは、HTMLテンプレート（ひな形）サイトを作成する、だ。
しかも、HTMLテンプレート（ひな形）を作る際に、Photoshopなどで作成したWeb画面から、ボタン画像などを作ってしまうと、後からWordpress化した時に追加出来ない部分となってしまう。
ヘッダーの背景やロゴの画像、サイト全体の背景画像などはいいとしても、それ以外例えばメニュー項目などはボタン画像等にしない方がひな形化しやすいだろう。
視覚的デザインは扱う情報内容によって後から変えたくなるので考えるのは後まわしにして、サイトのジャンルだけをあらかじめ設定しておき、情報の構造（サイトマップやワイヤーフレーム）を決めてテンプレートとする、という事だ。
HTMLひな形を作るときの手順
手順１ サイトのジャンルを決める
例えば以下のようなジャンルがあるが、自分が今作ろうとしているサイトは何のジャンルかを定めておく。
- ビジネス用のコーポレートサイト
- ブログサイト
- 商品ランキングサイト
- ガイドブック的なサイト
手順2 サイトマップとワイヤーフレームを作る
自分が作ろうとしているサイトのサイトマップとワイヤーフレームを作る。
サイトマップとは、各ページ間の親子関係をツリー上に整理した図の事だ。概要情報が親ページで、詳細ページが子ページといった具合に整理していく。
ワイヤーフレームとは、１ページ内での文字や画像、リンクボタン等の配置をラフスケッチしたものだ。
この時、自分が作ろうとしているサイトのジャンルを念頭に置き、ネット上に公開されている同じジャンルのWEBサイトがどのような構成になっているのかを参考にしながら作成する。
最終的にはそのジャンルでの標準的なひな形にしたいからだ。
手順3 PhotoshopでWEB画面イメージ作成
ダミー画像とダミー文章を使ってPhotoshopでWEB画面イメージを作成する。
もちろん、Photoshopではなくても他のペイントソフトでもOK。
もっと言えば、手順４のタイトルロゴなどの必要画像が別途準備できるのであれば、この手順３は省略してもよい。
手順4 タイトルロゴと背景画像とアイキャッチ画像を書き出す
画像の書き出しも、ここではあくまでダミー画像で問題ない。
手順5 HTMLサイト作成
手順２や手順３で作成したWEB画面イメージと見比べながら、HTMLエディタ等でHTMLとCSSを使ってWEBページを作成する。
まとめ
実際のWEBサイトを作るのとの違いは、WEBサイトのジャンルを意識して、ダミー文章とダミー画像を使ってサイトを仕上げていく点だ。
発展
HTMLひな形として完成させてしまってもよいのだが、もっと柔軟にカスタマイズできる状態でおいておく方法もある。
headタグ部分の内容とサイトサイズくらいをひな形としておき、グローバルメニューの配置やタイトルロゴの場所など、各パーツはHTMLソースとしていつでも簡単にコピペできる状態で別に保存しておいて、あとから都度自由にレイアウトしてから使う、という方法だ。
ひな形HTMLの一歩手前の、アレンジ可能なHTMLひな形というわけだ。