第9回
WordPressで作成したビジネスサイトで使用したテンプレートファイルを確認する
前回は、制作後の修正や運用効率をあげるためのモジュールテンプレートの使い方について解説しました。これでWordpressでビジネスサイトを作成するためのテンプレートファイルをひと通り勉強しました（カスタム投稿タイプについては後ほどする予定です）。今回は実際に作成したビジネスサイトを元に各ページがどのようなテンプレートファイルで構成されているかをまとめてみたいと思います。
解説：（有）ムーニーワークス ハヤシユタカ
解説：（有）ムーニーワークス ハヤシユタカ
●今回作成したWordpressでのビジネスサイト
今回まとめるテンプレートファイルのビジネスサイトは、書籍『WordPress 3.x 現場のワークフローで覚えるビジネスサイト制作』で制作したもので、実際のサンプルサイトはこちらです。
（▲クリックして拡大）
○サンプルサイト：Whttp://wordpress-book.webdesignmatome.com/
今回はこのサンプルサイトのテンプレートファイル構成を解説します。※テンプレートのファイル構成は制作者によっていろいろな分け方がありますので、ひとつの例として思っていただければと思います。
今回はこのサンプルサイトのテンプレートファイル構成を解説します。※テンプレートのファイル構成は制作者によっていろいろな分け方がありますので、ひとつの例として思っていただければと思います。
●トップページで使用したテンプレートファイル構成
トップページでは下記のようなファイル構成になっています。ベースとするテンプレートファイルとしてトップページには「index.php」を使用しています。
そこからサイト共通部分をモジュールテンプレートを使用して、ヘッダー部分を「header.php」、フッター部分を「footer.php」、サイドエリア部分を「sidebar.php」と分けるWordpressでよく使う分け方を行い、検索窓の部分を「searchform.php」で呼び出しています。
コンテンツエリアの内容は「index.php」に記述します。
そこからサイト共通部分をモジュールテンプレートを使用して、ヘッダー部分を「header.php」、フッター部分を「footer.php」、サイドエリア部分を「sidebar.php」と分けるWordpressでよく使う分け方を行い、検索窓の部分を「searchform.php」で呼び出しています。
コンテンツエリアの内容は「index.php」に記述します。
はじめから用意されているモジュールテンプレート
一覧 （▲クリックして拡大）
トップページ内でのモジュールテンプレートの
分け方の例 （▲クリックして拡大）
●各固定ページで作成したテンプレートファイル
ここでは固定ページとして使用したページのテンプレートファイルを見ていきます。固定ページのベースとなるテンプレートファイルは「page.php」になります。
今回は「会社概要」、「アクセス」、「お問い合わせ」、「サイトマップ」というような4つの異なった見せ方にしようと思う場合の方法として「page-スラッグ名.php」の形で作成します。こうすることによって、特に条件分岐文などを使用せずにレイアウトを個別に設定することができます。
今回は「会社概要」、「アクセス」、「お問い合わせ」、「サイトマップ」というような4つの異なった見せ方にしようと思う場合の方法として「page-スラッグ名.php」の形で作成します。こうすることによって、特に条件分岐文などを使用せずにレイアウトを個別に設定することができます。
テンプレートファイルの優先順位
（▲クリックして拡大）
4つの固定ページで使用するテンプレートファイル
（▲クリックして拡大）
■会社概要ページ
共通部分はトップページと同じですが、トップページのメイングラフィック部分は条件分岐文で各ページのグラフィック画像にしています。また、パンくずリストも下層ページでは共通となっているため「header.php」内に記述しています。
トップページのメイングラフィックや下層ページのグラフィック画像は全ページ共通なので、ひとつのファイル「header.php」で管理します。こうした方が修正やページが増えた場合などに一元管理ができて修正が楽になるでしょう。※各ページの画像の振り分けについては後日解説します。
会社概要のコンテンツ部分では、テキスト部分と表組みの部分は固定ページの投稿スペースから投稿した内容を表示させました。また、移転や情報の追加などは投稿で簡単に修正できるようにしています。
そのほか、下のNEWS部分はTOPページと同じように最新のものを自動的に呼び出す形となっていますので、投稿部分は記述ではなく「page-company.php」内に直接呼び出すようになっています。
こうすることによって会社概要を見ようと思った人に対して、最新の情報を提供することができます。
WordpressのようなCMSを使わない場合は、各ページを手作業で更新したりjavascriptで簡易インクルードのようにしていましたが、自動的に常に最新状態になるので便利です。
トップページのメイングラフィックや下層ページのグラフィック画像は全ページ共通なので、ひとつのファイル「header.php」で管理します。こうした方が修正やページが増えた場合などに一元管理ができて修正が楽になるでしょう。※各ページの画像の振り分けについては後日解説します。
会社概要のコンテンツ部分では、テキスト部分と表組みの部分は固定ページの投稿スペースから投稿した内容を表示させました。また、移転や情報の追加などは投稿で簡単に修正できるようにしています。
そのほか、下のNEWS部分はTOPページと同じように最新のものを自動的に呼び出す形となっていますので、投稿部分は記述ではなく「page-company.php」内に直接呼び出すようになっています。
こうすることによって会社概要を見ようと思った人に対して、最新の情報を提供することができます。
WordpressのようなCMSを使わない場合は、各ページを手作業で更新したりjavascriptで簡易インクルードのようにしていましたが、自動的に常に最新状態になるので便利です。
会社概要ページのテンプレートファイルの分け方 （▲クリックして拡大）
■アクセスページ
アクセスページは基本会社概要と同じフォーマットになっています。ですが、固定ページの最終的なファイルpage.phpを使用しておりませんので、単純にする場合は「page-company.php」を完成した状態で別名で保存し、「page-access.php」とすることで使用することができます。
ただ、この場合は両方のページで同じような修正が出た場合にどちらのファイルも修正剃る必要があります。この点を除けば特に難しいことをしなくても使用することができるので気軽に使うことができます。※後ほど「テンプレート機能」を使用して共通のフォーマットを使う機能の説明もいたします。
ただ、この場合は両方のページで同じような修正が出た場合にどちらのファイルも修正剃る必要があります。この点を除けば特に難しいことをしなくても使用することができるので気軽に使うことができます。※後ほど「テンプレート機能」を使用して共通のフォーマットを使う機能の説明もいたします。
アクセスページのテンプレートファイルの分け方 （▲クリックして拡大）
■お問い合せページ
お問い合わせページも基本の構造は同じですが、ここでは簡単にお問い合わせフォームを設置できる「Contact Form 7」を使用して作成しています。※プラグインの設定については後日解説予定です。
今回はフォームのみですが、ここの下に別の情報を入れたりする場合に固有のテンプレートして「page-contact.php」とすることで使用することができます。
こちらもベースとなるファイルを別名保存して使用すると良いでしょう。
今回はフォームのみですが、ここの下に別の情報を入れたりする場合に固有のテンプレートして「page-contact.php」とすることで使用することができます。
こちらもベースとなるファイルを別名保存して使用すると良いでしょう。
お問い合わせページのテンプレートファイルの分け方 （▲クリックして拡大）
