ステップ別にちょっとづつWordPressテーマの作り方を学ぶ本シリーズ。第一回の開発環境の構築を終え、今回はテーマの雛形を作る。
WordPressテーマ作りの概要
- WordPressテーマ開発環境の構築
- Webサイトをデザインする
- WordPressテーマの雛形を作る
- ヘッダーを作る
- サイドバーを作る
- フッターを作る
- トップページを作る
- WordPressテーマを動かす
2. Webサイトをデザインする
開発環境の構築で用意したグラフィックデザインソフトを使い、Webサイトをデザインしていこう。一般的なWordPressサイトには、ヘッダー、サイドバー、フッター、コンテンツ部分（ブログ記事やサービス紹介ページなど）がある。
今回はテーマ作成のエッセンスだけにフォーカスするため、Bootstrapの公式サンプルからブログページを用意した。
※Bootstrapのバージョンは3.3.6 今回使用したブログページは、Bootstrapオフィシャルのダウンロードリンクから
ブログ記事が２つ（Sample blog postとAnother blog post）並んでおり、ページ上部には他のページへのグローバルナビゲーションを備えたヘッダー、記事の右隣りにはサイドバー、そしてページ下部にフッターを配している。
WordPressが元々ブログ用に開発されたからか、テーマの構成もこの構造に則っている。次で詳しく見てみよう。
WordPressテーマの雛形を作る
WordPressテーマの構成
作例が４つの部分に分かれていることを見た。すなわち、ヘッダー、記事（loopとラベリングしている部分）、サイドバー、フッターの４つだ。WordPressテーマを作りでは、１つのWebサイトをこのような部分ごとに分けていく。１つのWebサイトをパズルピースのようにバラしたもの。それがテーマだ。
今回の作例テーマで作るファイルをまとめよう。
- ヘッダー – header.phpなるファイルへ分割する。
- 記事 – PHPコードによるループを使い、index.phpへ記述する（ループ部分のみ分けることもある）
- サイドバー – sidebar.phpへ分割する。
- フッター – footer.phpへ分割する
- CSSファイル – style.cssとして記述する。テーマの情報もこれに添える。
- functions.php – WordPressが用意している機能を制御する。
※今回はBootstrapで使うJavaScriptファイルもテーマに含める。
雛形を作る
これらのファイルを抱えたテーマの雛形を作る。空の内容で各ファイルを作り、お好みのディレクトリにテーマ構成を作ろう。
ここまで来たらコーヒーを飲んで一息つこう。次はWebサイトを分解し、WordPressテーマへ落とし込んでいく。
WordPressテーマで儲けちゃいますか？他にはあまりない、テーマ販売についての書籍
