WordPressをカスタマイズするなら絶対覚えておきたいテンプレートファイルの使い方

Posted under - WordPress

95

WordPressを使い始めた頃は、テンプレート階層、テンプレートファイルの上手な使い方などは、全く考えずに Webサイトを作ってました。 いまではもっと効率的に、もっとスマートにサイトを構築できるようになったかも!そのためにちょっと覚えておきたい、テンプレートファイルについてのあれこれをご紹介します。

WordPress template files

WordPress というと、ブログ構築のための CMS(コンテンツマネージメントシステム)というイメージが強いですけど、一般的な Webサイトを作るの時にもとっても便利です。私も仕事で Webサイトを作る時に、WordPress で作成することがとても多いです。

WordPress はバージョンも 3.0 になって、カスタム投稿タイプカスタムメニューなど、さらに CMS としても充実してきたように思います。

ブログと違って一般的な Webサイトは、そのサイトによって仕様が様々です。コンテンツが静的なものもあれば流動的なものもあるし、時系列は関係なかったり、ページごとにデザインが変わったりなどなど …。

そんな Webサイトを WordPress で構築する時に、知っておくと便利な、WordPress のテンプレートファイルテンプレート階層というものを、復習もかねてご紹介します。もちろんブログを作る時にも少なからず必要になることなので、これから WordPress でブログを作ってみようかな … という人にも。読んでもらえたらなーと思います。

また、WordPress で Webサイトを構築する時に、無料のテーマをカスタマイズしていくことも多いと思いますが、テンプレートファイルについて知っておくと、カスタマイズももっと効率的にできるようになるかもしれませんね!

WordPressのテンプレートファイル 目次

1. WordPressのテーマを作る時に必ず必要なもの

WordPress のテーマを作成するときには、テーマに必ず必要となるものと、テーマによっては必要のないものがあります。WordPress Codex によると、テーマに必ず必要不可欠なものは、以下の 3つだそうです。

  1. サイトのスクリーンショット(画像)
  2. style.css(スタイルシート)
  3. テンプレートファイル(PHPによって書かれたファイル群)

スクリーンショットは、管理画面でテーマの外観を表示するための画像ですね。style.css は、Webサイトの外観を装飾するためのスタイルシートです。3番目の “テンプレートファイル” が、今回の記事のテーマです。

2. WordPressのテンプレートファイル

まずテンプレートファイルって何でしょう?WordPress 3.x をダウンロードすると、デフォルトでついてくる TwentyTen というテーマ。そのテーマフォルダの中をのぞいて見ると、こんな感じにたくさんのファイルやフォルダがありますよね。

TwentyTen

TwentyTenのテーマフォルダ

ずらずらーっとファイルが並んでます …。この中には、先ほど絶対必要と紹介した style.css(スタイルシート)はもちろん、screenshot.png(画像)も含まれてます。ではテンプレートファイルってどれのことでしょう?TwentyTenではとても多くのテンプレートファイルが使われています。

  • 404.php, archive.php, attachment.php, author.php, category.php
  • comments.php, footer.php, header.php, loop.php, search.php
  • index.php, page.php, onecolumn-page.php, sidebar-footer.php
  • tag.php, sidebar.php, single.php
    (並び順に意味はありません。)

これらが TwentyTen のテンプレートファイルです … たくさんありますね …。この他にもテーマフォルダの中には、画像をまとめた imagesフォルダや、言語ファイルがはいった languageフォルダ、その他の cssファイルとテーマ関数ファイルである functions.php などがあります。

WordPress のテーマを作るって、こんなにファイルを作んなきゃならないの?と思っちゃうかもしれませんが、実はそうではありません。ポイントは、これら全てが必ず必要という訳ではなくて、サイト設計によって必要なテンプレートは変わってくるということなんです。

例えばこのブログ、Webデザインレシピでは、10個のテンプレートファイルでできています。Tewnty Ten よりぐっと少ないですね!

極端な例でいうと、テンプレートファイルは index.php 1枚と、スタイルシート style.css だけでも OK なんです。もちろんそれだけでは表現(デザイン、レイアウト)の自由度が少ないので、他のテンプレートファイルを使って色んな表現をしていきます。

