第7回 WordPressのテンプレートファイルの種類と使い方を覚える
解説:(有)ムーニーワークス ハヤシユタカ
●テンプレートの種類と役割を覚えることによって簡単にサイト作成ができる
ページによってデザインを変えたりするというようなことは、HTMLやCSSでのように記述すればよいということではなく、javascriptなどで例えるとif文など条件分岐のプログラム文を必要としてきます。
前回の作業ではindex.phpのみで作業した際に、すべてのページをindex.phpのみでも作成できると言いましたが、その場合はすべての条件分岐などを自分で記述しないといけなくなりますので、初めての人にとっては制作の難易度が少しあがります。
そこで覚えたいのが、「WordPressのテンプレートファイルの種類と役割」です。
WordPressで使用する「投稿」のカテゴリーや、「固定ページ」などをそれぞれ別のデザインを設定する際は、使用するphpのテンプレートファイルをページごとに専用のレイアウトへ変更することができます。
こうすることで、例えば、カテゴリーで「更新情報」や「セミナー情報」などがあり、2つのレイアウトを別に設定したい場合でも条件分岐のプログラム文を書くことなく、それぞれの記事に別のデザインを設定することができます。
よくWordPressの無料テーマなどをダウンロードすると、使用されているファイルがテーマごとに違うということを目にしたことがある人もいると思いますが、レイアウトの分け方やサイト構成によってファイル構成が変わるので、テーマ毎にファイルが違い初心者の人が悩む原因のひとつになります。
ですので、このテンプレートの種類と役割を覚えることによって、そのテーマがどのようなルールで作られているかなどを理解することができ、より簡単に他の人のテーマや自分でゼロからのサイト作りがしやすくなりますので、是非覚えましょう。
●ページ種類別テンプレート階層
URL:http://codex.wordpress.org/Image:Template_Hierarchy.png
このように見ると、テンプレートの数がかなりあり大変そうに思えますが、中小規模のサイトやオリジナルブログなどでは赤枠をつけた6個の種類を使っていくことからやっていきましょう。
- index.php
- category.php
- category-slug.php
- single.php
- page.php
- page-slug.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
新着情報やセミナー情報の個別記事をデザインするファイルになります。
しかし、表を見てみるとスラッグ名でのさらに優先度の高いファイルがありません。
これはsingle.phpは元々用意されていないものになりますので、この場合詳細ページのデザインを分ける際は別途条件分岐のプログラム文にて処理します。(詳細は次回以降に行います)
また「個別投稿」の「single-post_type.php」が便利なものになるのですが、いきなりでは少し難しいので、まずはシンプルな形で分岐をしていきます。
●「固定ページ」の記事の詳細ページのテンプレート:page.php
しかし、「single.php」と違って「page.php」にはスラッグ名での優先順位の高いテンプレート「page-slug.php」が用意されているてめ、複数のページのレイアウト変更が簡単になっています。
例えば、会社概要のスラッグ名を「company」として、お問い合わせのスラッグ名を「contact」とした場合には参照するテンプレートファイルはどちらも「page.php」になります。
さらに別のデザインで分けたいという場合に条件分岐を自分で書かないでも、「page-company.php」と「page-contact.php」とすることで、それぞれのファイルで別のデザインを作るため自動的に振り分けできることになります。
これら6つのテンプレートだけでも、簡単なビジネスサイトでしたら対応できてしまいます。
自分の作るサイトの「投稿」や「固定ページ」を決めたら、どのテンプレートファイルを使用するかを考えてみると、難しいプログラムの分岐を書かないでも自動的に振り分けてくれるのでノンプログラマーの人でも気軽にWordPressが始められ流行っている理由のひとつではないでしょうか?
●実際のビジネスサイトのサイトマップからテンプレートファイルを確認してみる
参考:WordPressでビジネスサイトを作る際はサイト全体の構造を考えよう!
参考:WordPressでサイト構築前に行う設定をまとめる(カテゴリー・固定ページ編)
自分の作成するブログでも、ビジネスサイトでもサイトマップを作り、全体の構成が考えられたあとに実際にどのテンプレートを使っていくかを考えていくことによって、WordPressは非常に簡単なものだなというのがわかってくると思います。
また書籍「WordPress 3.x 現場のワークフローで覚えるビジネスサイト制作」の方では、このやり方だけですとバリエーションが少ないので、テンプレートファイルでの分岐とif文での分岐などさまざまな分岐方法で解説し、すべてのファイルを省略なく載せていますので全くの初心者の人でもWordPressでビジネスサイトを構築することができますので合わせてご覧ください。
WordPress 3.x 現場のワークフローで覚えるビジネスサイト制作
今回はページのテンプレートファイルの種類とまず覚えたいテンプレートファイルの説明を行いました。
●本連載で使用しているサンプルサイトをゼロから作成できる書籍
サンプルデータと掲載コードもダウンロードできるので、PHP言語に不慣れな方でも順を追ってステップを進めていけば、WordPressのしくみからテンプレートタグの使い方、カスタム投稿タイプ、固定ページなど、WordPressサイトの制作に必要な知識と技術を身につけられます。
【林 豊】 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)