WordPressでブログじゃないWebサイトを作るときのいろいろ（サンプル付き）

WordPressでブログじゃないWebサイトを作るときのいろいろ（サンプル付き）
86

とても長い記事になってしまいましたが、WordPress を使って、コーポレートサイトのサンプルを作ってみました。WordPress はブログだけじゃなくて、色んなWebサイトが作れますよね！今回は、私がWordPressでサイトを作る時にやっていることをまとめてみました。

今までこのブログの中で、いろいろな WordPress の Tips を書いてきました。でも WordPress を使った Webサイトの作り方そのものは、今まで書いた事がありませんでした。そこで今回は、 WordPress を使ってブログじゃない Webサイトをまるごとひとつ作って、私なりの作り方をまとめてみました。

今回のサンプルサイトでは、WordPress の固定ページ機能はもちろん、カスタム投稿タイプやカスタムタクソノミー（カスタム分類）を使って作っています。

ページを表示する為に使っているテンプレートファイル（index.php とか single.php とかのこと）の使い方も、私なりの使い方をしています。なので、こんな風に使うもの … というものではありません。あくまで私が仕事で WordPress サイトを作るときのやり方みたいなものをまとめたものです。

もしこの記事の中で、こういう場合はこうした方がいいよー！というような事があったら、教えていただけると嬉しいです。

WordPress でサイト構築：目次

  1. 目標とする Webサイト
  2. WordPress の 固定ページ
  3. トップページを作る
  4. カスタム投稿タイプで「お知らせ」ページを作る
  5. 「お知らせ」カスタム投稿タイプ用の single.php
  6. 「お知らせ」カスタム投稿の一覧を表示しよう
  7. メインループだけを変更する query_posts
  8. 1ページの中で複数のループを使う その1
  9. ブログのトップページを作る
  10. カスタム投稿タイプで「製品」ページを作る
  11. カスタム分類（タクソノミー）
  12. 製品（カスタム投稿）の個別記事用の single.php
  13. 1ページの中で複数のループを使う その2
  14. index.php は何に使うの？
  15. ブログの個別記事 single.php、404ページの404.php
  16. カスタムメニューを使って、ナビゲーションを作る
  17. body_class() がとっても便利！
  18. ループ内でしか使えない関数、ループ外でも使える関数
  19. WordPress で jQuery を読み込む

1. 目標とする Webサイト

※サンプルなので、サイトの会社は実在しません。また、サイト内で使っている画像は、ロイヤリティーフリーの素材集のものです。

目標とするサンプル Webサイトの完成図です。Webサイトはコーポレートサイトで、概要は以下のような感じです。

名前：グリーンコーポレーション

  • 家具の製造販売、インテリアの会社
  • 事業内容や会社案内、店舗案内、製品（家具）の紹介をする
  • お問い合わせフォームをつける
  • 簡単な「お知らせ」を告知したい
  • 「新製品」が出たら更新したい
  • 製品（家具）はお部屋のタイプ、家具の種類で検索できるようにしたい
  • ブログをやりたい

サンプル

上記のようなコーポレートサイトを作成する事を目標にして、お話を進めていきます。またページを作りながら、そのページで使っているテンプレートファイルやコードも、サイトの概要を示したサイトマップとともに紹介していきますね！

また、サンプルサイトでは、そのページに使われているテンプレートファイルを明示してあるので、合わせて見てみてくださいね！

↑ WordPressでサイト構築 目次へ

1.1. サンプルサイトのサイトマップ

まずサンプルサイトは、家具の製造、販売などのインテリアの会社のコーポレートサイトです。事業内容や会社案内の他、取り扱っている「製品」（家具）を閲覧できたり、簡単な「お知らせ」をWebサイト上で告知できるようにします。また「ブログ」も付けたいと思います。

サイトに掲載する取り扱い製品は、新しいものが出ればブログのように更新していく感じです。

サイトマップ

サイトマップ

「お知らせ」と「製品ページ」は、更新っていうより追加って感じですね！ブログを更新するみたいに、新しい製品やお知らせが出来たら更新するっていう意味です。

その他のページに関しては、基本的に内容が変わる事はあんまりなさそうですねー。なので固定ページ（後述しますね！）で作ってしまってしまうことにします。

↑ WordPressでサイト構築 目次へ

2. WordPress の 固定ページ

固定ページ … WordPress でブログじゃないWebサイトを作るなら、固定ページ機能を必ずと言っていい程使うと思います。固定ページというのは、いつもその場所に固定されて配置されているページという意味です。

たとえばこのブログ、Webデザインレシピでは、About と Contact という 2つの固定ページがあります。これはヘッダー付近にナビゲーションを作ってあって、いつでもサイト内の特定の場所に固定されて配置されてるって感じです。

↑ WordPressでサイト構築 目次へ

2.1. 固定ページの親子関係

ご存知のように WordPress では、ブログ記事とは別に固定ページを簡単に作る事ができますよね！そしてこの固定ページには、親子関係も作れるので、ブログじゃない Webサイトを作るには必須の機能ですよね。固定ページの作り方はご存知だと思うのでここでは省略しますけど、親子関係が作れるという事だけ補足しておきます。

このサンプルサイトでも、いくつか親子関係にある固定ページを作りました。

固定ページの親子機能

親子関係を付けるのはとっても簡単です。固定ページの投稿画面の右端、ページ属性から、親になるページを選んであげるだけですね。

固定ページのページ属性


↑ WordPressでサイト構築 目次へ

2.2. 使うファイルを選べるテンプレート

また、固定ページはテンプレートを選ぶ事もできます。これについては後述しますね！今回はほとんどのページでデフォルトテンプレートを使っています。

デフォルトテンプレートというのは、テンプレートファイルいうと page.php のこと。これを使って、サイトマップ内の以下のページができてしまいました！

固定ページ（page.php）で作ったページ

サイトマップ

固定ページと親子関係の機能を使って、上記のページを作る事ができました。ここまでは簡単ですね。下記にリンクを少し貼っておくので、どんな感じになるか見てみてください。

基本的には静的な HTML でできたページと同じ様に見えるはずです。とくに動的に更新される部分もないので、作りやすいページだと思います。

固定ページの一例

↑ WordPressでサイト構築 目次へ

3. トップページを作る