3. TOPページをつくる

3.1 テンプレートファイル:index.php

特に指定がない場合、基本的には index.php がトップページになります(他のテンプレートファイルをトップページにすることもできますが、それは後述しますね)。でも気をつけておきたいのは、index.php はトップページだけでなく、色んなページを動的に作ってくれるってこと。index.php は、WordPress では絶対になくてはならないテンプレートファイルなんです。

3.2. テンプレートファイル:header.php、footer.php、sidebar.php

さっきは index.php と style.css だけで、Webサイトができてしまうと書きました。それでは header.phpfooter.phpsidebar.php とは何でしょう?一般的に Webサイトには、ヘッダー、フッター、サイドバーがありますよね。

簡単に言ってしまえば、ヘッダーは header.phpフッターは footer.phpサイドバーは sidebar.php に分けちゃったということです。

そうなんです。WordPress では、テンプレートファイルから別のテンプレートファイルを読み込むことができるんです。この場合でいうと、index.php というテンプレートファイルから、header.php、footer.php、sidebar.php を読み込んで、最終的にひとつの Webページを表示します。バラバラに分けた部品をくっつけて表示するってイメージです。

index.php から、header.php、footer.php、sidebar.php を読み込む
index.php から、header.php、footer.php、sidebar.php を読み込む

この部品をくっつけて … という考え方は、WordPress で Webサイトを作る時にはとっても大事な考え方で、作成やメンテナンスも効率化してくれる素晴らしいアイデアですね!

仮に index.php とは別に、9個のテンプレートファイルを使っていたとします。それぞれのテンプレートファイルには、ヘッダーもフッターもサイドバーも直接書かれていたとします。この Webサイトのロゴをちょっと変更したいなーってなった時に、ヘッダー内のコードを書き換える必要がありますよね?そんな時のことを考えてみてください。

index.php を含め、10 個全部のテンプレートファイルの、ヘッダー内のコードを書き換えなくてはなりません …。でも部品として header.php を読み込む … という構造にしておけば、header.php 1枚を書き換えるだけで、作業は終了してしまいますね!

静的な Webサイトと違って、WordPress は動的に HTML を吐き出しますから、1つのテンプレートファイルを条件分岐などで上手に組み立てれば、それ 1個でたくさんのページ、デザインを作ることができます。

4. 部品化されたテンプレートファイル

前述したようにして、部品として WordPress のテンプレートファイルを作っておくと、Webサイトを構築する上でとてもメリットがあります。TwentyTen のテンプレートファイルには、こんな感じで部品化されたテンプレートファイルがいくつかあります。

heade.php、footer.php、sidebar.php、sidebar-footer.php、search.php、comments.php、loop.php

これらが部品にあたるテンプレートファイルです。これらのテンプレートファイルが、TwentyTen の中でどんな風に使われてるかをそれぞれ見てみると …

header.php
その他のファイルから呼び出され、ヘッダー部分を出力
footer.php
その他のファイルから呼び出され、 フッター部分を出力
sidebar.php
その他のファイルから呼び出され、 サイドバー部分を出力
sidebar-footer.php
footer.phpから呼び出されてフッターの半分を出力
search.php
sidebar.phpから呼び出されて検索フォームを出力
comments.php
single.php(後述)から呼び出されてコメント部分を出力
loop.php
その他のファイルから呼び出され、ループ(後述)を出力

こんな風にそれぞれのテンプレートファイルから、別のテンプレートファイルを読み込んでいます。もしサイドバーがない Webサイトなら sidebar.php は必要ないし、検索フォームが必要ないなら search.php も必要ありませんよね。なので Webサイトの構造によって、必要なテンプレートファイルは変わってきます。

4.1. WordPressのループ

さっきループっていう言葉が出てきたので、ここでちょっと寄り道です。

WordPress のループ

<?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>

    /* ループスタート! */
   <div class="post">
    ... ここにコンテンツ ...
   </div>

  /* ここまでをループ */
  <?php endwhile; ?>
