WordPressで作成したビジネスサイトでのテンプレートファイルを確認する｜WordPressでビジネスサイトをつくろう【第9回】

前回、制作後の修正や運用効率をあげるためのモジュールテンプレートの使い方について解説しました。これでWordpressでひと通りのビジネスサイトを作成するためのテンプレートファイルを勉強しました。（カスタム投稿タイプについてはのちほど）

今回は実際に作成したビジネスサイトを元に各ページがどのようなテンプレートファイルで構成されているかをまとめてみたいと思います。

今回作成したWordpressでのビジネスサイト

今回まとめるテンプレートファイルのビジネスサイトは、
書籍『WordPress 3.x　現場のワークフローで覚えるビジネスサイト制作』で制作したもので、実際のサンプルサイトはこちらです。

サンプルサイト：Whttp://wordpress-book.webdesignmatome.com/

今回はこのサンプルサイトのテンプレートファイル構成を解説します。
※テンプレートのファイル構成は製作者によっていろいろな分け方がありますので、一つの例として思っていただければと思います。

トップページで使用したテンプレートファイル構成

トップページでは下記のようなファイル構成になっています。

ベースとするテンプレートファイルとしてトップページにはindex.phpを使用しています。

そこからサイト共通部分をモジュールテンプレートを使用して、ヘッダー部分を「header.php」、フッター部分を「footer.php」、サイドエリア部分を「sidebar.php」と分けるWordpressでよく使う分け方を行い、検索窓の部分を「searchform.php」で呼び出しています。

コンテンツエリアの内容は「index.php」に書きます。

はじめから用意されているモジュールテンプレート一覧

トップページ内でのモジュールテンプレートの分け方

各固定ページで作成したテンプレートファイル

ここでは固定ページとして使用したページのテンプレートファイルを見ていきます。

固定ページのベースとなるテンプレートファイルは、「page.php」になります。

今回は「会社概要」、「アクセス」、「お問い合わせ」、「サイトマップ」というような4つの異なった見せ方にしようと思う場合の方法として「page-スラッグ名.php」の形で作成することによって、特に条件分岐文などを使用しないでレイアウトを個別に設定することができます。

テンプレートファイルの優先順位

4つの固定ページで使用するテンプレートファイル

会社概要ページ

サンプルサイト：http://wordpress-book.webdesignmatome.com/company/

会社概要ページのテンプレートファイルの分け方

共通部分はトップページと同じですが、トップページのメイングラフィック部分は条件分岐文で各ページのグラフィック画像にしています。

またパンくずリストも下層ページでは共通となっていますので、「header.php」内に記述しています。

トップページのメイングラフィックや下層ページのグラフィック画像は全ページ共通なので一つのファイル「header.php」で管理したほうが修正やページが増えた場合などに一元管理ができ修正が楽になります。
※各ページの画像の振り分けについては後日解説します。

会社概要のコンテンツ部分では、テキスト部分と表組みの部分は固定ページの投稿スペースから投稿した内容を表示させます。

移転や情報の追加などは投稿で簡単に修正できるようにしています。

その下のNEWS部分はTOPページと同じように最新のものを自動的に呼び出す形ですので、投稿部分で記述ではなく、「page-company.php」内に直接呼び出しています。

こうすることによって会社概要を見ようと思った人に対して、最新の情報を提供することができます。

WordPressのようなCMSを使わない場合はこのような場合は各ページを手作業で更新したり、javascriptで簡易インクルードのようにしていましたが、自動的に常に最新状態になるので便利です。

アクセスページ

サンプルサイト：http://wordpress-book.webdesignmatome.com/company/access/

アクセスページのテンプレートファイルの分け方

アクセスページは基本会社概要と同じフォーマットになっています。

ですが、固定ページの最終的なファイルpage.phpを使用しておりませんので、単純にする場合は「page-company.php」を完成した状態で別名で保存で、「page-access.php」とすることで使用することができます。

