たかなblog

のんびりと色んな情報を発信していきます。

プラグイン

「Custom Post Type UI」を利用して、カスタム投稿タイプを作成しよう。

2014/11/29

こんにちは、高菜です。

今回は「カスタム投稿タイプ」を利用するなら必ずお世話になるプラグイン、「Custom Post Type UI」について紹介したいと思います。

投稿タイプって?

カスタム投稿タイプとは、その名前のとおり自分でカスタムした「投稿タイプ」を作ることができる機能です。

じゃあ「投稿タイプ」ってなんでしょう。

投稿タイプはコンテンツの種類

端的に言えば、投稿タイプはコンテンツの種類です。

WordPressは、色々なコンテンツをわかりやすく整理し管理するためのCMS(Content Management System)を代表するアプリケーションなので、当たり前ですが扱えるコンテンツは一つではありません。
デフォルトでは、以下のコンテンツが用意されており、Wordpressを使う人は、「自分がサイトに追加したい情報は、どれに当てはまるんだろう?」と考え、以下から選んでWordpressに保存します。

投稿 (post)

WordPress での投稿 (post) は、ブログで使われるメインの投稿タイプです。投稿は通常、一番新しいものが最初にくる反時系列順で表示されます。投稿はフィードの作成にも使われます。

ブログとかでいう「記事」のことですね。「カテゴリー」と「タグ」を付けて管理することが可能です。文章を書いていく合間に「メディア」、つまり画像や動画を挿入することもできます。

wordpress2
日付で管理されており、デフォルトではトップページに新しい投稿順で並んでいます。また、「古い投稿」、「新しい投稿」に遷移するリンクがあったり、コメントを付けることもできます。

wordpress4 wordpress5

ページ (page)

WordPress でのページ (page) は投稿に似ていますが、投稿の時系列構造の外にあります。ページはメインのサイトドメインのすぐ下にくる独自 URL を持っており、特別なページテンプレートを使って表示することができます。また、他のページを親に持つ階層化した構造にすることもできます。

固定ページは、新着一覧にも表示されませんし投稿の「古い記事」「新しい記事」で遷移できる構造の中にはありません。
「投稿」とは違い、一つ一つが完全に独立しています。
設定を変更すればフロント(トップページ)に固定ページを表示することが可能です。

wordpress6

また、固定ページには「ページ属性」を設定することができ、固定ページそれぞれに違うテンプレート(デザイン)を適用することができます。また、デフォルトではアルファベット順で管理されている固定ページですが、「順序」に数字を入力することで表示順位を変えることも可能です。

wordpress7

また、既に固定ページを作成していればページ属性欄に「親」フィールドが表示され、階層化するかの選択もできます。便利。

wordpress8

親子関係を付けることにより、見ている人が「今どこにいるか」がわかりやすくなりますし、パンくずリストなどを使って容易に誘導することが可能になります。

wordpress9

固定ページは投稿と違い、「時系列での管理」、「タグ」や「カテゴリ」の付与が行えません。また、デフォルトでの固定ページのテンプレートにはコメントの記入欄もありません。

ちょっとこんがらがってきました。2つの投稿タイプの違いを表にまとめると以下のようになります。

時系列での管理 タグ、カテゴリ コメント 階層 個別テンプレート 表示順の入れ替え
投稿 × × ×
固定ページ × × ×

カスタム投稿タイプって?

WordPressには、デフォルトで「投稿」と「固定ページ」という、2つの投稿タイプがありますが、カスタム投稿タイプを使用すればさらに投稿タイプを増やすことができます。

具体的にどういった時に使用すると便利なのか、例を挙げてみていきましょう。

例題1 お店のHPを作成する場合

あなたはある飲食店のHPをWordpressで作成することになりました。

「季節のキャンペーン情報」などが新着順で表示され、アクセスマップやメニューなどが見れる、飲食店のHPでは一般的な形のものです。

ほとんど更新されず、同じ位置に表示させたいアクセスマップは「固定ページ」で作成します。
記事を書いたら新着順に、TOPページに表示させたい季節のキャンペーン情報は「投稿」で作成することにしました。

問題はメニューをどの投稿タイプで作成するか、です。
固定ページで作成してしまうと、「ランチ」や「ドリンク」といったカテゴリ分けができません。
投稿で作成すると、新着に表示されてしまいますし、テンプレートを触ってカテゴリが「季節のキャンペーン情報」だけをトップに表示することもできますが、RSSフィードから季節のキャンペーン情報以外を除外する設定をしなければなりませんし、「ランチ」ページの階層の下にランチメニューを配置したりなど、親子関係も作りたい。
カテゴリごとに色々編集するよりは、新しく投稿タイプを作ってしまったほうがスマートにできますよね。