<?php else : ?>
  <h2>Not Found</h2>
   <p>ごめんなさい ... 記事がありませんでした ...</p>
<?php endif; ?>

WordPress では該当する記事があれば while ~ endwhile までの間を、ループして出力します。なければ Not Found を表示します。Twenty Ten ではこのループを loop.php として部品化しています。WordPress のテンプレートタグには、ループ内で使うものとループ外で使うものがあるので、ループは少なからず意識する必要があります。

5. 個別の記事ページ(post)

5.1. テンプレートファイル:single.php

さっきはトップページと、それに必要な部品的なテンプレートファイルを見てきました。次に個別の記事ページを見て行きます。個別の記事ページというのは、今あなたが見ているこのページのことです。

ブログでいうと、個々のコンテンツのページのこと。WordPressでは post(ポスト)って呼んだりします。

WordPress では、個別の記事ページは single.php(他にもあるので後述しますね)というテンプレートファイルを使っています。single.php は、さっき紹介した部品的なテンプレートファイルではありません。ページそのものを出力するテンプレートファイルです。index.php などから個別記事へのリンクをクリックすると、WordPress は single.php を探しにいって、そして single.php で個別記事ページを出力します。

WordPress は、リンクをクリックしてページを移動すると、使うべきテンプレートファイルを自動で読み込んでくれます。この WordPress の動きには一定のルールがあって、それぞれ読み込もうとするテンプレートファイルは決まっています。

これは WordPress のテンプレート階層といいます。サイトを構築していくとき、このテンプレート階層は必ず意識して作成しなくてはいけません。後で詳しく紹介するので、今はテンプレート階層という言葉だけ覚えておいてください。

single.php も index.php と同じように、header.php、footer.php、sidebar.php などを読み込んでいます。個別記事ページでは、コメントフォームや寄せられたコメントを表示する部分もあるので comments.php も読み込みます。

これで基本的なブログは完成しちゃいました。では TwentyTen の中にある他のテンプレートファイルは使わないの?ってことになっちゃいますよね。

single.php もそうなんですけど、これら他のテンプレートファイルは、いろんなページのデザインを柔軟にするために使われています。ですので必ずしも必要という訳ではありません。でも、ブログをもっと素敵にカスタマイズしたり、Webサイトを構築していくためには、積極的に使っていきたいのが色んなテンプレートファイルです。

ではその他のテンプレートファイルにどんなものがあるのか、Webサイトを WordPress で構築する上で覚えておきたいルールなども交えながら見ていきましょう。

6. 固定ページ(page)

6.1. テンプレートファイル:page.php など

このブログ、Webデザインレシピでも、WordPress の固定ページという機能を使っています。ページという言い方はちょっと混乱してしまいますが、WordPress にはブログの記事ページとは違う、独立したページがあります。これを固定ページと呼んでいます。(また、WordPressではブログの記事は「ポスト」、固定ページのことを「ページ」と呼ぶこともあります。)

WordPress のテーマをダウンロードすると、通常この固定ページを作るためのテンプレートファイルが 1枚あるはずです。それが page.php という名前のテンプレートファイルです。page.php は、固定ページのデフォルトテンプレートとして、テンプレートの選択部分に表示されます。

固定ページを編集画面

固定ページのテンプレート

「固定ページを編集」画面の右側、テンプレートのデフォルトテンプレートというのが、page.php のことです。

このブログでは、固定ページで AboutContact のふたつのページを作成しています。

About と Contact
<<Prev
Next>>

でもこのふたつは page.php を使ってなくて、それぞれ about.phpcontact.php というふたつのテンプレートファイルを作成しました。これらの名前は任意の好きな名前を付けることができます!ふたつ作成したのは、このふたつのページのデザイン、レイアウトが違ったからです。

同じレイアウトやデザインであれば、複数のコンテンツ作るのに、必要な固定ページ用のテンプレートファイルは 1枚で OK です。固定ページ用テンプレートファイルの作り方はとっても簡単です。テンプレートファイルの冒頭に以下のように書くだけです。

example.php
<?php
/*
Template Name: About(任意の名前)
*/
?>