ただこの場合は両方のページで同じような修正が出た場合にどちらのファイルも修正剃る必要があります。

この点を除けば特に難しいことをしなくても使用することができるので気軽に使うことができます。

※のちほど「テンプレート機能」を使用して共通のフォーマットを使う機能の説明もいたします。

お問い合せページ

サンプルサイト：http://wordpress-book.webdesignmatome.com/contact/

お問い合わせページのテンプレートファイルの分け方

お問い合わせページも基本の構造は同じですが、ここでは簡単にお問い合わせフォームを設置できる「Contact Form 7」を使用して作成しています。
※プラグインの設定については後日解説予定。

今回はフォームのみですが、ここの下に別の情報を入れたりする場合に固有のテンプレートして「page-contact.php」とすることで使用することができます。

こちらもベースとなるファイルを別名保存して使用するとよいでしょう。

サイトマップページ

サンプルサイト：http://wordpress-book.webdesignmatome.com/sitemap/

サイトマップページのテンプレートファイルの分け方

サイトマップでは全ページへのリンクを作成するものとして、今回はWordPress3.xから使用できるようになった「カスタムメニュー」を使用して作成します。

今回グローバルナビゲーションにも使用させますが、サイト運用後に項目の増減がある際にすぐに修正することができるので便利な機能です。
※カスタムメニューの設定については後日解説予定。

テンプレートファイルとしては「page-sitemap.php」とすることで使用することができます。

今回使用する固定ページは4ページですが、それぞれのテンプレートファイルを「page-スラッグ名.php」にすることで、条件分岐文などを一切使用せずに異なったレイアウトを持つことも可能です。

条件分岐させないことで同じファイルを別名保存して使用するなどがありますので、修正の際はファイル分だけ修正の可能性もありますが、Webの専門でない方やノンプログラマーの人でWordPressでオリジナルサイトを作ろうという場合はまずここからやってみるのがよいでしょう。

投稿のカテゴリー関連で作成したテンプレートファイル

第7回の記事で投稿のカテゴリー関連のファイル名としては下記のようにまとめました。

参考：第7回　WordPressのテンプレートファイルの種類と使い方を覚える

もちろんこのようにすべてをカテゴリーをスラッグ名を使用して、「category-スラッグ名.php」にすることも可能です。

ただ今回は更新情報関連は同じフォーマット、製品情報は同じフォーマットと考えて見たいと思います。

カテゴリー関係のテンプレートファイルの優先順位を上の表から見ますと、汎用ファイルは「category.php」となります。

またわかりやすく個別に命名する場合は、「category-スラッグ名.php」が便利でしょう。

これらは優先度の問題なので、「更新情報」と「製品情報」のどちらにしないといけないということはありません。

そこで本書は「ニュース」とその下のサブカテゴリーの「お知らせ」、「セミナー情報」を「category.php」を使用して作成します。

そして製品情報を表のようにそれぞれのスラッグ名のファイルに分けたいと思います。

本書では製品A～Dを個別にcategory-products_a.phpからcategory-products_d.phpとしました。これはそれぞれのページでの製品アイコンの管理を条件分岐させなかったのでこのような形になっています。

もし仮に製品がD以降も増えるようになる場合はアイコンを自動的に振り分ける分岐を書いてテンプレート機能を使うことによってより便利に構築することも可能です。

更新情報関連ページ

サンプルサイト：http://wordpress-book.webdesignmatome.com/news/

更新情報関連ページのテンプレートファイルの分け方

上部のグローバルナビゲーションより「ニュース」、「更新情報」、「セミナー情報」にて、それぞれのニュースのアイコンがついた更新情報が表示されます。

テンプレートファイルとして、「category.php」を使用しています。

製品情報一覧ページ

サンプルサイト：http://wordpress-book.webdesignmatome.com/products/

製品情報一覧ページのテンプレートファイルの分け方