順番的に2番目になってしまいましたが、今度はトップページを作ってみます。ブログの場合は、普通 index.php がトップページになりますよね！ブログでは記事を一覧表示してトップページとすることが多いので、index.php でも十分です。でも、ブログじゃないWebサイトの場合は、別にトップページを作った方が良さそうですよねー。

ではトップページはどうやって作ればいいでしょうか？トップページを作る方法の選択肢はふたつありますよね。

  • 固定ページを使う
  • home.php を使う
↑ WordPressでサイト構築 目次へ

3.1. トップページに固定ページを使う

まずは固定ページを使う場合です。これは管理画面の 設定 → 表示設定 から、固定ページをフロントページ（ホーム）として選びます。もちろん事前に固定ページ機能を使って、ひとつ固定ページを作っておく必要があります。

表示設定でフロンドページを選択

↑ WordPressでサイト構築 目次へ

3.2. home.php を使う

もうひとつは home.php というテンプレートファイルを使う方法です。前述した方法で、固定ページをフロントページを指定していない場合、WordPress は基本的に index.php をトップページとして表示します。でも、home.php というテンプレートファイルがテーマ内にあると、WordPress は index.php ではなくて、home.php でトップページを表示してくれるんです！

特定のページに対して、使用するテンプレートファイルに優先順位がある感じです。これを WordPress では、テンプレート階層と呼んでいて、トップページだけでなく色んなページに対して、どのテンプレートファイルを使うか？という優先順位が存在します。

トップページのテンプレート階層

  1. home.php
  2. index.php

このテンプレート階層は、もちろん他のページにも存在します。例えば検索結果を表示するページは、以下のような優先順位があります。

検索結果表示ページのテンプレート階層

  1. search.php
  2. index.php

テンプレート階層については、過去記事で詳しく書いたことがあるので参考にしてみてくださいね。また、WordPress Codex も参照してください。

↑ WordPressでサイト構築 目次へ

3.3. 固定ページを使う？home.phpを使う？

でも home.php と 固定ページのどっちを使うか迷う所ですよねー。一体どう違うんでしょう？ふたつのトップページの大きな違いは、管理画面から更新したいコンテンツがあるかどうか？なんです。

どーいう事かというと、固定ページを使った場合は、管理画面の固定ページの編集画面からコンテンツを編集、更新することが出来ますよね？そういったコンテンツがある場合は、固定ページを使います。

今回のサンプルサイトでは、特に更新するコンテンツがないので、home.php を使いました。

トップページ


サンプルサイト：トップページ

サイトマップ

今のところ使っているテンプレートファイルは、固定ページ用の page.php と、トップページ用の home.php だけですね。

↑ WordPressでサイト構築 目次へ

4. カスタム投稿タイプで「お知らせ」ページを作る

さて、サンプルサイトには、簡単なお知らせを告知するための機能を付けたいと思います。ブログのように更新する感じで、ちょっとした短い文章を想定しています。例えば「アルバイト募集のお知らせ」とか、「年末年始の営業のお知らせ」といった感じです。

ん？更新するならブログ機能をそのままつかって、カテゴリーで分ければいいんじゃないの？って声も聞こえてきます。

でも、このサンプルサイトには、ブログも付けなくてはなりませんし、カテゴリー分けするよりも、もっといい方法があるんです！それがカスタム投稿タイプを使う方法です。

↑ WordPressでサイト構築 目次へ

4.1. カスタム投稿タイプとは？

このブログでも、何度かカスタム投稿タイプを取り上げた事がありますが、ちょっとここでおさらいです。そもそもカスタム投稿タイプというのは何でしょう？

カスタム投稿タイプは、WordPress 3.0 から新しく加わった機能のひとつ。WordPress 2.9 以前では、ふたつの投稿タイプしかありませんでした。そのふたつの投稿タイプというのは、ブログの投稿（post）と固定ページの投稿（page）です。

  1. ブログの投稿 … post
  2. 固定ページの投稿 … page

カスタム投稿タイプというのは、post と page 以外に自分で好きな名前で作る投稿のことなんです。ちょっと分かり難いので、下の画像を見てみてください。今回作ったサンプルサイトの管理画面です。

カスタム投稿タイプ

従来からあるブログの投稿、固定ページの他に、「お知らせ」と「製品」という投稿があります。これがカスタム投稿というもので、こんな風にブログの投稿と同じように、自分の好きな投稿を作る事ができるんです！

で、その投稿のタイプの事を「カスタム投稿タイプ」って呼んでます。ちょっと混乱しますねー … タイプっていうのは何でしょう？

さっきブログは post、固定ページは page と書きました。これが投稿のタイプを示しています。なのでカスタム投稿では、この投稿の名前も自分で好きに付けるんです。

今回は「お知らせ」と「製品」という投稿なので、それぞれ informartions、products という名前を付けました。これは WordPress の中で、どの投稿の記事なのかを区別するために使われます。

投稿タイプ

  • post … ブログ記事のこと
  • page … 固定ページのこと
  • informartions … お知らせの記事のこと
  • products … 製品の記事のこと

こんな感じです。この投稿タイプの名前は、テンプレートファイルの中、PHP でコードを書く時に使ったります。

↑ WordPressでサイト構築 目次へ

4.2. カスタム投稿タイプを作ってみよう！

それでは実際にカスタム投稿タイプを作ってみたいと思います。カスタム投稿タイプは、自分の好きな名前で作るもの。なので WordPress のデフォルトの設定では、カスタム投稿タイプは設定されていません。当たり前ですね！

