Webサイトを作るとき、いきなりデザインやらコーディングから始めるってことはありませんよね。今回は実際にデザインを始める前の段階、サイトの設計やワイヤーフレーム作りをする段階のお話。WordPress で Webサイトを作る時に、設計の段階で知っておくといいかなーと思う、ポストタイプ（’post_type’）についてのお話です。
WordPressのポストタイプとサイト設計
何で今更？って思うかもしれませんけど、WordPress で Webサイトを作る場合、サイト設計やワイヤーフレームをきっちり作らないと、コーディングの時に悩むことが多いんです。
WordPress の、どのポストタイプを使えばいいのか、あとあと悩むことにならないように、私はワイヤーフレームの段階でしっかり設計しておきます。そのために、WordPressの各ポストタイプでどんなことができるのかを再確認しておきましょう。
（今回は説明用に WordPress の機能からのアプローチですけど、実際は WordPress の機能にサイト設計を合わせるという訳ではありません。）
WordPress のポストタイプの特徴 目次
- その前に … ワイヤーフレームって？
- ワイヤーフレームを作る時にチェックしておきたいWordPressのポストタイプ
- 固定ページも動的に使えます
- カスタムタクソノミーを使えば自由自在にコンテンツを分類できます
- カスタム投稿タイプ、カスタムタクソノミーを使うなら、プラグイン Custom Post Type UIがおすすめです！
1. その前に … ワイヤーフレームって？
まず、ワイヤーフレームって何？っていう人のために、簡単に説明しますね。ワイヤーフレームというのは、Webサイトの設計図みたいなもの。Webサイトを作るときは、まずこのワイヤーフレームを作ります。
Webサイトの構成、機能、デザインの下書きなどを、しっかり設計図として作っておけば、あとの作業がとてもスムーズにはかどるし、ページ構成などをしっかり設計しておかないと、デザイン自体できないっていう人もいると思います。例えば色々なコンテンツがあって、ページ数の多い Webサイトと、シンプルでページ数も少ない Webサイトでは、ナビゲーションのデザインひとつとっても違いますよね。
ワイヤーフレームの一例
ワイヤーフレームの一例：PHOTO – via 25 Examples of Wireframes and Mockups Sketches
ワイヤーフレームは 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 からの新機能なので、まだあまり馴染みのない人も多いかもしれませんね。ちょっと簡単におさらいしておきましょう。
2.4. カスタム投稿タイプ、おさらい
今までの WordPress は、ふたつの投稿タイプがありました。ブログなどを更新するための投稿、ポスト（'post' – 前述したやつです）、そして固定ページ（'page' – これも前述したやつです）。それぞれ 'post' と 'page' という名前のポストタイプ（post_type）です。
カスタム投稿タイプというのは、自分で好きな名前で作ったポストタイプのこと。例えばこのブログ – Webデザインレシピに、ブログ記事とは別にアートやデザイン、写真だけを更新するための、ギャラリーを付けたいなーってなった時に、従来ならブログのカテゴリーに「ギャラリー」という項目をを作って、ブログで更新していくって感じでした。
でもそれだと普通の記事とギャラリーが混在してしまうし、ふつうの記事のときと、ギャラリーの投稿のときとは、ページのデザインを変えたくなったりもします。
そこでカスタム投稿タイプを使って、ブログの post、固定ページの page の他に gallery という任意の名前のポストタイプを作ります。こうすれば普通の記事とギャラリーの投稿は、きちっと分けることができるし、普通の記事とギャラリーの投稿を表示するページのデザインは、別のデザインにすることができます。
カスタム投稿タイプのある管理画面
「Sample」と「ギャラリー」という、ふたつの投稿タイプのある管理画面。
何となくカスタム投稿っていうものが、イメージできたでしょうか？このカスタム投稿は複数作ることができるので、Webサイトを拡張してく上でもとっても便利ですね！それではカスタム投稿タイプの特徴を見てみましょう。
カスタム投稿タイプ (post_type ‘任意の名前’) の特徴
- ページに親子関係を付けることができる。
- コンテンツをカスタムタクソノミーで分類できる。
- カスタムタクソノミーは複数設定できる。
- カスタムタクソノミーには親子関係を付けることができる。
- 簡単に時系列で並べられる。
- カスタム投稿タイプごとにテンプレートファイルを使うことができる。
とこんな感じです。通常の投稿 'post' と、固定ページ 'page' のいいところを両方とっちゃったって感じですよね！
また特徴の中で、カスタムタクソノミーについても記述してありますが、通常の投稿や固定ページでも、カスタムタクソノミーは使えます（私はカスタム投稿タイプ以外では使ったことがありませんが）。
嬉しいのは、カスタム投稿タイプごとに、デザインを簡単に変えられることですね！例えば 'gallery' という名前のカスタム投稿を作ったら、single-gallery.php というテンプレートファイルを作れば、そのテンプレートが適用されます。
テンプレートファイルについては過去記事で詳しく書いてますので、そちらも読んでみてくださいね！
こんな感じで、それぞれの投稿タイプの特徴を確認してみました。それでは実際にサイト設計をする上で、各ポストタイプがどんな風に使えるかいくつか例をあげてみます。
3. 固定ページも動的に使えます
固定ページは静的なコンテンツ向きだと紹介しました。静的なコンテンツ、動的なコンテンツって何？っていう人は、過去記事：どのプログラム言語を覚えればいいのか分からないっていう初心者さんのためのガイド（Web）を読んでみてくださいね。
このブログ – Webデザインレシピでも、固定ページを使って 2つほどページ（AboutとContact）を作ってますが、どっちも静的なコンテンツです。
では固定ページを動的に使うってどういうことかっていうと、例えばさっきカスタム投稿タイプのおさらいで紹介した、 'gallery' というカスタム投稿タイプだけを、ブログの記事一覧みたいに表示するページや、親子関係の子ページにあたるページを表示するページを作ってみましょう。
3.1. カスタム投稿を一覧表示する固定ページ
カスタム投稿タイプを作ったのはいいけど、どうやって表示すればいいのか分からないっていう質問をときどき受けるので、ローカル環境で簡単なサンプルを作ってみました。カスタム投稿タイプ、'gallery'（自分で作った任意の名前）の投稿だけ一覧で表示してみます。完成したイメージはこんな感じです。
ナビゲーションの GALLERY をクリックすると …
カスタム投稿 gallery を表示
カスタム投稿「gallery」を、固定ページで一覧表示
カスタム投稿タイプ、’gallery’ の記事だけ一覧表示されます。では実際にどうやるか、簡単に紹介します。
3.2. 固定ページのテンプレートファイルを作る
ますはカスタム投稿タイプ、'gallery' の投稿だけ一覧表示する為の、固定ページ用のテンプレートファイルを作ります。ファイルの名前は何でもいいんですけど、とりあえず gallery.php としました。
固定ページ用のテンプレートファイルなので、Template Name を指定するのを忘れずに！
gallery.php
<?php /* Template Name: Gallery */ ?>
すると固定ページのテンプレートでGallery を選択できるようになりました！
テンプレート – Gallery を選択
「Gallery」をテンプレートで選択。
gallery.php の中に書くループのコードはこんな感じです。
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_postdata(); ?>
'post_type' => 'gallery' の gallery の部分は、あなたのつけたカスタム投稿タイプの名前に変更してくださいね。タイトルと抜粋だけのシンプルなコードですが、基本的にはこんな感じです。必要に応じて日付などを付け加えてください。固定ページとカスタム投稿タイプと組み合わせた簡単なサンプルでした！
3.3. index.php でそのまま表示する
実はもっと簡単に、カスタム投稿タイプを一覧表示する方法があります。例えば今回は gallery という名前のカスタム投稿タイプを作ったので、URL に gallery をつけると、カスタム投稿タイプの一覧が表示されます。
http://webdesignrecipes.com/gallery/
でもこれには条件があります。カスタム投稿タイプを作るときに、has_archive の値を true にしておくことが条件です。これについては、後述しますね！
また、見出しは index.php となっていますが、このテンプレートファイルにもテンプレート階層があるので、好きなテンプレートファイルで表示することも可能です！
-
WordPress Codex
3.4. 親ページで子ページを表示する
固定ページは普通の投稿ページと違って、コンテンツに親子関係を付けることができます。親子関係とは、ページにこんな風に階層を付けるってことですよね。例えば下記のような構造を持った固定ページがあったとします。
- 親ページ：WordPress を CMS として使うために覚えたいポストタイプ
- 子ページ#1：普通の投稿 ‘post’ について
- 子ページ#2：固定ページ ‘page’ について
- 子ページ#3：カスタム投稿タイプ ‘任意の名前 ‘ について
親ページにアクセスしたら、子ページの一部 – 抜粋をコンテンツとして表示したりとか、サイドバーなどに子ページのタイトルを表示したりとか、とにかく色々使うことが多いと思います。下の画像はブログ記事の一覧ではなくて、親固定ページで子固定ページを取得、表示している例です。
子ページを一覧表示
子ページを取得して表示するループの部分はコードはこんな感じ。
ex – parent-page.php
<?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_postdata(); ?> <?php endif; ?> <?php endif; ?>
ループで使うクエリ、上のコードでは WP_Query に渡すパラメータについては、WordPress Codex に詳しくのっています。
-
WordPress Codex
4. カスタムタクソノミーを使えば、自由自在にコンテンツを分類できます
カスタムタクソノミーというとちょっと難しそうですが、簡単に言うとカスタム分類。ブログでいうカテゴリー、タグといった分類を、自分で好きなように作れる機能です。厳密に言うと、投稿で使われているカテゴリーやタグも、タクソノミーのひとつです。
このカスタムタクソノミーは、投稿やページにも設定でるそうですが、私はまだ実際に試していません。でもカスタム投稿タイプでは何度も使っています。
カスタムタクソノミーは、ひとつのコンテンツに対して複数設定できます。んー？別にカテゴリーだって、タグだって複数設定できるんだから別に特別じゃないんじゃないの？って聞こえそうですが、そーいう意味の複数ではありません。
口だとうまく言えないので画像を使いながら説明させてくださいね。
4.1. ひとつ目のカスタムタクソノミー
例えば iPhone アプリのまとめサイトを作ると仮定します。コンテンツはアプリ一個一個の紹介ということで。
まずひとつ目の分類は、アプリをタイプ別に分けることにします。カスタムタクソノミー名は、'type' という名前にしました。
sidebar.php
<div class="taxonomy">
<h3>iPhone App Type</h3>
<span class="sub-title">タイプからiPhone Appを選ぶ</span>
<ul class="tagcloud">
<?php wp_list_categories(array('title_li' => '', 'taxonomy' => 'type')); ?>
</ul>
</div>
カテゴリーを表示するテンプレートタグ、wp_list_categories を使って、簡単に表示することができます。パラメータの taxonomy => type の type は、あなたがつけた分類名に変更してください。
こんな感じでアプリをタイプ別に、ブログのカテゴリーみたいに分けることができます。仮に Apple の iTunes みたいな、音楽も聴けて動画も見れるようなアプリがあったら、上の画像でいうと、エンターテイメントとミュージックのジャンルに入れますよね。これが今までのというか、一般的に、複数設定するってイメージですよね。
4.2. ふたつ目のカスタムタクソノミー
では iPhone のアプリを、無料、200以下、500円以下、1000円以下みたいに、価格帯で分けたい場合はどうしましょう。さっき作ったタイプの中に、無料という分類を作るのもちょっと変ですよね。
なのでふたつ目の価格帯（'price'）というカスタム分類を作ります。
そしたら今度は新着とか、ベストセラーとかでも分けたくなったとします。そしたら 3つ目のカスタム分類を作ります。新着じゃなくなったらタグを外すように、カスタム分類から外せばいいだけなので管理も簡単です。
表示するコードはさっきと同じで、パラメータを taxonomy => type から taxonomy => price としているだけです。ベストセラーだけ表示するページとか、新着だけ表示するページとか、カスタムタクソノミーを使えば簡単にできちゃいます。
サイトを設計する段階で、固定ページ + カスタム投稿タイプ + カスタムタクソノミーでできることを知っていると、コーディングの時に悩まなくてすみますね。
また、カスタムタクソノミーを細かく指定してループを作ることもできます。
ex – ex-page.php
<?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_postdata(); ?> <?php endif; ?>
こんな風にループを作れば、カスタム投稿 iphone-app の game という分類のものだけ表示できます。また、カスタム投稿タイプも固定ページみたいに親子関係を作ることができるので、アイデアしだいで色んな使い方ができる投稿タイプですね！
5. カスタム投稿タイプ、カスタムタクソノミーを使うなら、プラグイン Custom Post Type UIがおすすめです！
実際に WordPress のカスタム投稿タイプやカスタムタクソノミーを使うにあたっては、準備が必要です。過去記事：WordPressをカスタマイズするなら絶対覚えておきたい条件分岐やカスタム投稿タイプなどいろいろでは、functions.php に記述する方法を紹介しましたが、手軽にカスタム投稿タイプや、カスタムタクソノミーを使えて管理も簡単にできるCustom Post Type UIというプラグインがおすすめです！
-
WordPress Plugin Directory
管理画面から プラグイン → 新規追加 → Custom Post Type UI で検索すれば、簡単にダウンロード、インストールができます。プラグインをダウンロードしてインストールしたら、ダッシュボードに Custom Post Types というメニューが追加されます。
5.1. カスタム投稿タイプを作る
それでは試しに、galleryというカスタム投稿タイプを作ってみましょう。管理ページのメニューから、Custom Post Types → Add New を開いて投稿タイプ名とラベルを入力します。名前を付けたら Create Custom Post Type ボタンを押すだけで、ギャラリーというカスタム投稿ができちゃいます。
カスタム投稿タイプの作成
画面左側で、カスタム投稿タイプを作成します！
すると投稿とか、固定ページとは別に、ギャラリーを投稿するメニューが追加されて、コンテンツを書くことができるようになります。簡単ですぎです … 。
また、前述したように、index.php などでカスタム投稿をアーカイブ表示させるなら、Advanced Options の中の、has_archive を true にしておくのを忘れずに！
has_archive の設定
5.2. カスタムタクソノミーを作る
では次にギャラリーの中に、写真とかアートとか、デザインというように分類するための、'classify' というカスタムタクソノミーを作ってみます。これもさっきと同じように、Custom Post Types → Add New で分類名、ラベルを入力します。気を付けるのはその下、どの投稿タイプでこの分類を使うか？というところ。
カスタム分類の作成
画面右側で、カスタム分類を作成します！
'classify'という分類はカスタム投稿 “ギャラリー” で使うので、ギャラリーにチェックを入れます。カスタム分類作成ボタンを押せば、これでもうカスタムタクソノミーができちゃいます。
あとはブログのカテゴリーを作るみたいに具体的な分類を作っていけばOKです！サンプルでは、写真、デザイン、アートという分類を作りました。
カスタム分類を使った分類
6. 最後に …
途中、カスタム投稿タイプやカスタムタクソノミーについての説明になってしまいましたが、WordPress を使うとき、ワイヤーフレーム、サイトの設計の段階で、Webページのコンテンツにあったポストタイプを選ぶことが大切だなーって思っています。
実際コーディングをはじめた段階で、これってどのポストタイプを使って、どのテンプレートファイルを使えばいいんだろう … ってことにならないように、事前にしっかり設計したいですね。そのためには各ポストタイプの特徴と、ポストタイプに合わせたテンプレートファイルやテンプレート階層についてもっと勉強しておかないとなーと思う今日この頃 … 。
各ポストタイプでできること、できないこと。それからテンプレートファイルによるデザイン、レイアウトの区別化など、WordPress を使うならチェックしておきたいですね！
またこの記事は以下の過去記事と関連性が強いので合わせて読んでもらえると嬉しいです！
過去記事
とっても長い記事になってしまって、うまくまとめられませんでしたが、最後まで読んでくれてありがとうございました！
Comments
Thank you for the comment.