製品一覧ページではページ上部に製品の解説を入れる要素を作成しています。

今回ここは「category-products.php」内に直接記述しています。

そして製品A～Dをのサムネイルは条件分岐により特定のカテゴリーを4件づつ表示させるようにしています。

またサムネイル画像の右上にある小さいA～Dをの三角のアイコンは毎回画像制作で作るのは手間ですので自動的にカテゴリーを判別して呼び出しています。
※特定のカテゴリーの呼び出しについて後日開設予定。

各製品情報一覧ページ

サンプルサイト：http://wordpress-book.webdesignmatome.com/products/products_a/

各製品情報一覧ページのテンプレートファイルの分け方

各製品情報一覧ページではカテゴリーのサムネイルを20件表示しています。

今回ここは「category-products_a.php」から「category-products_d.php」という形でA～Dの4つをそれぞれファイルを分けています。

これはアイコンを条件分岐させずにしたサンプルのためこのようにしましたが、D以降などの商品ができた場合にはテンプレートファイルを複製しないといけないため実際は会社概要とアクセスのようにテンプレート機能を使用した方がより効率よくできます。

投稿のカテゴリー関連の詳細ページのテンプレートファイル

サンプルサイト：http://wordpress-book.webdesignmatome.com/news/seminar/semi001/

お知らせの詳細ページのテンプレートファイルの分け方

投稿のカテゴリー関連の詳細ページのテンプレートファイルとしては、「single.php」がありましたが、テンプレートファイルの優先表を見るとsingle.phpにはスラッグ名での優先度がありません。

そこで詳細ページを別のレイアウトで表現するために、「カスタムテンプレート」を使用してそれぞれのレイアウトを作成し、「single.php内で上限分岐をして振り分ける」という方法で今回は作成しました。

更新情報関連の詳細ページのテンプレートとして「sgl-news.php」としました。

sgl-というのはWordPressで用意されているファイル名ではなく、こちらで任意でつけた名称になります。

製品情報のカテゴリー関連の詳細ページのテンプレートファイル

サンプルサイト：http://wordpress-book.webdesignmatome.com/products/products_a/a001/

製品情報の詳細ページのテンプレートファイルの分け方

更新情報と同様に製品情報のカテゴリーの詳細ページのテンプレートとして「sgl-products.php」としました。

この条件分岐の記述につきましては次回以降の連載でまとめていきます。

※またカスタム投稿タイプを使用する方法もありますが、今回は使わない方法で行なっています。

この他にも「検索結果ページ」「404ページ」「カスタム投稿タイプページ」などいくつか使用しているテンプレートファイルがありますが、まずはベースとなる部分を先にまとめてみました。

テンプレートファイルがわかれても共通部分が多いと制作が楽になる？

今回のページを見て気がついた方もいらっしゃると思いますが、ビジネスサイトといっても、ヘッダー、フッター、サイドエリアなどの共通部分や、デザインとしての見出し部分、ボックス部分など共通のデザインで見せる場合にはすでに作成したテンプレートを複製して使用し、変更点のある部分だけを変えているというのがわかるかと思います。

これはWordPressを使用しないでWebサイトを作成する際も同じですが型を作って量産するというような方法と同じです。

今回の部分でも実際はコンテンツエリア部分だけのレイアウトを変更する形でテンプレートファイルを作成していっています。

まずはこのようにテンプレートファイルだけで各ページを振り分ける方法からWordPressを勉強するというのが、Webデザイナーでない人やノンプログラマーの人でも比較的簡単にWordPressでレイアウトの型が多いビジネスサイト構築ができると思っています。

テンプレートファイルの使い方と優先順位を覚えて、自身のサイト制作に必要なテンプレートをまとめていくことと、サイト運用後の拡張を意識してテンプレートの設計することで効率よくサイトを運用出来ると思います。

今回は以上になります。

次回からは実際に記事を読み込む為の条件分岐など実際のwordpressのコードを書いていきたいと思います。