カスタム投稿タイプを利用するには、functions.php に色々コードを書かなくてはいけなんですが … これが結構めんどくさいんです … X(

functions.php の設定については、過去記事で紹介しているので参考にしてみてください。今回は、簡単にカスタム投稿タイプを作ったり、管理する事が出来る Custom Post Type UI というプラグインを使います。 Custom Post Type UI の使い方については、過去記事に書いた事があるので、そちらを参考にしてみてくださいね！

Custom Post Type UI を使ってカスタム投稿タイプを作ったら、あとはブログと同じように更新するだけです！下の画像のようにブログと同じように更新できるので、特に難しい事は何もありません。また、カスタム投稿は、固定ページのように親子関係を作る事もできます。

カスタム投稿タイプの投稿画面

↑ WordPressでサイト構築 目次へ

4.3. カスタム投稿タイプを表示してみよう！

今度は先ほど作ったカスタム投稿タイプを表示するページを作っていきます。ここでは「お知らせ」（投稿タイプ informations）を表示するページを説明していきます。作るページは2種類。個別の記事を表示するためのページと、お知らせを一覧で表示するページです。

先に個別記事ページを作っていきますが、まずは完成図を見てみましょう。

お知らせの個別ページ


サンプルサイト：お知らせの個別ページ

上記のページは「お知らせ」ひとつひとつの個別のページになります。ブログの個別記事みたいな感じですね！

ブログの記事と違う所は、カテゴリーやタグが無い事や、コメント欄が無い事です。もちろんこれらを付ける事もできますけど、簡単な告知をするためのページなので今回は付けませんでした。まずはこの「お知らせ」の個別ページ用のテンプレートファイルを作ります。

↑ WordPressでサイト構築 目次へ

5. 「お知らせ」カスタム投稿タイプ用の single.php

ブログの場合、個別記事を表示するのに single.php を使いますよね。カスタム投稿である informations も、個別記事は single.php で表示されます。でも前述した通りカテゴリーやタグは必要ないし、コメント欄も必要ありません。タイトルと日付、コンテンツの3つが表示できればいいので、ブログの single.php とは別に専用の single.php を作ることにします。

専用の single.php というのは何でしょう？ここでさっきも出てきた、テンプレート階層というのがまた登場します。single.php にも、このテンプレート階層があるんですねー。

single.php のテンプレート階層

  1. single-[post_type].php
  2. single.php
  3. index.php

single.php の場合は、上記のような優先順位でテンプレートファイルが使われます。今回は「お知らせ」用の個別ページ … つまり、投稿タイプ informations の個別ページなので、single-informations.php というテンプレートファイルを作れば、「お知らせ」表示したいとき、普通の single.php よりも優先順位が高くなるんですね！

もし single-informations.php を作らなければ、ブログと同じ single.php で表示されますし、single.php が無い場合は、テンプレート階層によって index.php で表示されます。

それでは実際に single-informations.php の中身を見ていきましょう。
（今回は informations という投稿タイプなので single-informations.php という名前ですが、これは作った投稿タイプの名前で変わります。）

↑ WordPressでサイト構築 目次へ

5.1. single-informations.php を作ろう

専用の single.php と言っても、基本的には普通の single.php と同じように作ります。ループも single.php と同じです。

single-informations.php という名前によって、投稿タイプ informations の記事にしか利用されないので、ブログで使ってる single.php から、タグやカテゴリーを表示する部分や、コメント欄の部分を削除するだけで OK です。

ループも WordPress の基本的なループと同じです。

WordPress の基本的なループ

single-informations.php のループ

<div class="post">
<?php if (have_posts()) : ?>
	<?php while (have_posts()) : the_post();
    /* ループ開始 */ ?>
		<h3><?php the_title(); ?></h3>
		<p class="post-date"><?php the_time("Y年m月j日") ?></p>
		<?php the_content(); ?>

	<?php endwhile; ?>
<?php else : ?>

		<h3>記事がありません</h3>
		<p>表示する記事はありませんでした。</p>

<?php endif; ?>
ここでループを取り上げましたが、WordPress をカスタマイズしていくなら、ループを常に意識しなくちゃならないんです。この後も色んなループが出てきますが、どこが違うのかをひとつひとつ説明していきますね！

↑ WordPressでサイト構築 目次へ

6. 「お知らせ」カスタム投稿の一覧を表示しよう

お知らせの個別記事は single-informations.php という single.php を使って表示しました。それでは今度は一覧を表示するページを作りましょう。

一覧表示というのは、例えばブログでカテゴリーをクリックすると、そのカテゴリーの記事が一覧表示されますよね！あんな感じでカスタム投稿である「お知らせ」だけを一覧表示するページを作ります。

サンプルサイト：お知らせ一覧ページ


サンプルサイト：お知らせ一覧ページ

利用するのはさっきも使った固定ページ。でも page.php ではなく、専用のテンプレートファイルを作ります。固定ページはページによって、テンプレートファイルを使い分ける事ができますよね！

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

このテンプレートを利用するにはテンプレートファイルの最初に、コメントでテンプレートファイルの名前を付けるだけ。上記では Information という名前のテンプレートがありますよね？これはテンプレートファイルの冒頭に、以下のように書く事で利用できるようになります。

PHP

<?php

/* Template Name: Information */

get_header(); ?>

get_header の前に、コメントで Information という名前をつければ、固定ページのテンプレートで Information が選べるようになります。ファイルの名前自体はなんでも OK です。ここでは information.php という名前で保存しました。

個別ページのテンプレートファイルの作り方については、WordPress Codex 日本語も参照してみてくださいね！

  • WordPress Codex 日本語：Pages

それでは information.php の中身、特にループの部分を見てみます！さっきの single-information.php のループと違うところがあるので注意してくださいね。

information.php のメインループ

<?php
$args = array(
     'post_type' => 'informations', /* 投稿タイプを指定 */
     'paged' => $paged,
); ?>
<?php query_posts( $args ); ?>
<?php if (have_posts()) : ?>
	<?php while (have_posts()) : the_post();
	/* ループ開始 */ ?>
    <div class="post">
    	<h3><?php the_title(); ?></h3>
    	<p class="post-date"><?php the_time("Y年m月j日") ?></p>
    	<?php the_content(); ?>
    </div>
	<?php endwhile; ?>
<?php else : ?>
    <div class="post">
		<h3>記事がありません</h3>
		<p>表示する記事はありませんでした。</p>
    </div>
<?php endif; ?>

今回のループでは、if (have_posts()) の前に query_posts というテンプレートタグが入っていますよね！ここでちょと query_posts について、少し詳しく見ていきます。

↑ WordPressでサイト構築 目次へ

7. メインループを変更する query_posts

query_posts は、WordPress のメインループだけを変更する関数です。ループを変更する … というのは、ループに対していろいろな指定をして、細かく設定すること。例えばさっきの information.php を例にしてみましょう。

information.php

<?php
$args = array(
     'post_type' => 'informations', /* 投稿タイプを指定 */
     'paged' => $paged,
);
?>
<?php query_posts( $args ); ?>

上記の場合は2つのパラメータ（配列 $args の中）を指定して、ループを変更しています。

  • post_type
    投稿タイプを指定しています。今回は自分で作った informations を指定しました。例えば page にすれば固定ページ、post にすればブログの記事になります。
  • paged
    これは何ページ目か … ということを指定します。何ページ目というのは、記事が増えてきた時に 1ページでは表示しきれませんよねー。なのでページャーを使って、ページを複数に分ける事があると思います。その「何ページ目」かを指定するパラメータです。

WP Pagenavi のページャー

今回は WP Pagenavi というプラグインを使ってページャーを付けています。このブログでも使っていますし、人気のプラグインなので、利用している人も多いと思います！

少し横道にそれましたけど、query_post で指定できるパラメータは、他にもたくさんあります！詳しくは WordPress Codex を参照してみてくださいね。

ここでとても大事な注意事項があります。query_post はメインループだけに使えるテンプレートタグだということ。

これから同じページ内で複数のループを使っていきますが、query_posts はメインループに使います。なので簡単に言ってしまうと、基本的に query_posts は1ページに1回しか登場しません。

query_posts を複数使うと、ページャーが上手く機能しなくなったり、サイドバーでの表示がおかしくなったり … といい事はありません。もともとメインループに使っていいテンプレートタグなので、当然と言えば当然ですねー。

また、カスタマイズしたループをリセットして、もとの WordPress ループに戻す関数、wp reset query も大切です。今回は省略しますけど、合わせてチェックしておきたい関数です。

↑ WordPressでサイト構築 目次へ

8. 1ページの中で複数のループを使う その1

さっきはメインのループを、query_posts を使って変更してみました。でもページによっては、複数のループを表示したいこともあります。例えば今例にあげている「お知らせ一覧」ページでも、複数のループを使っています。

ふたつのループ

↑ WordPressでサイト構築 目次へ

8.1. メインループとサブループ

ページ下部のメインループは先ほど説明した部分、カスタム投稿タイプ informations を一覧表示している部分です。こっちがページャーなどを利用するのでメインループになります。ではページ上部にある固定ページのループというのは何でしょう？

このページは前述した通り固定ページで作られていますから、当然固定ページで投稿した内容が表示できますよねー。なので固定ページのループとは、その部分を表示するためのループのこと。

一覧表示をしたいだけのページなので、個別ページの投稿は空っぽでもいいんですけど、ここに画像を入れたりすればアイキャッチ画像としても使えるかもですね！

↑ WordPressでサイト構築 目次へ

8.2. サブループ

それでは固定ページの内容を表示するループ（サブループ）を見てみましょう。サブループで注意するのは、query_posts を使ってはいけないということでしたね！なので今回は新しいクエリオブジェクトを生成して、もうひとつのループを作ってみます。

サブループ

<?php $loop = new WP_Query('page_id='.$post->ID); ?>
<?php while ( $loop->have_posts() ) : $loop->the_post();
	/* ループ開始 */ ?>
	<div  class="page">
		<?php the_content(); ?>
	</div>
<?php endwhile; ?>

WP_Query に渡してるパラメータ page_id で、表示中の記事の ID（この場合はお知らせ一覧という固定ページ）を指定しています。

また、複数のループは、記事下やサイドバーなどで関連記事を表示したり、いろいろなところで使われます。しつこいようですが、基本的に query_post はメインループに使うテンプレートタグなので、その他のループ（サブループ）には使わないようにします。

サブループの例（サイドバー）

でも、WordPress Codex のループの項を見てみると、複数のループで query_posts を使ってる例が載ってるんですよね。

複数ループの例

// going off on my own here
<?php $temp_query = $wp_query; ?>
<!-- Do stuff... -->

<?php query_posts('category_name=special_cat&posts_per_page=10'); ?>

<?php while (have_posts()) : the_post(); ?>
  <!-- Do special_cat stuff... -->
<?php endwhile; ?>

// now back to our regularly scheduled programming
<?php $wp_query = $temp_query; ?>

こんな風にもとものとクエリを一度 $temp_query に代入、サブループが終わった後で $wp_query に $temp_query を戻してあげればいいみたいですねー。

ちょっと横にそれましたけど、複数のループを使って、カスタム投稿のお知らせを一覧表示するページができました！

サイトマップ

↑ WordPressでサイト構築 目次へ

9. ブログのトップページを作る

今度はさっきの「お知らせ一覧」と同じ要領で、ブログのトップページを作ってみます。


サンプルサイト：ブログのトップページ

普通ブログのトップページは index.php を使いますよね。でもこのサンプルサイトの場合は、トップページは home.php で作っていますし、ブログのトップページ = Webサイトのトップページではありません。ではどんな風にしてブログのトップページを作ればいいでしょう？

私はさっきの「お知らせ一覧」の時と同じように、固定ページを使ってブログのトップページを作っています。まずはさっきと同じように、固定ページ用のテンプレートファイルをつくります。ファイルの冒頭で、コメントしてテンプレートの名前を付けるのを忘れずに！

PHP

<?php

/* Template Name: Blog */

get_header(); ?>

今回は blog.php という名前をつけて保存しました。それではブログの記事を一覧表示するためのテンプレートファイル、blog.php の中身、ループの部分を見てみます。

blog.php

<?php
$args = array(
	'post_type' => 'post', /* 投稿タイプ */
	'paged' => $paged
); ?>
<?php query_posts( $args ); ?>
<?php if (have_posts()) : ?>
	<?php while (have_posts()) : the_post();
	/* ループ開始 */ ?>
	<div class="post">
    		<h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
    	<p class="date"><?php the_time("Y年m月j日") ?></p>
		<?php the_post_thumbnail(); /* アイキャッチ */ ?>
    	<?php the_excerpt(); ?>
        <a　class="more-link" href="<?php the_permalink() ?>">続きを読む »</a>
    </div>
	<?php endwhile; ?>
<?php else : ?>
    <div class="post">
    	<h3>記事がありません</h3>
    	<p>表示する記事はありませんでした</p>
    </div>
<?php endif; ?>

さっき作った「お知らせ一覧」ページのときと、基本的には同じです。違うのは query_posts に渡すパラメータの部分。

$args = array(
    'post_type' => 'post',
    'paged' => $paged
);
query_posts( $args );

post_type を post にしてあげれば、ブログの記事だけを表示するループになりますよね！たったこれだけです。ループの中は「お知らせ一覧」のときと違って、アイキャッチ画像を表示したり、続きを読むリンクを表示したりしていますが、基本的な構造は同じです。

これでブログのトップページができちゃいました ;D ブログの個別記事については、普通に single.php を使えばいいので、今回は省略します。

サイトマップ

↑ WordPressでサイト構築 目次へ

10. カスタム投稿を使って「製品」ページを作る

このサンプルサイトでは、「お知らせ」と「ブログ」の他に、もうひとつ更新型のコンテンツがあります。新製品がでる度に、その「製品」を紹介するページです。これは先ほどの「お知らせ」と同じように、カスタム投稿タイプを使えば問題なさそうですね！

まずは前述した Custom Post Type UI プラグインを使って、製品というカスタム投稿を作ります。投稿タイプ名は products にしました。

そして今回は、カスタム分類（カスタムタクソノミー）機能を使って、「ルームタイプ」と「家具の種類」という分類も付けています。

↑ WordPressでサイト構築 目次へ

11. カスタム分類（タクソノミー）

カスタム分類とは、ブログでいうカテゴリーやタグみたいな感じです。使い方はブログのカテゴリーやタグと基本的に同じでで、それぞれの製品（家具）を好きなように分類しておけば、あとで一覧表示させるページを作る時にとっても簡単になるんです！

前半で作った「お知らせ」は特に分類しませんでしたけど、今度の製品は、以下のようになっています。

「白いソファー」という製品の分類は …

  • ループタイプ … リビングルーム
  • 家具の種類 … ソファー

「白いチェア」という製品の分類は …

  • ルームタイプ … リビングルーム、ダイニング
  • 家具の種類 … チェア

という感じで分けておきます。

あ、肝心なカスタム分類の作り方を忘れてました w カスタム分類も、先ほどのプラグイン Custom Post Type UI を使えば簡単に作る事ができます。以下の過去記事で使い方を書いた事があるので、参考にしてみてくださいね！

↑ WordPressでサイト構築 目次へ

11.1. カスタム分類のスラッグ

さて、ここでカスタム分類について、もう少し詳しく見ていきますね！カスタム分類には、スラッグという名前みたいなものがあります。ブログのカテゴリーやタグにも、このスラッグがあるので馴染みのある人も多いと思います。

まずはこのスラッグを、半角英数字にしておきましょう。というのは、このスラッグをパーマリンク（URL）や、PHP のコードの中で使うからなんです。

以下は「家具の種類」というカスタム分類の中の分類（これらひとつひとつのことを「ターム」term と言います）です。スラッグを全部半角英数字にしてあります。

ちょっと前後しちゃいましたけど、親？であるカスタム分類の名前も合わせてチェックしておきます。こちらも同じようにパーマリンクや PHP のコードの中で使いますので、半角英数字にしておきましょう。（UTF-8 なら日本語でもいいのかな？やったことないんですけど …）

下記は今回作ったふたつのカスタム分類の名前です。「ルームタイプ」と「家具の種類」はラベルで、名前自体は半角英数字になってます。


（画面は Custom Post Type UI の管理画面です。）

それではここまで出来たら、試しに URL を以下のように入れてアクセスしてみます。

URL の構造は以下のようになっているんです。

http://example.com/カスタム分類名/タームのスラッグ/

↑ WordPressでサイト構築 目次へ

11.2. カスタム分類を表示する taxonomy.php

そしてこのカスタム分類を表示しているテンプレートファイルが、taxonomy.php というファイルです。もちろんこれにも、もうお馴染みのテンプレート階層があります。

カスタム分類のテンプレート階層

  1. taxonomy-{taxonomy}-{term}.php
    このサンプルサイトを例にすると taxonomy-item-sofa.php とかになります。
  2. taxonomy-{taxonomy}.php
    このサンプルサイトを例にすると taxonomy-item.php とかになります。
  3. taxonomy.php
  4. archive.php
  5. index.php

今回は製品でしかカスタム分類を使っていないので、3番目の taxnomy.php を作って表示させる事にします。

今気がついたんですけど、1番上と2番目のテンプレートファイルを使うなら、カスタム分類名にハイフン（-）入れない方がいいかもですねー …。

私、room-type って名前にしちゃいましたけど、一番上のファイル使うと、taxonomy-room-type-living.php みたいになるし、2番目の場合は taxonomy-room-type.php というように一個余分にハイフンがはいっちゃいますねー …。WordPress がちゃんと認識してくれないかも …。失敗、失敗 X(

それでは taxonomy.php の中身、ループの部分を見てみます。

taxonomy.php

<?php if (have_posts()) : ?>
	<?php while (have_posts()) : the_post();
    /* ループ開始 */?>
    <div class="post">
		<h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
		<?php the_post_thumbnail(); ?>
		<?php the_excerpt(); ?>
        <a class="more-link" href="<?php the_permalink() ?>">詳しく見る</a>
    </div>
	<?php endwhile; ?>
<?php else : ?>
    <div class="post">
		<h3>製品がありません</h3>
		<p>表示する製品がありませんでした</p>
    </div>
<?php endif; ?>

特別な事もなく、一般的なループと同じです。テンプレート階層によって優先されて使用されるテンプレートファイルでは、特にループに指定しなくてもいいので楽ちんですね！

これでカスタム分類で表示している「部屋タイプの一覧表示」「家具の種類での一覧表示」の2ページができました。

サイトマップ

↑ WordPressでサイト構築 目次へ

12. 製品（カスタム投稿）の個別記事用の single.php

それでは次に、個別の製品（家具）を表示するためのテンプレートファイルを作ります。


サンプルサイト：個別製品ページ

製品は products という投稿タイプ（ブログは post、固定ページは page でしたね！）なので、single-products.php という名前のテンプレートファイルを作れば OK です。これはお知らせのときに作った、single-informations.php と同じ感じですね！

↑ WordPressでサイト構築 目次へ

13. 1ページの中で複数のループを使う その2

先ほどの個別の「製品」を表示する single-products.php では、記事の下に関連製品を表示しています。もちろんこれにはサブループを使用します。

この部分は、single-informations.php で現在表示されている製品と、「同じ部屋タイプ」「同じ家具の種類」に分類されている他の製品を表示しています。サブループなので query_posts は使わないで、今度はテンプレートタグ get_posts を使って表示してみます。

↑ WordPressでサイト構築 目次へ

13. 1. ループで何を取得するかを配列に入れる

今回はちょっとたくさんパラメータがあります。まずは何を取得するのかを、配列にいれますね。

single-products.php

<?php
$args = array(
	'post_type' => 'products',
	'post__not_in' =>  array($post->ID),
	'orderby' => 'rand',
	'posts_per_page' => 6,
	'tax_query' => array( /* カスタム分類 */
		'relation' => 'OR',
			array(
				'taxonomy' => 'room-type',
				'field' => 'slug',
				'terms' => $room_type_slug,
			),
			array(
				'taxonomy' => 'item',
				'field' => 'slug',
				'terms' => $item_slug,
			)
		)
	);
?>

ちょっと難しそうですねー。でもよーく見てみると、馴染みのあるパラメータもありますね！上から順番に見ていきましょう！

  • ‘post_type’ => ‘products’
    投稿タイプ ‘products’ を指定します。
  • ‘post__not_in’ => array($post->ID)
    今表示されている投稿を除きます。
  • ‘orderby’ => ‘rand’
    表示するものをランダムにします。
  • ‘posts_per_page’ => 6
    表示される最大の数です。

ここまでは特に問題なさそうですねー。では続きです。

'tax_query' => array(
	'relation' => 'OR',
	array(
		'taxonomy' => 'room-type',
		'field' => 'slug',
		'terms' => $room_type_slug,
	),
	array(
		'taxonomy' => 'item',
		'field' => 'slug',
		'terms' => $item_slug,
	)
)

tax_query で、カスタム分類についての指定を行います。今回は複数のカスタム分類（タクソノミー）を使っているので、まずはふたつの分類の関係を relation で決めています。

  • ‘relation’ => ‘OR’

今回は、「部屋タイプが同じ」または「家具の種類が同じ」という取得の仕方なので OR にしています。もし「部屋タイプが同じ」かつ、「家具の種類が同じ」という条件であれば、AND にします。プログラムに馴染みがあれば簡単ですね！

その下の配列で、カスタム分類（部屋タイプと家具の種類）と、その分類（リビングルームとかダイニングとか）を指定していきます。

  • ‘taxonomy’ => ‘room-type’
    … カスタム分類名です。
  • ‘field’ => ‘slug’
    … ここはどんなフィールドでタームを指定するかです。ちょっと後述します。
  • ‘terms’ => $room_type_slug
    … 実際にタームをいれます。今回は変数に配列で代入されています。

ちょっと分かり難いですね … X( まず ‘taxonomy’ => ‘room-type’ の部分は簡単ですね！カスタム分類名（ここでは room-type）を入れるだけです。

その後のフィールドというのは何でしょう？今回はスラッグ（前述しましたね！）を指定していますが、他にもタームの IDで指定したりできます（’field’ => ‘id’ ）。

ターム … 覚えてますか？少し前にも登場しましたが、これはカスタム分類で分類されたひとつひとつの分類名のこと。

term

各カスタム分類の中の、ひとつひとつがタームです。上の図で言うと、room-type はカスタム分類名（taxonomy）、リビングルームとかダイニングとか、ベッドとかテーブルがターム（term）です。

さっきの説明は、これらのタームをスラッグで指定するという意味です。

そして最後の ‘terms’ => $room_type_slug の部分で、タームをスラッグで指定するわけですねー。変数になっていますけど、実際は以下のようになってるんです。

  • ‘terms’ => array( ‘living’,'dining’)

$room_type_slug に入れるタームは、get_the_terms 関数などで別途取得しておきます（今回は説明が長くなるので省略します …）。

↑ WordPressでサイト構築 目次へ

13. 2. get_posts でサブループを作ろう

それではサブループの続きです！

single-products.php

<?php $myposts = get_posts($args); ?>
<?php
foreach($myposts as $post) :
     setup_postdata($post);
?>
	<div class="post">
		<h3><?php the_title(); ?></h3>
		<?php the_post_thumbnail(); ?>
		<a class="more-link" href="<?php the_permalink() ?>">詳しく見る</a>
	</div>
<?php endforeach; ?>

get_posts 関数のパラメータに、さっきの配列 $args をいれてオブジェクトを取得。そのあと foreach でループを回します。これが get_posts を使った場合のループです。

同じようなことを、前半使った WP_Query を使ってやってみると、以下のようになります。

WP_Query を使ったループ

<?php  $args = array(
	/* ここは同じなので省略 */
);?>
<?php $loop = new WP_Query($args); ?>
<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
	<div  class="page">
		<h3><?php the_title(); ?></h3>
		<?php the_post_thumbnail(); ?>
        <a class="more-link" href="<?php the_permalink() ?>">詳しく見る</a>
	</div>
<?php endwhile; ?>

もちろん get_posts を使う場合と WP_Query を使う場合とでは違いもあります。例えば WP_Query では、query_posts と同じパラメータが使えます。

それに対して get_posts は、シンプルに複数ループを作る為のテンプレートタグです。WP_Query に比べると使えるパラメータに限りもあるので、ループで何をしたいかによっても使い分けたりします。

追記

コメントで教えていただきました！ladybug さん、ありがとうございます！WordPress 2.6以降では、get_posts でも query_posts と同じパラメータを取ることができます。Codex にも書いてありました ….。私の勘違いでした。すいません X(

サブループについて、少し寄り道してしまいましたけど、これで製品を表示する single-products.php ができました！

サイトマップ

もうちょっとで完成ですね！

↑ WordPressでサイト構築 目次へ

14. index.php は何に使うの？

ここでやっと index.php の出番です。今まで index.php は一度も登場していませんでしたけど、index.php は WordPress に無くてはならないテンプレートファイルです。ではこのサンプルサイトでは、どのページで使われるかというと …

  • 検索結果を表示するページ
  • ブログのカテゴリーをクリックした時に表示されるページ

上記ののふたつです。でもブログにタグを使えば（今回は使ってません）タグページでも使いますし、月別のアーカイブを表示すれば、アーカイブページでも使われます。これは何度も出てきているテンプレート階層によって、最終的には必ず index.php が使われるからです。

そんなわけで、サンプルサイト内では、上記の2つのページが index.php で表示されてます。

↑ WordPressでサイト構築 目次へ

15. ブログの個別記事 single.php、404ページの404.php

残す所は、ブログの個別記事を表示する single.php と、404 Not Found 時に表示する 404.php を作れば完成です！私は必ず 404.php を作るようにしてるんですけど、これも無くても構いません。その場合はテンプレート階層によって、index.php で表示されるだけです。

これで全てのページが完成しました！

サイトマップ

今回使ったテンプレートファイルを整理してみると、以下のような感じです。

  • header.php … ヘッダー部分
  • sidebar.php … サイドバー部分
  • footer.php … フッター部分
  • home.php … トップページ用
  • page.php … 固定ページ用のデフォルトテンプレート
  • informations.php … 固定ページ「お知らせ」用のテンプレート
  • blog.php … 固定ページ「ブログ」用のテンプレート
  • single.php … ブログの個別記事用
  • single-informations.php … お知らせの個別記事用
  • single-products.php … 製品の個別記事用
  • taxonomy.php … カスタム分類表示用
  • index.php … カテゴリー表示、検索結果表示用
  • 404.php … 404 Not Found用
  • functions.php … オリジナル関数用ファイル
↑ WordPressでサイト構築 目次へ

16. カスタムメニューを使って、ナビゲーションを作る。

サイトの構造的なファイル群はこれで完成しましたけど、今度はナビゲーションを作ります。

このサンプルサイトでは色んな固定ページが、ナビゲーションのメニューになっています。このような場合、以前ならテンプレートタグ wp_list_pages() を使ってました。でも WordPress 3.0 以降は、カスタムメニューという機能が加わっているので、そっちの方がなにかと便利です。もちろんこのサンプルサイトでも、カスタムメニューを使ってナビゲーションを作っています。

まず、このカスタムメニューを使うには、functions.php に以下を書く必要があります。

functions.php

/* カスタムメニュー */
add_theme_support( 'menus' );

すると 管理画面 → 外観 の中に、メニューという項目ができます！

カスタムメニュー

あとはナビゲーションに名前をつけて、使いたい固定ページなどを追加するだけです。

今回は作ったメニューに、main-navi という名前をつけて保存しました。このナビゲーションは、名前を変えて複数作る事ができます。

サンプルサイトではヘッダーのナビゲーションでしか使ってませんけど、フッターなどのナビゲーションにだって使えますねー。順番も簡単に管理ページから入れ替える事ができるので、とっても便利です。もちろん階層を付けることだってできます。

あとは header.php のナビゲーションを表示する部分に以下を追加するだけです。

header.php

<?php wp_nav_menu('main-navi'); ?>

ul、li タグで出力されるので、あとは CSS で装飾すればできあがり！

↑ WordPressでサイト構築 目次へ

17. body_class() がとっても便利

WordPress には、body タグに色んなクラスを付けてくれる body_class というテンプレートタグがあります。header.php 内の body タグを以下のように書くだけなので、とっても簡単に利用できます。

header.php

<body <?php body_class(); ?>>

例えばどんなクラスが付くかというと …

  • トップページ … home など
  • 固定ページ … page-template-default、page-id-8、page-parent、page-child など
  • タクソノミーページ …tax-room-type、tax-item など
  • カスタム投稿の個別ページ … single-products、single-informations など

上記のように、そのページをピンポイントで指定できるようなクラスや、テンプレートファイル毎のクラスなど、いろいろなクラスが付くんです。なので CSS で装飾する為にテンプレートファイル内で、わざわざ条件分岐のコードを書いてクラスをつけたりする必要もなくなります。body_class、とっても便利ですね！

例えばサンプルサイトでは、同じテンプレートファイルを使っていても、この body_class を利用して、サイドバーの位置を全く逆にしたりしています。

同じテンプレートファイルで、レイアウトだけを変更

body_class の他にも、ボックスにクラスを付ける post_class なんていうテンプレートタグがあるので、合わせて使ってみるといいかもですね！

↑ WordPressでサイト構築 目次へ

18. ループ内でしか使えない関数、ループ外でも使える関数

WordPress でWebサイトを作るとき、いろいろカスタマイズしなければなりません。その為に WordPress には、テンプレートタグと呼ばれてる関数がたくさんありますよね！とっても便利なテンプレートタグなんですが、使う時に注意したいことがあります。

この記事の中でも何度か登場したループ。WordPress のテンプレートタグは、使用できる位置が決まっていて、ループ内でしか使えないものや、ループ外で使うもの、また使い方によって（パラメータを指定したりなど）どっちでも使えるものなどがあります。

例えば記事のタイトルを表示するときには、以下のテンプレートタグが使えますけど、それぞれ使える場所が違います。

  • single_post_title() … ループ外でタイトルを表示する
  • the_title() … ループ内でタイトルを表示する

こんな風に同じようにタイトルを表示するテンプレートタグでも、ループ内、ループ外で別の関数になってたりします。でも、ループ内で使えるはずの the_title を、ループ外に記述してもタイトルを表示してくれます。

表示されればどっちでもいいじゃない！って思う人もいるかもしれないですけど、この先 WordPress がバージョンアップを重ねていって、いずれは表示されなくなったりするかもしれません …。なのでテンプレートタグは、ちゃんと使っていい場所で使うようにしています。

使っていい場所は、WordPress Codex でテンプレートタグを見ると載っているので、それぞれ参照してみてくださいね！下記はさっき例にあげた、ふたつのテンプレートタグです。

↑ WordPressでサイト構築 目次へ

19. WordPress で jQuery を読み込む

とーっても長くなったので最後にしますね。WordPress サイトで jQuery を使うこともあると思います。WordPress ではない Webサイトの場合、jQuery を使うときは必ず下記のように head 内などで jQuery を読み込みますよねー。

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

でも、WordPressの場合は head内に上記のように、直接リンクを貼りません。

まず、WordPress には、もともと jQuery がインストールされています。管理ページを見ると、タブやアオコーディオンなどがたくさん使われていますよね！これらは jQuery を使って表現されています。

なのでもともとインストールされている jQuery をそのまま使います。実際にどうやって jQuery を読み込むかというと、いろいろ書き方があるんですけど、分かりやすいのは head 内の wp_head() より上に、下記のように wp_enqueue_script 関数で記述します。

header.php

<?php wp_enqueue_script( 'jquery' ); ?>
<?php wp_head() ?>

こう書くだけで、WordPress の中にインストールされている jQuery を読み込んでくれます。でも WordPress は常にバージョンアップを重ねますよね。それに伴って、jQuery も最新版がインストールされていきます。例えば今の WordPress 3.3 の jQuery のバージョンは、1.7.1です。

場合によっては、古い jQuery を使いたい！という場合もあるかもしれません。そんなときは、functons.php に以下のように書きます。

functions.php

<?php
function my_scripts_method() {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js');
    wp_enqueue_script( 'jquery' );
}
add_action('wp_enqueue_scripts', 'my_scripts_method');
?>

こうすると、wp_head によって読み込まれる jQuery は、自分で指定した 4行目の jQuery になります。

↑ WordPressでサイト構築 目次へ

19.1. jQueryのプラグインを読み込む場合

jQuery のプラグインをテーマで使いたい場合もあると思います。そんなときも、head内に直接リンクを貼らずに、下記のように書きます。

header.php

<?php wp_enqueue_script('easing', get_bloginfo('template_url') . '/js/jquery.easing.js', array('jquery')); ?>
<?php wp_enqueue_script('funcybox', get_bloginfo('template_url') . '/js/jquery.funcybox.js'); ?>
<?php wp_head(); ?>

上記は jQuery の easing プラグインと、funcybox プラグインを読み込んでいる例です。こういう風に書くと、jquery.easing.js を読み込む時に、一緒に jQuery を読み込んでくれます。

2番目の jquery.funcybox.js を読み込む時には、すでに jQuery を読み込んでいるので、後半の array(‘jquery’) は必要ありません。

今回は分かりやすく、head内に書く方法でしたけど、functions.php に記述する方法もあります。その方法は、過去記事にかいてあるので参考にしてみてくださいね！

↑ WordPressでサイト構築 目次へ

19.2. 自分で jQuery のコードを head 内に書く場合

先ほど jQuery を読み込む記述は、wp_headより前に書くと言いました。でも自分で jQuery のコードを head 内に書く場合は、wp_head より後ろに書きます。

header.php

<?php wp_enqueue_script( 'jquery' ); ?>
<?php wp_head(); ?>
<script type="text/javascript">
jQuery(function(){
    /* ここに書きます */
});
</script>

なんでかというと、jQuery の読み込みは、wp_head() が行います。なので wp_head() が jQuery へのリンクを出力した後に書かないと、いくら jQuery のコードを書いても動きませんよねー X(

↑ WordPressでサイト構築 目次へ

19.3. どうしてそんな面倒なことをしなくちゃならないの？

先ほど head 内などで、直接 jQuery へのリンクを貼らない … と書きました。でも何でそんな面倒なことをしなくてはならないのでしょう？

簡単な例で説明しますね！例えばお問い合わせフォームを付ける、Contact Form 7 というプラグインを WordPress にインストールしたとします。このプラグインは、動作の為に jQuery を使っているので、プラグインを有効可すると、もともと WordPress にインストールされている jQuery を読み込みます。

もしこのときに head内に jQuery への直接リンクが貼ってあったら、どうなるでしょう？実は下記のように head 内に出力されます。

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel='stylesheet' id='contact-form-7-css' href='http://example.com/wp-content/plugins/contact-form-7/styles.css?ver=3.0.1' type='text/css' media='all' />
<script type='text/javascript' src='http://example.com/wp-includes/js/jquery/jquery.js?ver=1.7.1'></script>

1行目と3行目。自分で直接リンクを貼った jQuery と、プラグイン（WordPress）が表示する jQuery のリンクがふたつ表示されてます …。つまり2回 jQuery を読み込んでいる事になりますねー。

今回は Contact Form 7 を例にしましたけど、jQuery を使っているプラグインは他にもたくさんあります。

先ほどのように wp_enqueue_script() を使えば、こういった競合を防いでくれるので、WordPress で jQuery を読み込むときは、wp_enqueue_script() を使った方がいいですね！

↑ WordPressでサイト構築 目次へ

19.4. WordPress では jQuery UI もそのまま使えます！

アコーディオンやタブなど、いろんな UI を簡単につかえる jQuery UI。このブログでは jQuery UI について書いた事がなかったので、どんなものかというのは jQuery UI のデモを見てくださいね！

  • jQuery UI アコーディオン：デモ
  • jQuery UI タブ：デモ

とにかく jQuery UI を使えば、タブやアコーディオン（他にもたくさんありますが …）を簡単に設置することができるんですね！そしてこの jQuery UI も、WordPress には最初からインストールされています。

なので利用する時には、header.php のwp_head() や footer.php の　wp_footer() の前に以下を書き込みます！

header.php

<? wp_enqueue_script( 'jquery-ui-tabs' ); ?>
<? wp_enqueue_script( 'jquery-ui-accordion' ); ?>

上記はタブとアコーディオンを読み込む場合です。これだけ記述すれば、自動的に jQuery 本体も読み込んでくれるし、jQuery UI のコアファイルも読み込んでくれます（wp_head()の前に書いても、フッター付近に出力されます）。

このサンプルサイトでも、jQuery UI を使ったアコーディオンとタブを使ってみました！


サンプルサイト：製品一覧

今回はアコーディオンとタブだけですけど、他の UI の読み込み方は、WordPress Codex を参照してみてくださいね！

↑ WordPressでサイト構築 目次へ

最後に

今回は WordPress でブログじゃない Webサイトを作るとき、私がしている事をまとめてみました。本当はパンくずリストやサイドバーとかも書きたかったんですけど、長くなりすぎたのでおしまいにします。

また、Webサイトの構造は多種多様ですし、私はこんな風にして WordPress を利用している一例として読んでもらえたなら嬉しいです。

私は誰かに WordPress を習った訳ではないので、間違った使い方をしている部分もあるかもしれません。いつも WordPress Codex を見ながら、自分なりにこんな風にして Webサイトを構築しています。もし間違っているところや、もっとこうした方がいいよ！というところがあったら、教えていただけると嬉しいです。

とても長い記事になってしまいましたけど、最後まで読んでくれてありがとうございました ;D

今回サンプルサイトでお世話になったプラグイン

follow me on twitterfollow me on twitter RSS feedStay up to date via RSS