このようにコメントとすれば、管理ページ → 固定ページ → 新規作成 で、デフォルトテンプレートとは別に About が選べるようになります!

6.2. どんなコンテンツが固定ページ向きなの?

固定ページは、このブログの AboutContact のように、静的(実際はデータベースからデータを拾ってきて表示しているので、動的ですが …)なコンテンツを作成するのに向いている … といわれてます。もちろんテンプレートファイルの中には PHP のコードを書くことができるので、静的なページだけでなく動的なコンテンツにすることも可能です!

でも、固定ページを使えば何でもできるの?ていうと、実はそうでもありません。次のことを頭に入れておくと、サイト設計時に固定ページを使うのか、ブログのポストを使うのか、カスタム投稿を使うのかの判断材料になると思います。

  • 固定ページは階層、親子関係を作ることはできますが、カテゴリー分け、タグの割り振りなどはできません。
  • 時系列に沿ったコンテンツを作るなら、固定ページよりブログポストの方が向いてます。
  • 基本的に固定ページの投稿内では、PHP のコードは使えません。ショートコードは使えます(プラグインを使用すれば PHP も使えます)。
  • 投稿内でPHPを使えるようにするプラグイン

    Exec-PHP, RunPHP

固定ページでは、カテゴリー分けやタグの振り分けができないので、使いどころが制限されるかもしれませんね。どちらかというと時系列の関係ないものや、静的なコンテンツ作成に向いてる感じがしますねー。

MEMO

カスタムタクソノミー(カスタム分類)という機能を使えば、固定ページでもカテゴリー分けのような分類をすることができます。

ちなみに固定ページで作ったページは、Webサイトのトップページに指定することができます。通常トップページは index.php になりますが、管理画面 → 設定 → 表示設定 から、任意の固定ページをトップページに指定することができます。

7. テンプレートファイルとテンプレート階層

7.1. TOPページ

トップページ

前述したように、固定ページで作ったページをトップページに指定していない場合、WordPress は次のようなテンプレート階層によってページを表示していきます。

テンプレート階層とは、WordPress がテンプレートファイルを読み込む優先順位みたいなものです。例えばこのブログのトップページである、http://webdesignrecipes.com/ にアクセスすると、WordPressは 次のような順番でテンプレートファイルを読みにいきます。

  1. home.php
  2. index.php

ここではじめて home.php というテンプレートファイルが登場しました。固定ページでトップページを指定していない場合は、WordPress は index.php よりも先に、home.php というテンプレートファイルを探しにいきます。

なので Webサイトのトップページをカスタマイズするのに index.php ではなくて home.php というテンプレートファイルを作成するのも、ひとつの方法ですね!何となくテンプレート階層とテンプレートファイルの関係 … というのが分かってきましたか?

WordPress で Webサイトを作成する上で、このテンプレート階層とテンプレートファイルの関係は、頭に入れておくときっと役に立ちますよー!

それじゃあ home.php を作ったら index.php は必要ないの? … いえ、そういうわけではありません。例えばこのブログの、カテゴリーやタグをクリックした場合、index.php によってページが出力されています。テンプレート階層のルールに従って、優先すべきテンプレートファイルがない場合は、どんなページでも最終的に index.php が使われます。

カテゴリーをクリックした時、もし category.php があれば category.php が使われて、index.php は使われません。タグをクリックしたとき、アーカイブを表示する場合も全く同じです。index.php より優先するべきテンプレートファイルがあれば、index.php は使われません。

例えばこのブログの場合は、カテゴリーをクリックしても、タグをクリックしても、出力されるページのデザインはほとんど変えていないので、わざわざ専用のテンプレートファイルを作る必要がなかったって感じです。

7.2. カテゴリーページ、タグページ

カテゴリーページ

もしカテゴリーページ(カテゴリー内の記事の一覧表示ページ)のデザインを変更したいなら、category.php を作ります。そうすると WordPressは、index.php よりも先に category.php を読み込みます。でも、カテゴリーはもっと細かく、IDやスラッグによってテンプレートファイルを分けることができます。これは Webサイトのデザインの自由度を幅広くしてくれて、とってもうれしいですよね!