どのようなサイトデザインにするのか、どのように運営するのかを考える時点で、カテゴリで分岐させ処理を分けることが多くなりそうであれば、カスタム投稿タイプを検討してみることをお勧めします。

例題2 学園祭で、各お店のPRページを載せることになった。

あなたはとある大学のHPを管理している管理者です。
今度の学園祭で、学校のHPに学園祭の特設ページを作成し、その中に各店のPRページを作成させることになりました。

どのような紹介ページにするのかは学生たちの自主性に任せる、ということで、学生自身にページを作成させることになったのですが、学生たちには自分の店のページ以外触らせたくありません。

そこで、あなたは店の数分のカスタム投稿とユーザーを作成し、それぞれに自分の店のカスタム投稿以外のページは編集できないように制限を設けました。

このように、カスタム投稿タイプには投稿や固定ページと同じく独自で権限を制限することができます。今回は学園祭とかなりの数のカスタム投稿が必要なので現実的ではありませんが、2、3人でサイトを運営したい場合など便利かもしれません。

例題3 独自入力項目や必須入力項目を設けたい

カスタムフィールドとの合わせ技で、作成したカスタム投稿タイプから投稿した場合、独自のフィールドを表示するようにします。
例えば不動産会社の物件情報で、住所や物件名、広さや価格など独自のフィールドを設け、そこに項目を打ち込むだけにすることも、必須入力を設けることも可能です。

例1で出てきた飲食店のメニューなんかでもいいですね。価格、メニュー名、メニューの説明、画像、など、毎回同じことを入力する場合は独自のフィールドを用意して、それを埋めるだけにしてしまったほうが効率がよさそうです。

また、独自フィールドでフィールドを分けてしまえば、後からデザインを変更するときも楽ですし、価格順に並び替える、なんてことも可能になりますね。

Custom Post Type UI の使用方法

本題です。カスタム投稿タイプを作成する場合、functions.phpに記載するかCustom Post Type UIというプラグインを作成するかのほぼ2択になるかと思います。

functions.phpに記載する場合は、テーマを変更すると設定したカスタム投稿タイプが消えてしまったりするので、作成し終わった後で自分でプラグイン化すしておくことをお勧めします。

Custom Post Type UIは広く使われているプラグインで、functions.phpに自分で記載するのとほぼ同じことができる上、すでにプラグイン化されているので管理がしやすいです。

自分がいくつどのようなカスタム投稿タイプを作成したのか?それぞれのプロパティはどのような値が設定されているのか?
が一覧化されており一目でわかることと、不要になればすぐに停止/削除ができるため、特に理由がなければこのプラグインを使用して追加することをお勧めします。

インストールと有効化

Custom Post Type UIはプラグインディレクトリに登録されているので、Wordpressの管理画面の、プラグイン>新規追加より検索できます。
「Custom Post Type UI」と検索すると一番上に出てくるので、インストールして有効化してしまいましょう。

有効化すると管理画面に「CPT UI」という項目が追加されます。

Custom Post Type UI

カスタム投稿タイプの新規作成

管理画面のCPT UIの「新規追加」より追加していきます。
クリックすると英語の入力画面が出てきますが、臆せず進みましょう。

Custom Post Type UI 2

 

左にカスタム投稿タイプ、右にカスタム分類(カスタムタクソノミー)を追加する入力フォームが出てきます。
カスタム投稿タイプを追加したいので、左側の項目を入力していきます。

因みに、左側の入力フォームの一番上には、英語で以下の文言が記載されています。

If you are unfamiliar with the options below only fill out the Post Type Name and Label fields and check which meta boxes to support. The other settings are set to the most common defaults for custom post types. Hover over the question mark for more details.

あなたがもしオプションに慣れていなければ、投稿タイプ名とラベルのフィールドに必要事項を記載し、サポートのメタボックスにチェックしてください。他の設定はカスタム投稿タイプを使用するための、もっとも一般的な設定になっています。詳細については疑問符の上にカーソルを置いてね。

とのこと。ここでいう「サポートのメタボックス」というのは、画面のAdvanced Optionsをクリックしたときに表示される「サポート」の欄のことだと思われます。これは後述しますね。

それでは入力していきます。
Custom Post Type UI 3

投稿タイプ名:

主にプログラム上で使用する投稿タイプ名を指定します。ここで指定できるのは半角小文字の英数のみです。大文字やスペースを含めることはできません。
すでにWordpressで使用されている「post」「page」「attachment」「revision」「nav_menu_item」以外の投稿タイプ名を指定してください。

ラベル:

管理画面上に表示される名前です。こちらにはスペースや大文字、日本語も使用できます。

単数形のラベル:

英語圏ではないのでイメージがわきにくいですが、[Books]と[Book]みたいに、明確に単数形と複数形を分けたい場合に使用します。
特にこだわりがなければラベルと同じものを入力してください。
未入力でも登録できますが、その場合Show in MenuをTrueにした際に表示されるラベルがブランクになります。

説明:

自分が後でなぜこのカスタム投稿を作成したのかわからなくならないように、説明を追加することができます。
特にどこかで使用されることもないので、不要であれば未入力でもOKです。

ラベルオプションの設定

必要事項を記入したら、「Advanced Label Options」をクリックして、管理画面に表示されるラベルの詳細を設定していきます。
※デフォルトでOKであれば、飛ばしてもいいです。

Custom Post Type UI 4

ラベルオプションを表示させると、英語でラベルオプションについての説明が出てきます。

Below are the advanced label options for custom post types. If you are unfamiliar with these labels, leave them blank and the plugin will automatically create labels based off of your custom post type name

以下ではカスタム投稿のための高度なラベルオプションです。あなたがこれらのラベルに慣れていない場合は空白のままにしておくと、プラグインは自動的に投稿タイプ名に基づいたラベルを作成します。

とのこと。

基本的には入力欄の下に表示されている例がそのまま表示されます。英語表記が気持ち悪ければ、左に書かれている日本語をそのまま、もしくは「項目」部分を上で設定したラベル名に置き換えて記載してあげたらいいかと思います。

まぁここは管理画面でどのように表示されるか、なので自分がわかれば設定しなくても、逆に遊んでみても構いません。

カスタム投稿タイプのオプションを設定する

設定したいラベルのみ記載したら、今度はオプションを変更していきましょう。
ここを自由に設定できることがカスタム投稿タイプの最大のメリットなので、イメージしにくいオプションもありますが是非すべてに目を通してみてくださいね。

先ほどの「Advanced Label Options」のとなりにある、「Advanced Options」をクリックしてください。

Custom Post Type UI 5

クリックすると、「Advanced Label Options」で追加表示した項目の下にフォームが出てきます。

Custom Post Type UI 6

しれっと出てきているのでわかりにくいですが、「親」までがラベルオプション、「一般公開」からがAdvanced Optionsで表示した項目です。

長いので分割して説明していきます。

Custom Post Type UI 7

一般公開:

作成したページを普通に公開するのであればデフォルトのTrueにしてください。上記の学園祭の例のように、特定の人にのみ対象のカスタム投稿を表示させたいとか、他のオプションと一緒に使うオプションです。

UIを表示:

管理画面上にカスタム投稿タイプを表示するかどうかの項目です。上の一般公開と一緒に設定します。普通に使用するのであればデフォルトのTrueにしてください。

Has Archive:

アーカイブページを持たせるかどうかの設定です。カスタム投稿タイプで作成された記事の一覧ページを使用するのであれば、ここをデフォルトのFalseからTrueに変更してください。

Exclude From Search:

フロントエンドの検索結果(サイト内検索機能での検索結果のことです)に、カスタム投稿で作成した記事を含めるかどうかの設定です。
デフォルトではFalseになっていますので、サイト内検索の結果に表示したい場合はFalseのまま変更しないでください。
※2014/11/29修正。ご指摘ありがとうございました。

利用タイプ:

権限のデフォルトを設定します。このカスタム投稿について、特定のユーザーにのみ表示したい、とか編集したい、という場合はほかのオプションと一緒にここを利用することになりますが、一人でWordpressを運用する分にはデフォルトのpostで問題ありません。

階層:

Trueにすると固定ページのように記事同士に親子関係を持たせることができます。

リライト:

ポストタイプの書き換えを許可するかの設定です。これをFalseに設定すると、カスタムリライトスラッグ、with_front等の設定が反映されなくなりますので注意。

カスタムリライトスラッグ:

デフォルトでは、カスタム投稿の記事URLはhttp://takanablog.tank.jp/投稿タイプ名/ となっていますが、それを変更したい場合に入力してください。

続きます。

Custom Post Type UI 8

 

With Front:

カスタムリライトスラッグ同様、カスタム投稿のURLを変更するためのオプションです。
パーマリンク設定などで、通常の記事のURLをhttp://takanablog.tank.jp/blog/%postname%/等に変更している場合、カスタム投稿にも設定が適用され、URLがhttp://takanablog.tank.jp/blog/投稿タイプ名/投稿スラッグになります。

With Frontの設定をFalseに変更すると、カスタム投稿タイプにはパーマリンク設定が適用されずデフォルトのhttp://takanablog.tank.jp/投稿タイプ名/投稿スラッグ/ となります。

クエリバージョン:

functions.phpで指定する場合はTrue、Falseのほかに自分で文字を入力することもできるようですが、このプラグイン上ではTrueかFalseしか設定できないようです。

Falseにするとクエリのロードが無効になり、http://takanablog.tank.jp/?カスタム投稿タイプ名=カスタム投稿スラッグ のURLでは記事にアクセスできなくなります。
勿論http://takanablog.tank.jp/?post_type=カスタム投稿タイプ名&name=個々のカスタム投稿のスラッグ
のようにきちんと明示してあげれば、falseでも記事を取得することは可能です。

まぁこれはどちらかといえば、アーカイブページとかを作るときにここにstring(文字列)を突っ込んで、、とかやるんでしょうね。
URLをごちゃごちゃしたい時に見る場所、という感じでデフォルトのTrueのままで問題ありません。

メニューの位置:

管理画面の左側にあるメニューのどの位置にカスタム投稿タイプを表示させるかを指定できます。
5-100の範囲で入力してください。
因みに5だと投稿のすぐ下に表示され、10だとメディアの下、という風に5刻みで下に移動するようです。

Show in Menu:

画面の上のほうに表示されているメニューに表示するかどうかを設定できます。+新規に表示させたくない場合はFalseにしてください。

Custom Post Type UI 10

上記は「ナレッジ」という投稿タイプを追加した例です。

また、下の入力欄に「tools.php」などの管理画面のメニューのファイルを指定すると、カスタム投稿タイプをサブメニューとして表示することができます。

具体的にいうと、管理画面に「ツール」というメニューがありますが、こちらをクリックすると「tools.php」というファイルが読みこまれます。そのファイル名を指定すると、ツールの下のサブメニューとしてカスタム投稿タイプが追加されます。

Custom Post Type UI 11

Menu Icon:

メニューの横に表示されるアイコンを指定できます。デフォルトだと投稿と同じピンのアイコンです。
アイコンを変えたい場合は、アイコンとして表示したい画像のフルパスを入力する必要があります。
ただし、ピンのアイコンのようにWordpressにデフォルトアイコンとして使用されているフォント、「dashicons」を使用する場合はアイコン名を記載するだけでOKです。

アイコン名は公式サイトより確認してください。

http://melchoyce.github.io/dashicons/

サイトにアクセスし、表示したいアイコンをクリックすると上のほうに表示されるアイコンがクリックしたアイコンに変わります。
あとはアイコンの横に表示されている名前をコピーし、Menu Iconの欄に貼り付けるだけです。

Custom Post Type UI 12

 

上の画像だと、「dashicons-twitter」がアイコン名になります。

もう少し続きます。あと2項目ですのでお付き合いお願いします。

Custom Post Type UI 13

 

サポート:

編集画面で表示する項目を選択できます。シンプルな編集画面を作れることがカスタム投稿タイプのメリットなので、どんどん削ってください。

ビルドイン分類:

編集画面にカテゴリーやタグのような分類を表示するかを選べます。デフォルトではチェックが入ってないので、記事にタグやカテゴリーを追加するための入力フォームが出てきません。

カスタムタクソノミーでオリジナルの分類を追加した場合、ここに表示されチェックできるようになります。

 

すべての必要項目を確認できたら、一番下に表示されている「Save Custom Post Type」をクリックしてください。
カスタム投稿タイプが追加されて、管理画面に表示されます。

カスタムタクソノミーって?

「Custom Post Type UI 」プラグインでは、カスタム投稿だけでなくカスタムタクソノミー(カスタム分類)も追加することができます。

といっても、カスタム投稿には必ずカスタムタクソノミーを使わなければならない!なんてルールはありません。
カスタム投稿の一番最後の設定項目、ビルドイン分類で「カテゴリ」や「タグ」にチェックを付ければ、投稿と同じようにカテゴリーやタグを使うことができます。

それでもわざわざカスタムタクソノミーを作成して使う一番のメリットは、「投稿で作成したカテゴリーやタグが表示されない」ということじゃないかなぁと思います。

