第7回 WordPressのテンプレートファイルの種類と使い方を覚える
前回、WordPressのタグの基本やbloginfoタグを使用して自分のサイト情報の取得など解説をしました。phpといっても普通のHTML同様に特にプログラムということを意識せずにできたと思いますが、これからWordPressサイト制作をしていく際に、「記事ごとにデザインを変える」、「特定のものだけを表示させる」ということなどをしていきます。WordPressのテンプレートファイルの種類と役割を覚えると、条件分岐文のプログラムで記述しないでも自動的に分岐をしてくれるため、簡単に条件にあわせたサイト作りが行えます。ここでは、テンプレートファイルの種類と役割をまとめたいと思いますので、ぜひ覚えておきましょう。
解説：（有）ムーニーワークス ハヤシユタカ
解説：（有）ムーニーワークス ハヤシユタカ
●テンプレートの種類と役割を覚えることによって簡単にサイト作成ができる
WordPressでビジネルサイトを作成する際などは、ブログなどと違ってページ内容ごとに異なったデザインで作成していくことが多くあります。
ページによってデザインを変えたりするというようなことは、HTMLやCSSでのように記述すればよいということではなく、javascriptなどで例えるとif文など条件分岐のプログラム文を必要としてきます。
前回の作業ではindex.phpのみで作業した際に、すべてのページをindex.phpのみでも作成できると言いましたが、その場合はすべての条件分岐などを自分で記述しないといけなくなりますので、初めての人にとっては制作の難易度が少しあがります。
そこで覚えたいのが、「WordPressのテンプレートファイルの種類と役割」です。
WordPressで使用する「投稿」のカテゴリーや、「固定ページ」などをそれぞれ別のデザインを設定する際は、使用するphpのテンプレートファイルをページごとに専用のレイアウトへ変更することができます。
こうすることで、例えば、カテゴリーで「更新情報」や「セミナー情報」などがあり、2つのレイアウトを別に設定したい場合でも条件分岐のプログラム文を書くことなく、それぞれの記事に別のデザインを設定することができます。
よくWordPressの無料テーマなどをダウンロードすると、使用されているファイルがテーマごとに違うということを目にしたことがある人もいると思いますが、レイアウトの分け方やサイト構成によってファイル構成が変わるので、テーマ毎にファイルが違い初心者の人が悩む原因のひとつになります。
ですので、このテンプレートの種類と役割を覚えることによって、そのテーマがどのようなルールで作られているかなどを理解することができ、より簡単に他の人のテーマや自分でゼロからのサイト作りがしやすくなりますので、是非覚えましょう。
ページによってデザインを変えたりするというようなことは、HTMLやCSSでのように記述すればよいということではなく、javascriptなどで例えるとif文など条件分岐のプログラム文を必要としてきます。
前回の作業ではindex.phpのみで作業した際に、すべてのページをindex.phpのみでも作成できると言いましたが、その場合はすべての条件分岐などを自分で記述しないといけなくなりますので、初めての人にとっては制作の難易度が少しあがります。
そこで覚えたいのが、「WordPressのテンプレートファイルの種類と役割」です。
WordPressで使用する「投稿」のカテゴリーや、「固定ページ」などをそれぞれ別のデザインを設定する際は、使用するphpのテンプレートファイルをページごとに専用のレイアウトへ変更することができます。
こうすることで、例えば、カテゴリーで「更新情報」や「セミナー情報」などがあり、2つのレイアウトを別に設定したい場合でも条件分岐のプログラム文を書くことなく、それぞれの記事に別のデザインを設定することができます。
よくWordPressの無料テーマなどをダウンロードすると、使用されているファイルがテーマごとに違うということを目にしたことがある人もいると思いますが、レイアウトの分け方やサイト構成によってファイル構成が変わるので、テーマ毎にファイルが違い初心者の人が悩む原因のひとつになります。
ですので、このテンプレートの種類と役割を覚えることによって、そのテーマがどのようなルールで作られているかなどを理解することができ、より簡単に他の人のテーマや自分でゼロからのサイト作りがしやすくなりますので、是非覚えましょう。
●ページ種類別テンプレート階層
WordPressに初めから用意されているページのテンプレートファイルは下記の図のようになります。
WordPressのテンプレートファイルと優先順位
（▲クリックして拡大）
※WordPressテンプレート階層構造図 （画像は英語版Codex にあります）
URL：http://codex.wordpress.org/Image:Template_Hierarchy.png
このように見ると、テンプレートの数がかなりあり大変そうに思えますが、中小規模のサイトやオリジナルブログなどでは赤枠をつけた6個の種類を使っていくことからやっていきましょう。
これだけでもかなり細かくレイアウトを分けることが可能です。
URL：http://codex.wordpress.org/Image:Template_Hierarchy.png
このように見ると、テンプレートの数がかなりあり大変そうに思えますが、中小規模のサイトやオリジナルブログなどでは赤枠をつけた6個の種類を使っていくことからやっていきましょう。
- index.php
- category.php
- category-slug.php
- single.php
- page.php
- page-slug.php
これだけでもかなり細かくレイアウトを分けることが可能です。
●ページ種類別テンプレート階層の見方
これらは自分で作成するWordPressにどのphpファイルを使うかによって、各投稿記事や固定ページで、どのphpファイルをレイアウトのテンプレートを使用するかを見れる表になります。
例えば、前回作成したindex.phpのみでサイトを作れるというのは、どのページの種類でも最終的に表の右側にindex.phpがその役割を担っているというのがわかると思います。
しかし、役割によって左側にあるファイルが存在する場合は、index.phpではなく、そのファイルを使用する形になります。
例えば、前回作成したindex.phpのみでサイトを作れるというのは、どのページの種類でも最終的に表の右側にindex.phpがその役割を担っているというのがわかると思います。
しかし、役割によって左側にあるファイルが存在する場合は、index.phpではなく、そのファイルを使用する形になります。
●「投稿」を例にした場合のカテゴリー一覧のテンプレート：category.php
以前のエントリーで「投稿」では投稿する記事をカテゴリーに分けるというを勉強したと思います。
参考：WordPressでサイト構築前に行う設定をまとめる（カテゴリー・固定ページ編）
この場合にカテゴリー一覧ページのテンプレートは、「index.php」ではなく、「category.php」を自動的に使用することになります。
したがって、カテゴリー一覧ページ以外は「index.php」をテンプレートとして使用し、カテゴリー一覧ページでのみ「category.php」を使用するというのを条件分岐などを一切記述しないで分岐させることができます。
また「category.php」の左の表を見てみると「category-slug.php」に赤枠をつけたと思いますが、これは「投稿」の記事のカテゴリーごとに別デザインを設定したいという場合に、さらに優先的に分けることができるようになっています。
例えば、更新情報のスラッグ名を「news」として、セミナー情報のスラッグ名を「seminar」とした場合には参照するテンプレートファイルはどちらも「category.php」になります。
しかし、別のデザインで分けたいという場合に条件分岐を自分で書かないでも、「category-news.php」と「category-seminar.php」とすることでそれぞれのファイルで別のデザインを作ることによって自動的に振り分けできることになります。
※また書籍の方ではプログラムでの条件分岐も行なっています。
ブログなどの場合でも複数の投稿者がいて、各人ごとに色やデザインを変えたいという場合にも、それぞれのカテゴリー毎のファイルにしておけばその人専用のデザインとすることができます。
参考：WordPressでサイト構築前に行う設定をまとめる（カテゴリー・固定ページ編）
この場合にカテゴリー一覧ページのテンプレートは、「index.php」ではなく、「category.php」を自動的に使用することになります。
したがって、カテゴリー一覧ページ以外は「index.php」をテンプレートとして使用し、カテゴリー一覧ページでのみ「category.php」を使用するというのを条件分岐などを一切記述しないで分岐させることができます。
また「category.php」の左の表を見てみると「category-slug.php」に赤枠をつけたと思いますが、これは「投稿」の記事のカテゴリーごとに別デザインを設定したいという場合に、さらに優先的に分けることができるようになっています。
例えば、更新情報のスラッグ名を「news」として、セミナー情報のスラッグ名を「seminar」とした場合には参照するテンプレートファイルはどちらも「category.php」になります。
しかし、別のデザインで分けたいという場合に条件分岐を自分で書かないでも、「category-news.php」と「category-seminar.php」とすることでそれぞれのファイルで別のデザインを作ることによって自動的に振り分けできることになります。
※また書籍の方ではプログラムでの条件分岐も行なっています。
ブログなどの場合でも複数の投稿者がいて、各人ごとに色やデザインを変えたいという場合にも、それぞれのカテゴリー毎のファイルにしておけばその人専用のデザインとすることができます。
●「投稿」の記事の詳細ページのテンプレート：single.php
カテゴリーの一覧ページは「category.php」を使用しますが、そこからクリックでそれぞれ個別ページに入った際には「single.php」を使用します。
新着情報やセミナー情報の個別記事をデザインするファイルになります。
しかし、表を見てみるとスラッグ名でのさらに優先度の高いファイルがありません。
これはsingle.phpは元々用意されていないものになりますので、この場合詳細ページのデザインを分ける際は別途条件分岐のプログラム文にて処理します。（詳細は次回以降に行います）
また「個別投稿」の「single-post_type.php」が便利なものになるのですが、いきなりでは少し難しいので、まずはシンプルな形で分岐をしていきます。
新着情報やセミナー情報の個別記事をデザインするファイルになります。
しかし、表を見てみるとスラッグ名でのさらに優先度の高いファイルがありません。
これはsingle.phpは元々用意されていないものになりますので、この場合詳細ページのデザインを分ける際は別途条件分岐のプログラム文にて処理します。（詳細は次回以降に行います）
また「個別投稿」の「single-post_type.php」が便利なものになるのですが、いきなりでは少し難しいので、まずはシンプルな形で分岐をしていきます。
●「固定ページ」の記事の詳細ページのテンプレート：page.php
「固定ページ」で作成したページは「page.php」を使用します。「固定ページ」にはカテゴリーのような一覧はありませんので、「投稿」の「single.php」と同じようなものになります。
しかし、「single.php」と違って「page.php」にはスラッグ名での優先順位の高いテンプレート「page-slug.php」が用意されているてめ、複数のページのレイアウト変更が簡単になっています。
例えば、会社概要のスラッグ名を「company」として、お問い合わせのスラッグ名を「contact」とした場合には参照するテンプレートファイルはどちらも「page.php」になります。
さらに別のデザインで分けたいという場合に条件分岐を自分で書かないでも、「page-company.php」と「page-contact.php」とすることで、それぞれのファイルで別のデザインを作るため自動的に振り分けできることになります。
これら6つのテンプレートだけでも、簡単なビジネスサイトでしたら対応できてしまいます。
自分の作るサイトの「投稿」や「固定ページ」を決めたら、どのテンプレートファイルを使用するかを考えてみると、難しいプログラムの分岐を書かないでも自動的に振り分けてくれるのでノンプログラマーの人でも気軽にWordPressが始められ流行っている理由のひとつではないでしょうか？
しかし、「single.php」と違って「page.php」にはスラッグ名での優先順位の高いテンプレート「page-slug.php」が用意されているてめ、複数のページのレイアウト変更が簡単になっています。
例えば、会社概要のスラッグ名を「company」として、お問い合わせのスラッグ名を「contact」とした場合には参照するテンプレートファイルはどちらも「page.php」になります。
さらに別のデザインで分けたいという場合に条件分岐を自分で書かないでも、「page-company.php」と「page-contact.php」とすることで、それぞれのファイルで別のデザインを作るため自動的に振り分けできることになります。
これら6つのテンプレートだけでも、簡単なビジネスサイトでしたら対応できてしまいます。
自分の作るサイトの「投稿」や「固定ページ」を決めたら、どのテンプレートファイルを使用するかを考えてみると、難しいプログラムの分岐を書かないでも自動的に振り分けてくれるのでノンプログラマーの人でも気軽にWordPressが始められ流行っている理由のひとつではないでしょうか？
●実際のビジネスサイトのサイトマップからテンプレートファイルを確認してみる
以前まとめたビジネスサイトのページ構成を元に実際にどのテンプレートファイルを使うかを見ていきたいと思います。
参考：WordPressでビジネスサイトを作る際はサイト全体の構造を考えよう!
参考：WordPressでサイト構築前に行う設定をまとめる（カテゴリー・固定ページ編）
参考：WordPressでビジネスサイトを作る際はサイト全体の構造を考えよう!
参考：WordPressでサイト構築前に行う設定をまとめる（カテゴリー・固定ページ編）
投稿と固定ページのテンプレートファイルを確認する
（▲クリックして拡大）
これらの基本部分が「投稿」と「固定ページ」となっていますので、先にでてきたテンプレートファイルで振り分ける事が可能です。
テンプレートファイルの振り分けのみで各ページを個別にテンプレートを分けた例
（▲クリックして拡大）
このような分け方をするとファイルを増やすだけで各ページ毎に違ったデザインを設定することができますので、javascriptでの条件分岐やWordPressのphpタグをあまり理解していないうちはこれだけで作成することも可能です。
自分の作成するブログでも、ビジネスサイトでもサイトマップを作り、全体の構成が考えられたあとに実際にどのテンプレートを使っていくかを考えていくことによって、WordPressは非常に簡単なものだなというのがわかってくると思います。
また書籍「WordPress 3.x 現場のワークフローで覚えるビジネスサイト制作」の方では、このやり方だけですとバリエーションが少ないので、テンプレートファイルでの分岐とif文での分岐などさまざまな分岐方法で解説し、すべてのファイルを省略なく載せていますので全くの初心者の人でもWordPressでビジネスサイトを構築することができますので合わせてご覧ください。
WordPress 3.x 現場のワークフローで覚えるビジネスサイト制作
今回はページのテンプレートファイルの種類とまず覚えたいテンプレートファイルの説明を行いました。
自分の作成するブログでも、ビジネスサイトでもサイトマップを作り、全体の構成が考えられたあとに実際にどのテンプレートを使っていくかを考えていくことによって、WordPressは非常に簡単なものだなというのがわかってくると思います。
また書籍「WordPress 3.x 現場のワークフローで覚えるビジネスサイト制作」の方では、このやり方だけですとバリエーションが少ないので、テンプレートファイルでの分岐とif文での分岐などさまざまな分岐方法で解説し、すべてのファイルを省略なく載せていますので全くの初心者の人でもWordPressでビジネスサイトを構築することができますので合わせてご覧ください。
WordPress 3.x 現場のワークフローで覚えるビジネスサイト制作
今回はページのテンプレートファイルの種類とまず覚えたいテンプレートファイルの説明を行いました。
次回はよりサイト制作を効率よくしていくためのモジュールテンプレート（パーツテンプレート）の種類と使い方を説明して行きたいと思います。
●本連載で使用しているサンプルサイトをゼロから作成できる書籍
本書では、(X)HTML+CSSでサイトをつくることはできるものの、「ゼロからのWordPressサイト構築は未経験」、「PHPなどのプログラムはあまりわからない」という方のために、WordPressでビジネスサイトを構築する手法をステップ・バイ・ステップ形式で解説しています。作成するサンプルサイトには、ニュースページ、製品情報ページ、会社概要ページ、お問い合せフォームといったクライアントワークに欠かせない要素が盛り込まれています。
サンプルデータと掲載コードもダウンロードできるので、PHP言語に不慣れな方でも順を追ってステップを進めていけば、WordPressのしくみからテンプレートタグの使い方、カスタム投稿タイプ、固定ページなど、WordPressサイトの制作に必要な知識と技術を身につけられます。
サンプルデータと掲載コードもダウンロードできるので、PHP言語に不慣れな方でも順を追ってステップを進めていけば、WordPressのしくみからテンプレートタグの使い方、カスタム投稿タイプ、固定ページなど、WordPressサイトの制作に必要な知識と技術を身につけられます。
Profile
【林 豊】 1999年よりデジタルハリウッドでWEBコースの講師を担当、2001年に有限会社ムーニーワークス（http://www.moonyworks.com/）を立ち上げWEBの企画・制作、セミナー講師やWEB運用の企業研修なども行っている。
●HTML5でサイトをつくろう：http://www.html5-memo.com/
●Webデザインクリップ：http://webdesignmatome.com/
●jQurey mobileでサイトをつくろうjQuery Mobile：http://jquerymobile-memo.co/
【著書・共著】
●WordPress 3.x 現場のワークフローで覚えるビジ?ネスサイト制作 (2012/9/20)
●WebデザイナーのためのHTML5入門 (2012/08)
●ポケット詳解 jQuery Mobile辞典 (2012/05)
●すべての人に知っておいてほしい HTML5 & CSS3 の基本原則(2012/10/20)
●すべての人に知っておいてほしい スタイルシートデザインの基本原則(2012/5/25)
【林 豊】 1999年よりデジタルハリウッドでWEBコースの講師を担当、2001年に有限会社ムーニーワークス（http://www.moonyworks.com/）を立ち上げWEBの企画・制作、セミナー講師やWEB運用の企業研修なども行っている。
●HTML5でサイトをつくろう：http://www.html5-memo.com/
●Webデザインクリップ：http://webdesignmatome.com/
●jQurey mobileでサイトをつくろうjQuery Mobile：http://jquerymobile-memo.co/
【著書・共著】
●WordPress 3.x 現場のワークフローで覚えるビジ?ネスサイト制作 (2012/9/20)
●WebデザイナーのためのHTML5入門 (2012/08)
●ポケット詳解 jQuery Mobile辞典 (2012/05)
●すべての人に知っておいてほしい HTML5 & CSS3 の基本原則(2012/10/20)
●すべての人に知っておいてほしい スタイルシートデザインの基本原則(2012/5/25)