例えば以下のようなカテゴリーがあったとします。

写真
カテゴリー ID – 1:スラッグ – photo
デザイン
カテゴリー ID – 2:スラッグ – design
アート
カテゴリー ID – 3:スラッグ – art

この場合、WordPress は次のようなテンプレート階層(順番)に従って動きます。

  1. category-slug.php
    (例の場合は category-photo.php, category-design.phpなど)
  2. category-ID.php
    (例の場合は category-1.php、category-2.phpなど)
  3. category.php
  4. archive.php
  5. index.php

タグページも、上記の categorytag にするだけで、同じように動きます。こういうテンプレート階層とテンプレートファイルの関係を知っておけば、「この場合のデザインはこうしたいから、このテンプレートファイルを作ろう!」とか、「これは同じデザインでいいから、同じテンプレートファイルでいいや」… というようなサイト設計もできるようになります。

8. クエリベースのテンプレート

WordPress で Webサイトを構築するときに、カテゴリーを利用してコンテンツを整理することがあります。例えば次のようなナビゲーションがあって、それぞれのメニューはカテゴリーによって分けられているとします。

このような場合でも、さっきのカテゴリーページのテンプレート階層で見た、category-slug.phpcategory-ID.php というテンプレートファイルを使えば、カテゴリーごとに違うデザインを施すのが簡単になります。

でも上記の場合は、あくまでカテゴリーごとの一覧表示ページです。どうせなら、個別のコンテンツページ(ブログでいう個別の記事)のデザインも、カテゴリーごとに変更したい場合があると思います。

でも残念ながら個別記事を表示する single.php には、カテゴリーを指定するテンプレート階層はありません。single.php のテンプレート階層の順番は以下の通りです。

  1. single-{post_type}.php
    これは3.0以降で登場したカスタム投稿用のテンプレートファイルです。
    (カスタム投稿タイプについては後述します。)
  2. single.php
  3. index.php

カスタム投稿ではテンプレート階層によるテンプレートファイルが指定できますが、カテゴリーやタグでの指定はできません。なのでカテゴリーごとに single.php を変更したい場合には、条件分岐をうまく使って、別のテンプレートファイルを読み込むようにします。

single.php
<?php
if (in_category(photo)) {
   /* カテゴリスラッグ photo */
   include(TEMPLATEPATH . '/single-photo.php');
}
elseif (in_category(design)) {
     /* カテゴリスラッグ design */
   include(TEMPLATEPATH . '/single-design.php');
}
elseif (in_category(art)) {
     /* カテゴリスラッグ art */
   include(TEMPLATEPATH . '/single-art.php');
}
else {
   /* 他のカテゴリの投稿 */
   include(TEMPLATEPATH . '/single-org.php');
}
?>

上の例では single.php 内で条件分岐させて、カテゴリーごとに作成しておいた single-slug.php(または single-ID.php )などを読み込んでいます。

こうすることで個別記事のデザインも、カテゴリーごとに変更することができる …という訳ですね!注意するのは、ご存知の通り WordPress の個別投稿には複数のカテゴリーを設定することができます。その場合は、カテゴリーIDの若い順に反映されるので注意が必要です。

今回の例では、条件分岐を使ってテンプレートファイルを丸ごと読み込んでいますが、デザインの一部だけ変更したい場合などは、1枚のテンプレートファイル内で条件分岐してスタイルを変更した方が、後々のメンテナンスもしやすいと思います。

このブログのヘッダーも、カテゴリーやタグ、個別ページによってデザインを変更していますが、header.php は 1枚で済ませています。それぞれの用途に合わせて工夫してみてくださいね!

9. カスタム投稿タイプ

固定ページ、カテゴリーによるコンテンツごとのテンプレートファイルなどを見てきましたが、WordPress3.0 からは、カスタム投稿タイプという機能も追加されて、CMS としての幅がさらにアップしました。従来のブログ記事(ポスト)、固定ページ(ページ)に加えて、自分で好きな投稿タイプを追加できるようになっています。