例えば、「投稿」から「日記」というカテゴリーを作成したとします。
ナレッジというカスタム投稿を作成し、そこでもカテゴリー(というか分類分けをする機能)を使いたかったので、ビルドイン分類のカテゴリーにチェックを付けたとしますよね。

すると、投稿から作成したとしてもカテゴリーはカテゴリーなので、ナレッジの投稿画面のカテゴリー一覧に「日記」が表示されているわけです。

「投稿」だろうが「ナレッジ(カスタム投稿)」だろうがかまわず横断的に分類したいならいいのですが、作成したカスタム投稿だけ分類したい場合、投稿で作成したカテゴリーが出てきちゃ困りますよね?

カテゴリーアーカイブのページで投稿とナレッジの記事がごっちゃになって表示されたり、関連記事をカテゴリで引っ張ってきていて、ブログの関連記事にナレッジが表示されたり、、

そんなことを防ぐために、また新しく記事を作成するときに迷わないように、「ナレッジのカテゴリー」等の新しい分類を作ってあげるとわかりやすいですよね。

勿論、横断的に分類する「カテゴリー」と、投稿だけを分類する「投稿のカテゴリー」、ナレッジだけを分類する「ナレッジのカテゴリー」を作成してそれぞれ管理するのもアリだと思います。

商品というカスタム投稿を、ブランドというカスタム分類で分類する、など「カテゴリー」ではなく全く違う文言にすることもできます。そうすると、実際に記事を書いたり分類を作成する人は、何を作成すればいいのか、どう分類すればいいのかよりわかりやすくなりますね。

さらに!カテゴリーと投稿のカテゴリーを使う、、という記載で気づいた方もいるかと思いますが、この分類は一つの投稿タイプにつきいくつでも設定できます。

例えばデフォルトの設定だと投稿には「カテゴリー」と「タグ」の二つの分類がありますが、それにさらに分類を追加することができます。

カスタム投稿で「メニュー」というのを作ったとして、「カテゴリー」には「ドリンク」「デザート」「ランチ」などが登録されているとします。それとは別に、カスタムタクソノミーで「価格」という分類を作り、「500円以下」「501円~1000円」等と価格帯で商品を分類したり、いい名前は思いつきませんが、、「メニュー情報」といった分類を追加して、「おすすめ」「新メニュー」「季節のメニュー」等で分けることもできますね。

まぁ、階層を利用すればカテゴリーだけでもいけるのですが、入力フォームをよりシンプルに、簡単にわかりやすく作るか、を考えたときカスタムタクソノミーがあれば選択肢は広がると思います!

さいごに。

今回はカスタム投稿についての紹介と、プラグインCustom Post Type UI を使ったカスタム投稿の作成方法の紹介でした。

カスタムタクソノミーやカスタムフィールドなど、Wordpressにはカスタム系がまだまだたくさんあります!既存のブログに挿入するにはあまりイメージはわかないかもしれませんが、新しいサイトをカスタム投稿タイプ&カスタムタクソノミーで作成するのはとても楽しいですよ。

最後に少し説明しただけですが、もしこの記事が好評であればカスタムタクソノミーの作成方法や使用の具体例などは、また別で記事にしたいなぁと思いますので、よければコメントや拡散をお願いします(笑

ありがとうございました!


たかなblogでは、これをまとめてほしい!という疑問を募集しております。
気になったもの、多かったものを記事にしていく形になるかとは思いますが、何かを探すとき、ネットから色々情報を拾って整理するのって、自分でやると意外と時間がかかるんですよね。

そういったものを探すお手伝いが出来ればと思っています。
ご希望があれば是非お気軽にコメント欄へ!
コメントは基本、私が承認すると表示される仕様になっているため(スパム防止)、コメントを送信したのに表示されるのに2、3日かかる、ということもございます。
確認次第公開していきますのでお待ちください。

それではまた。

-プラグイン
-, , ,

おすすめ記事

1
12月目前!クリスマスグッズ、どんなものに関心が集まっているの?

今回気になってまとめてみたのは、「クリスマスの人々の関心」について。 昨年(20 ...

2
年賀状印刷、業者に委託してでオシャレに?自宅で徹底的にこだわる?

年賀状作成は、プロにお願いする時代!? 年賀状のテンプレートが簡単に手に入るよう ...

3
ハロウィン、クリスマスに!とにかく可愛いコスプレ子供服【最新版】

ハロウィンも終わり、クリスマスが楽しみな季節になりました! これからクリスマスパ ...