スタイルやJavaScriptはブートストラップ３を使用し、基本的なWordPressテンプレートタグは”TwentyFourteen”のテーマを流用して自作テーマを作成する手順をまとめました。

目的

　
・実際に一からテーマを作成する事によってテーマの構成、仕組みを理解したい。
　
・テーマの構成、仕組みを一度理解すれば、出来合いのテーマをカスタマイズする事も出来るのではないかと思っています。
　
今まで何度か出来合いのテーマをカスタマイズしようと思ったことがありましたが、どこを変更したらよいのか分からなかったり、コードを変更すると意図していない部分が変わってしまったりしていました。
　
・個人的にスタイルシートやJavaScriptについての知識・経験が少ないのと、ブラウザによる依存性などを個別に考慮することは避けたかったため、ブートストラップ３を介して設定するようにしました。
　
ブートストラップ３自体もブラウザに対して対応、非対応がありますが、ブートストラップ３が対応していないブラウザについては、あきらめるというスタンスです。
　
・ブートストラップ３を使用する事によってモバイル対応、レスポンシブデザインも簡単に作成出来ます。
　
ブートストラップにはJavaScriptのコンポーネントもあるので、ドロップダウンメニューや折り畳み（Collapse）も簡単に作成できます。
　
・ブートストラップ３のサンプルコードもいくつか用意されているので、それを流用したカスタマイズすると簡単に作成する事が出来ます。
　

環境

　
・サーバー
　CentOS6.4
　
・WordPressバージョン
　3.8.1
　
・ブートストラップバージョン
　3.0.3
　
●目次
　
（１）全体概要
（２）ブートストラップのサンプルを使ってindex.phpを作成
（３）header.php、sidebar.php、footer.php、index.phpのテンプレートファイル作成
（４）JavaScriptインクルードの設定
（５）投稿本文表示用のテンプレートファイルを作成
（６）単一投稿用（single.php）のテンプレートファイル作成
（７）固定ページ用（page.php）のテンプレートファイル作成
（８）検索結果表示用（search.php）のテンプレートファイル作成
（９）アーカイブ表示用（archive.php）のテンプレートファイル作成
（１０）カテゴリー表示用（category.php）のテンプレートファイル作成
（１１）WordPressのメニュー画面でナビゲーションメニューを設定
（１２）サイトタイトル、キャッチフレーズを表示できるようにheader.phpを修正
（１３）カスタムヘッダー画像を使えるようにheader.phpを修正
（１４）404.phpテンプレートファイルを作成
（１５）記事タイトル部分のCSS設定
（１６）記事メタデータ部分のCSS設定
（１７）記事本文部分のCSS設定
（１８）前後のページへのリンクのCSS設定
（１９）前後の投稿へのリンクのCSS設定
（２０）コメント投稿フォーム、コメント表示部のCSS設定
（２１）ウィジェット部のCSS設定
（２２）アーカイブページのCSS設定
（２３）画面を左右にスライドさせるボタンのCSS設定

関連記事の目次