カスタム投稿タイプという名前からだとちょっとイメージしにくいかもしれませんが、乱暴な言い方をすれば、もうひとつ(もちろん複数も OK)ブログのような投稿を増やせるようになりました。

別にそんなの必要ないんじゃないのって声も聞こえそうですけど、アイデア次第で色んな使い方ができると思います。例えば様々な商品を紹介する必要があった場合、商品の個別ページには、カスタム投稿タイプを使ったりすると、管理もけっこう簡単です。

例えば iPhone関連 というカスタム投稿と、iPad関連 といカスタム投稿タイプをふたつ作れば、それぞれの関連商品を個別に投稿できますし、その中でさらにカテゴリー分けのように、カスタム分類(カスタムタクソノミー)することもできます。

iPhone 関連の投稿タイプの中で、iPhoneケース、iPhoneスタンド、iPhone周辺機器などに分類整理することも簡単です。

カスタム投稿追加時の管理画面


カスタム投稿タイプにもテンプレート階層があります。アーカイブ表示(一覧表示)の場合はこんな感じです。

  1. taxonomy-{taxonomy}{term}.php
    例えば分類名が “iphone”、スラッグが “case” の場合は taxonomy-iphone-case.php
  2. taxonomy-{taxonomy}.php
    例えば分類名が “ipad” の場合は taxonomy-ipad.php
  3. taxonomy.php
  4. archive.php
  5. index.php

個別記事の場合は前述した通り、テンプレート階層は以下のようになります。

  1. single-{post_type}.php
  2. single.php
  3. index.php

カテゴリーの時の single.php のように条件分岐を使わなくても、テンプレート階層によってカスタム投稿タイプごとにデザインを変更するのも簡単ですね。

10. カスタムメニュー

Webサイトに必要不可欠なのがナビゲーションメニューですよね!WordPress には、固定ページをリスト表示するテンプレートタグ、wp_list_pages や、カテゴリーをリスト表示する wp_list_categories があります。

でも固定ページやカテゴリーなどを混ぜ合わせて Webサイトを構築していくと、これらをそのまま使うと思うような並び順にならなかったり … いろいろと厄介でした。テンプレートファイルに XHTML を直に書いた方が早かったりして。

でも WordPress 3.0 からは、カスタムメニューという、メニューを自在にカスタマイズできる新機能がつきました!これを使えば上記のような悩みも解消されます。

最初からカスタムメニューに対応しているテーマももちろんありますが、自作したテーマなどの場合、この機能を使えるようにしなくてはありません。でもカスタムメニューを使えるようにするのはとっても簡単で、functions.php に以下の一行を追加するだけです!

functions.php
<?php add_theme_support('menus'); ?>

これでカスタムメニューをダッシュボードで作成できるようになります。あとはテーマ内、通常であれば header.php のナビゲーションを表示したい部分に

<?php wp_nav_menu(); ?>

とすれば OK です!

カスタムメニューの使い方はとっても簡単です。ダッシュボード → 外観 → メニュー から、簡単に設定することができます!

カスタムメニュー

カスタムメニュー

管理ページから、簡単にナビゲーションを作ることができます!

11. テーマ関数ファイル functions.php

functions.php … これは名前の通り、テーマ(管理画面での機能追加なども含む)で使う関数を書いておくファイルです。もちろん関数がひとつもなければ必要ありませんが、実際は functions.php がないテーマはないんじゃないかな?

functions.php はとっても便利な関数ファイルで、テーマ内でわざわざ読み込みを指定しなくても WordPress が勝手に読みにいってくれます。自作の関数など、こちらに書き込めば、どのテンプレートファイルでも使えるのでとっても便利!


いろんなテンプレートファイルと、ポスト、ページ、カスタム投稿などを見てきましたが、WordPress は工夫とアイデア次第で、本当にいろんな Webサイトが作れちゃう CMS ですね!まだまだいろんな可能性を秘めた WordPress …。どんどん高機能になってついていくのもやっとですが、これからもしばらくお世話になりそうです ;D

Comments

Thank you for the comment.