WordPressのテンプレートファイルの種類と使い方を覚える｜WordPressでビジネスサイトをつくろう【第7回】

前回、WordPressのタグの基本やbloginfoタグを使用して自分のサイト情報の取得などをしました。phpといっても普通のHTML同様に特にプログラムということを意識せずにできたと思いますが、これからWordPressサイト制作をしていく際に、「記事毎にデザインを変える」、「特定のものだけを表示させる」などということをしていきます。

その際にWordPressのテンプレートファイルの種類と役割を覚えると条件分岐文のプログラムで記述しないでも自動的に分岐をしてくれるので簡単に条件にあわせたサイト作りをすることができますので、テンプレートファイルの種類と役割をまとめていきたいと思います。

テンプレートの種類と役割を覚えることによって簡単にサイト作成ができる

WordPressでビジネルサイトを作成する際などは、ブログなどと違ってページ内容毎に異なったデザインで作成していくことが多くあります。

ページによってデザインを変えたりするというようなことは、HTMLやCSSでのように記述すればよいということではなく、javascriptなどで例えるとif文など条件分岐のプログラム文を必要としてきます。

前回の作業ではindex.phpのみで作業した際に、すべてのページをindex.phpのみでも作成できると言いましたが、その場合はすべての条件分岐などを自分で記述しないといけなくなりますので制作の難易度が初めての人にとっては少しあがります。

そこで覚えたいのが、「WordPressのテンプレートファイルの種類と役割を覚える」にいうことになります。

WordPressで使用する「投稿」のカテゴリーや、「固定ページ」などをそれぞれ別のデザインを設定する際などは、使用するphpのテンプレートファイルによってページ毎に専用のレイアウトにすることができます。

こうすることで例えば、カテゴリーで「更新情報」や「セミナー情報」などがあり、2つのレイアウトを別に設定したい場合でも条件分岐のプログラム文を書くことなくそれぞれの記事に別のデザインを設定することができます。

よくWordPressの無料テーマなどをダウンロードすると、使用されているファイルがテーマ毎に違うということを目にしたことがある人もいると思いますが、レイアウトの分け方やサイト構成によってファイル構成が変わるのでテーマ毎にファイルが違い初心者の人が悩む原因の一つになります。

ですので、このテンプレートの種類と役割を覚えることによって、そのテーマがどのようなルールで作られているかなどを理解することができ、より簡単に他の人のテーマや自分でゼロからのサイト作りがしやすくなりますので是非覚えましょう。

ページ種類別テンプレート階層

WordPressに初めから用意されているページのテンプレートファイルは下記の図のようになります。

※クリックして大きな画像をみる

※WordPressテンプレート階層構造図 （画像は英語版Codex にあります）
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ではなく、そのファイルを使用する形になります。

「投稿」を例にした場合のカテゴリー一覧のテンプレート：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」とすることでそれぞれのファイルで別のデザインを作ることによって自動的に振り分けできることになります。

※また書籍の方ではプログラムでの条件分岐も行なっています。

ブログなどの場合でも複数の投稿者がいて、各人毎に色やデザインを変えたいという場合にも、それぞれのカテゴリー毎のファイルにしておけばその人専用のデザインとすることができます。

「投稿」の記事の詳細ページのテンプレート：single.php

カテゴリーの一覧ページは「category.php」を使用しますが、そこからクリックでそれぞれ個別ページに入った際には「single.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が始められ流行っている理由の一つではないでしょうか？

実際のビジネスサイトのサイトマップからテンプレートファイルを確認してみる

以前まとめたビジネスサイトのページ構成を元に実際にどのテンプレートファイルを使うかを見ていきたいと思います。

【参考】
WordPressでビジネスサイトを作る際に、サイト全体の構造を考えよう！

はじめてWordPressを使用する際に行う設定をまとめる（カテゴリー・固定ページ編）

これらの基本部分が「投稿」と「固定ページ」となっていますので、先にでてきたテンプレートファイルで振り分ける事が可能です。

※クリックして大きな画像をみる

このような分け方をするとファイルを増やすだけで各ページ毎に違ったデザインを設定することができますので、javascriptでの条件分岐やWordPressのphpタグをあまり理解していないうちはこれだけで作成することも可能です。

このように自分の作成するブログでも、ビジネスサイトでもサイトマップを作り、全体の構成が考えられたあとに実際にどのテンプレートを使っていくかを考えていくことによって、WordPressは非常に簡単なものだなというのがわかってくると思います。

また書籍「WordPress 3.x　現場のワークフローで覚えるビジネスサイト制作」の方では、このやり方だけですとバリエーションが少ないので、テンプレートファイルでの分岐とif文での分岐などさまざまな分岐方法で解説し、すべてのファイルを省略なく載せていますので全くの初心者の人でもWordPressでビジネスサイトを構築することができますので合わせてご覧ください。

書籍「WordPress 3.x　現場のワークフローで覚えるビジネスサイト制作」のサンプルと詳細はこちら

今回はページのテンプレートファイルの種類とまず覚えたいテンプレートファイルの説明を行いました。

次回はよりサイト制作を効率よくしていくためのモジュールテンプレート（パーツテンプレート）の種類と使い方を説明して行きたいと思います。