WordPressでサイト設計をする時に覚えておきたいポストタイプの特徴などいろいろ
WordPressでWebサイトを構築する時に、設計の段階で知っておきたい投稿のタイプ（ポストタイプ）について、その特徴などをまとめてみました。とても長い記事になってしまい、うまくまとめられなかったかもしれません ... WordPress ... 奥が深いんだもん ...
Webサイトを作るぞーってなってからアップロードして公開するまでには本当にたくさんの色んな工程がありますよね。まず発信したい情報があって、誰に見てもらいたいとか考えて、設計してデザインして、コーディングして … 。
Webサイトを作るとき、いきなりデザインやらコーディングから始めるってことはありませんよね。今回は実際にデザインを始める前の段階、サイトの設計やワイヤーフレーム作りをする段階のお話。WordPressでWebサイトを作る時に、設計の段階で知っておくといいかなーと思うポストタイプ（’post_type’）についてのお話です。
WordPressのポストタイプとサイト設計
何で今更？って思うかもしれませんけど、WordPressでWebサイトを作る場合、サイト設計やワイヤーフレームをきっちり作らないと、コーディングの時に悩むことが多いんです。
WordPressのどのポストタイプを使えばいいか、あとあと悩むことにならないように、私はワイヤーフレームの段階でしっかり設計しておきます。そのために、WordPressの各ポストタイプでどんなことができるのかを再確認しておきましょう。
（今回は説明用にWordPressの機能からのアプローチですけど、実際はWordPressの機能ににサイト設計を合わせるという訳ではありません。）
WordPress のポストタイプの特徴 目次
- その前に … ワイヤーフレームって？
- ワイヤーフレームを作る時にチェックしておきたいWordPressのポストタイプ
- 固定ページも動的に使えます
- カスタムタクソノミーを使えば自由自在にコンテンツを分類できます
- カスタム投稿タイプ、カスタムタクソノミーを使うなら、プラグイン Custom Post Type UIがおすすめです！
1. その前に … ワイヤーフレームって？
まず、その前にワイヤーフレームって何？っていう人のために簡単に説明しますね。ワイヤーフレームというのは、Webサイトの設計図みたいなもの。Webサイトを作るときは、まずこのワイヤーフレームを作りす。
Webサイトの構成、機能、デザインの下書きなどを、しっかり設計図として作っておけば、あとの作業がとてもスムーズにはかどるし、ページ構成などをしっかり設計しておかないと、デザイン自体できないっていう人もいると思います。例えば色々なコンテンツがあって、ページ数の多いWebサイトと、シンプルでページ数も少ないWebサイトではナビゲーションのデザインひとつとっても違いますよね。
ワイヤーフレームはWebサイトの設計図。ワイヤーフレームを作るのにはいろいろなWebサービスを使ったり、スケッチブックに書いたりと人それぞれ。私はスケッチ派ですけど、他の人と共有したい時などにはWebサービスを使ったりしてます。
ワイヤーフレームを作りたい！っていう人はこんな記事がおすすめです。
- Webクリエイターボックス
Webサイトの骨組み: ワイヤーフレームを素早く・手軽に・美しく制作する
ワイヤーフレームを作る時に便利なWebサービスなどが紹介されています。 - inspirationfeed
25 Examples of Wireframes and Mockups Sketches
ワイヤーフレームやモックアップのスケッチがまとめられています。
2. ワイヤーフレームを作る時にチェックしておきたいWordPressのポストタイプ
それではWordPressでWebサイトを作ることを前提に、Webサイトの設計図、ワイヤーフレームを作ります。でもその時に、このコンテンツはブログの投稿で、こっちは固定ページで作るなど、決めておかないと後々悩むことになってしまいますよね。
簡単なWebサイトならそんなに悩まなくても済みますが、ちょっと複雑な構成のWebサイトになるなら、どのポストタイプを使うかしっかりワイヤーフレームの段階で考えておきましょう。ご存知の通りWordPressには複数のポストタイプがありますよね。
- ポスト post_type ‘post’
普通のブログの投稿のことです。 - 固定ページ post_type ‘page’
独立した固定ページを作れるWordPressのデフォルト機能ですよね。 - カスタム投稿タイプ post_type ‘任意の名前’
WordPress 3.0から追加された新機能です。
カスタム投稿タイプはWordPress 3.0から追加された新機能。カスタム投稿のおかげでWordPressのCMS（コンテンツ・マネージメント・システム）としての可能性がぐーんと広がったような気がします。
この3つ（カスタム投稿タイプは複数作れるので正確には3つじゃないですが）の投稿タイプにはそれぞれ向き不向きがあったり、組み合わせて使うことできます。
それでは一個ずつ順番に投稿タイプの特徴を見ていきましょう。
2.1. 普通の投稿 post_type ‘post’
WordPressの一番ポピュラーな投稿タイプです。WordPressでブログを書くならこの投稿を使いますよね。
Webデザインレシピもブログなのでこの投稿を使って記事を更新しています。もちろんWordPressはブログじゃないWebサイトだって作れるので、その時にはどんな風にこの投稿を使うか、どんなコンテンツに向いているか考えなくちゃいけません。
そのためにこの投稿の特徴をチェックしておきましょう。あくまでもデフォルト機能の特徴です。
投稿 post_type ‘post’ の特徴
- カテゴリーで分類できる。
- カテゴリーには親子関係を付けることができる。
- タグで分類できる。
- カスタムタクソノミー（後述）を使って分類することもできる。
- 簡単に時系列で並べられる。
- 抜粋が使える。
- 投稿自体に親子関係を付けることはできない。
もともとブログ向けに作られたWordPressですからブログに必要な機能は充実してますね。もちろんブログですから時系列に更新していくコンテンツに向いているとも言われています。（誤解のないように補足すると、他の投稿タイプも時系列で並べるのは簡単です。）
でもコンテンツに親子関係を付けたい場合は困っちゃいますね。投稿の分類方法はカテゴリーとタグの両方が使えますし、カスタムタクソノミーも使うことができます。（カスタムタクソノミーは機能として追加しないと使えません … 後述しますね。）また、カテゴリーには親子関係を付けることができます。
2.2. 固定ページ post_type ‘page’
これもWordPressではポピュラーな機能ですよね。特に難しい設定も必要なく、WordPressをインストールすれば最初から使えるデフォルト機能です。このブログでも固定ページの機能をを使って2ページほど、AboutとContact のページを作っています。WordPressユーザーにはお馴染みですね！それでは固定ページの特徴にはどんなものがあるか見てみましょう。
固定ページ post_type ‘page’ の特徴
- カテゴリーやタグで分類できない。
- カスタムタクソノミーを使って分類することができる。
- ページに親子関係を付けることができる。
- ページごとに違うテンプレートファイルを使うことができる！
- 抜粋は使えない。
固定ページは静的なコンテンツに向いていると言われてますよね。親子関係も付けられるので、階層をもった静的なコンテンツ作りには向いてます。カテゴリー分けやタグでの分類ができないというのもチェックポイントですね。（カスタムタクソノミーという機能を使えば分類することはできます。）
でも必ずしも静的なコンテンツだけじゃなく、いろんな使い方があるってことにも注意が必要です！これはもうちょっと後で説明します。
2.3. カスタム投稿タイプ post_type ‘任意の名前’
このブログでも何度か取り上げたことがあるカスタム投稿タイプ。このカスタム投稿タイプのおかげでCMS（コンテンツ・マネージメント・システム）としてのWordPressの使い勝手がとっても広がったと思います。カスタム投稿タイプはWordPress 3.0からの新機能なので、まだあまり馴染みのない人も多いかもしれませんね。ちょっと簡単におさらいしておきましょう。
カスタム投稿タイプ、おさらい
今までのWordPressはふたつの投稿タイプがありました。ブログなどを更新するための投稿、ポスト（’post’：前述したやつです）、そして固定ページ（’page’：これも前述したやつです）。
それぞれ 'post' と 'page' という名前のポストタイプ（post_type）です。
カスタム投稿タイプというのは、自分で好きな名前で作ったポストタイプのこと。例えばこのブログ、Webデザインレシピにブログ記事とは別に、アートやデザイン、写真だけを更新するギャラリーを付けたいなーってなった時に、従来ならブログのカテゴリーにギャラリーという項目をを作ってブログで更新していくって感じでした。
でもそれだと普通の記事とギャラリーが混在してしまうし、ふつうの記事のときとギャラリーの投稿のときとはページのデザインを変えたくなったりもします。
そこでカスタム投稿タイプを使って、ブログの post、固定ページの page の他に gallery という任意の名前のポストタイプを作ります。こうすれば普通の記事とギャラリーの投稿はきちっと分けることができるし、普通の記事とギャラリーの投稿を表示するページのデザインは、別のデザインにすることができます。
何となくカスタム投稿っていうのがイメージできたでしょうか？このカスタム投稿は複数作ることができるのでWebサイトを拡張してく上でもとっても便利ですね！それではカスタム投稿タイプの特徴を見てみましょう。
カスタム投稿タイプ post_type ‘任意の名前’ の特徴
- ページに親子関係を付けることができる。
- コンテンツをカスタムタクソノミーで分類できる。
- カスタムタクソノミーは複数設定できる。
- カスタムタクソノミーには親子関係を付けることができる。
- 簡単に時系列で並べられる。
- 抜粋が使える。
- カスタム投稿タイプごとにテンプレートファイルを使うことができる。
とこんな感じです。通常の投稿 'post' と固定ページ 'page' のいいところを両方とっちゃったって感じですよね！
また、特徴の中でカスタムタクソノミーについても記述してありますが、通常の投稿や固定ページでもカスタムタクソノミーは使えます（私はカスタム投稿タイプ以外では使ったことがありませんが）。
嬉しいのは、カスタム投稿タイプごとにデザインを簡単に変えられることですね！例えば ‘gallery’ という名前のカスタム投稿を作ったら、single-gallery.php というテンプレートファイルを作ればそのテンプレートが適用されます。
テンプレートファイルについては過去記事：WordPressをカスタマイズするなら絶対覚えておきたいテンプレートファイルの使い方で詳しく書いてます。
こんな感じでそれぞれの投稿タイプの特徴を確認してみました。それでは実際にサイト設計をする上で、各ポストタイプがどんな風に使えるかいくつか例をあげてみます。
3. 固定ページも動的に使えます
固定ページは静的なコンテンツ向きだと紹介しました。静的なコンテンツ、動的なコンテンツって何？っていう人は、過去記事：どのプログラム言語を覚えればいいのか分からないっていう初心者さんのためのガイド（Web）を読んでみてくださいね。
このブログ、Webデザインレシピでも固定ページを使って2つほどページ（AboutとContact）を作ってますが、どっちも静的なコンテンツです。
では固定ページを動的に使うってどういうことかっていうと、例えばさっきカスタム投稿タイプのおさらいで紹介した、 'gallery' というカスタム投稿タイプだけをブログの記事一覧みたいに表示するページや、親子関係の子ページにあたるページを表示するページを作ってみましょう。
3.1. カスタム投稿を一覧表示する固定ページ
カスタム投稿タイプを作ったのはいいけど、どうやって表示すればいいのか分からないっていう質問をときどき受けるので簡単なサンプルを作ってみました。カスタム投稿タイプ、'gallery'（自分で作った任意の名前）の投稿だけ一覧で表示してみます。完成したイメージはこんな感じです。
ナビゲーションのGalleryをクリックすると …
カスタム投稿タイプ、’gallery’ の記事だけ一覧表示されます。では実際にどうやるか、簡単に紹介します。
固定ページのテンプレートファイルを作る
ますはカスタム投稿タイプ、'gallery' の投稿だけ一覧表示する為の、固定ページ用のテンプレートファイルを作ります。ファイルの名前は何でもいいんですけど、とりあえず gallery.php としました。
固定ページ用のテンプレートファイルなので、Template Name を指定するのを忘れずに！
<?php /* Template Name: Gallery */ ?>
すると固定ページのテンプレートでGalleryを選択できるようになりました！
gallery.php の中に書くループのコードはこんな感じです。
<?php /* post_type gallery はあなたのつけた名前に変更してください */ ?> <?php $loop = new WP_Query( array( 'post_type' => 'gallery' ) ); while ( $loop->have_posts() ) : $loop->the_post(); ?> <div class="gallery-post"> <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> <?php the_excerpt(); ?> </div> <?php endwhile; wp_reset_query(); ?>
'post_type' => 'gallery'のgalleryは、あなたのつけたカスタム投稿タイプの名前に変更してくださいね。タイトルと抜粋だけのシンプルなコードですが、基本的にはこんな感じです。必要に応じて日付などを付け加えてください。固定ページとカスタム投稿タイプと組み合わせた簡単なサンプルでした。
3.2. 親ページで子ページを表示する
固定ページは普通の投稿ページと違って、コンテンツに親子関係を付けることができます。親子関係とは、ページにこんな風に階層を付けるってことですよね。
- 親ページ：WordPressをCMSとして使うために覚えたいポストタイプ
- 子ページ #1：普通の投稿 ‘post’ について
- 子ページ #2：固定ページ ‘page’ について
- 子ページ #3：カスタム投稿タイプ ‘任意の名前 ‘ について
親ページにアクセスしたら子ページの一部、抜粋をコンテンツとして表示したりとか、サイドバーなどに子ページのタイトルを表示したりとか、とにかく色々使うことが多いと思います。下の画像はブログ記事の一覧ではなくて、親固定ページで子固定ページを取得、表示しています。
子ページを取得して表示するループの部分はコードはこんな感じ。
<?php if ( $post->post_parent == 0 ) : ?> <?php $child_posts = new WP_Query(array( 'post_type' => 'page', 'post_parent' => $post->ID ) ); ?> <?php if( $child_posts->have_posts() ): ?> <?php while ($child_posts->have_posts()) : $child_posts->the_post(); ?> <div class="child-page"> <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> <?php the_excerpt(); ?> </div> <?php endwhile; wp_reset_query(); ?> <?php endif; ?> <?php endif; ?>
ループで使うクエリ、上のコードでは WP_Query に渡すパラメータについてはWordPress Codex に詳しくのっています。
- WordPress Codex 日本語：
テンプレートタグ/query posts
4. カスタムタクソノミーを使えば自由自在にコンテンツを分類できます
カスタムタクソノミーというとちょっと難しそうですが、簡単に言うとカスタム分類。ブログでいうカテゴリー、タグといった分類を、自分で好きなように作れる機能です。厳密に言うと、投稿で使われているカテゴリーやタグもタクソノミーのひとつです。
このカスタムタクソノミーは投稿やページにも設定でるそうですが、私はまだ実際に試していません。でもカスタム投稿タイプでは何度も使っています。
カスタムタクソノミーは、ひとつのコンテンツに対して複数設定できます。んー？別にカテゴリーだって、タグだって複数設定できるんだから別に特別じゃないんじゃないの？って聞こえそうですが、そーいう意味の複数ではありません。
口だとうまく言えないので画像を使いながら説明させてくださいね。
ひとつ目のカスタムタクソノミー
例えば iPhoneアプリのまとめサイトを作ると仮定します。コンテンツはアプリ一個一個の紹介ということで。
まずひとつ目の分類はアプリをタイプ別に分けることにします。カスタムタクソノミー名は 'type' という名前にしました。
<div class="taxonomy">
<h3>iPhone App Type</h3>
<span class="sub-title">タイプからiPhone Appを選ぶ</span>
<ul class="tagcloud">
<?php wp_list_categories('title_li=&taxonomy=type'); ?>
</ul>
</div>
カテゴリーを表示するテンプレートタグ、wp_list_categories を使って簡単に表示することができます。パラメータの taxonomy = type の type は、あなたがつけた分類名に変更してください。
とこんな感じでアプリをタイプ別に、ブログのカテゴリーみたいに分けることができます。仮にAppleのiTunesみたいな音楽も聴けて動画も見れるようなアプリがあったら、上の画像でいうと、エンターテイメントとミュージックのジャンルに入れますよね。これが今までのというか、一般的に複数設定するってイメージですよね。
ふたつ目のカスタムタクソノミー
ではiPhoneのアプリを無料、200以下、500円以下、1000円以下みたいに価格帯で分けたい場合はどうしましょう。さっき作ったタイプの中に無料という分類を作るのもちょっと変ですよね。
なのでふたつ目の価格帯（'price'）というカスタム分類を作ります。
そしたら今度は新着とか、ベストセラーとかでも分けたくなったとします。そしたら3つ目のカスタム分類を作ります。新着じゃなくなったらタグを外すように、カスタム分類から外せばいいだけなので管理も簡単です。
表示するコードはさっきと同じで、パラメータを taxonomyから price としているだけです。ベストセラーだけ表示するページとか、新着だけ表示するページとか、カスタムタクソノミーを使えば簡単にできちゃいます。
サイトを設計する段階で、固定ページ + カスタム投稿タイプ + カスタムタクソノミーでできることを知っているとコーディングの時に悩まなくてすみますね。
また、カスタムタクソノミーを細かく指定してループを作ることもできます。
<?php $loop = new WP_Query( array( 'post_type' => 'iphone-app', 'type' => 'game') ); ?> <?php if( $loop->have_posts() ): ?> <?php while ( $loop->have_posts() ) : $loop->the_post();?> <?php /* ここがループ */ ?> <?php endwhile; wp_reset_query(); ?> <?php endif; ?>
こんな風にループを作れば、カスタム投稿 iphone-app の game という分類のものだけ表示できます。また、カスタム投稿タイプも固定ページみたいに親子関係を作ることができるので、アイデアしだいで色んな使い方ができる投稿タイプですね！
5. カスタム投稿タイプ、カスタムタクソノミーを使うなら、プラグイン Custom Post Type UIがおすすめです！
実際にWordPressのカスタム投稿タイプや、カスタムタクソノミーを使うにあたっては準備が必要です。過去記事：WordPressをカスタマイズするなら絶対覚えておきたい条件分岐やカスタム投稿タイプなどいろいろでは、functions.php に記述する方法を紹介しましたが、手軽にカスタム投稿タイプや、カスタムタクソノミーを使えて管理も簡単にできるCustom Post Type UIというプラグインがおすすめです！
- WordPress プラグイン
Custom Post Type UI
ダッシュボードのプラグイン → 新規追加 → Custom Post Type UIで検索すれば簡単にダウンロード、インストールができます。プラグインをダウンロードしてインストールしたら、ダッシュボードにこんなメニューが追加されます。
5.1 カスタム投稿タイプを作る
それでは試しにgalleryというカスタム投稿タイプを作ってみましょう。Custom Post Types → Add New を開いて投稿タイプ名とラベルを入力します。名前を付けたらCreate Custom Post Typeボタンを押すだけで、ギャラリーというカスタム投稿ができちゃいます。
すると投稿とか、固定ページとは別に、ギャラリーを投稿するメニューが追加されて、コンテンツを書くことができるようになります。簡単ですぎです … 。
5.2. カスタムタクソノミーを作る
では次に、ギャラリーの中に写真とかアートとか、デザインというように分類するための 'classify' というカスタムタクソノミーを作ってみます。これもさっきと同じように、Custom Post Types → Add New で分類名、ラベルを入力します。気を付けるのはその下、どの投稿タイプでこの分類を使うかというところ。
'classify'という分類はカスタム投稿 “ギャラリー” で使うので、ギャラリーにチェックを入れます。カスタム分類作成ボタンを押せば、これでもうカスタムタクソノミーができちゃいます。
あとはブログのカテゴリーを作るみたいに具体的な分類を作っていけばOKです！サンプルでは写真、デザイン、アートという分類を作りました。
最後に …
途中、カスタム投稿タイプやカスタムタクソノミーについての説明になってしまいましたが、WordPressを使うとき、ワイヤーフレーム、サイトの設計の段階で、Webページのコンテンツにあったポストタイプを選ぶことが大切だなーって思っています。
実際コーディングをはじめた段階で、これってどのポストタイプを使って、どのテンプレートファイルを使えばいいんだろう … ってことにならないように、しっかり設計したいですね。そのためには各ポストタイプの特徴と、ポストタイプに合わせたテンプレートファイルやテンプレート階層についてもっと勉強しておかないとなーと思う今日この頃 … 。
各ポストタイプでできること、できないこと。それからテンプレートファイルによるデザイン、レイアウトの区別化など、WordPressを使うならチェックしておきたいですね！
またこの記事は以下の過去記事と関連性が強いので合わせて読んでもらえると嬉しいです！
過去記事
とっても長い記事になってしまって、うまくまとめられませんでしたが、最後まで読んでくれてありがとうございました！