「Custom Post Type UI」を使ったカスタム投稿タイプの作り方

「Custom Post Type UI」を使ったカスタム投稿タイプの作り方

  • WordPressでカスタム投稿タイプを作りたい
  • プラグインを使って簡単に作りたい
  • 「Custom Post Type UI」の使い方が知りたい

こんな悩みを解決できる記事を用意しました。

ペンギンくん

カスタム投稿タイプを作ってみるよ

WordPress案件をする上では避けては通れない「カスタム3兄弟」(カスタムフィールド、カスタム投稿、カスタムタクソノミー)クライアントに使いやすいサイトを作ろうと思えば、これらの知識は必須です。

「Custom Post Type UI」というプラグインを使えば、カスタム投稿、カスタムタクソノミーは簡単に作れます。

というわけで、「Custom Post Type UI」を使ってホテルの紹介記事を投稿できるカスタム投稿を作ってみましょう。

ねこ

カスタム投稿タイプを使えるようになるといろんな案件に対応できるようになるよ

「Custom Post Type UI」のインストール

プラグイン → 新規追加 → キーワード「Custom Post Type UI」

インストールして有効化すると、左側のメニューの下の方に「CPT UI」という項目が追加されていると思います。

カスタム投稿タイプの追加する

投稿タイプの追加と編集」からカスタム投稿タイプを作っていきましょう。

まずは「基本設定」の3つの必須項目を入力します。入力できたら「投稿タイプを追加」を押してください。

「基本設定」について

投稿タイプスラッグ
作成するカスタム投稿タイプの名前を登録します
複数形ラベル
管理画面のメニューに表示される名前を登録します
単数形ラベル
あまり気にせずに複数形ラベルと同じ名前で登録しておきます

基本設定の次にある「追加ラベル」の欄は、管理画面で表示される説明などに使われるテキストです。編集せずに初期値のままでOKです。

その下の「設定」欄もほとんどの項目は初期値のままでいいのですが、いくつか調整しておきたいものもあります。

アーカイブあり(基本的にTrue)
Trueにすると、カスタム投稿タイプの一覧ページを表示できる
検索から除外(基本的にTrue)
サイト内検索で検索対象にしたくなければFalse、したければTrue
メニューに表示(基本的にTrue)
この項目と「UIを表示」の両方がTrueになっていると、管理画面に投稿タイプの一覧画面が表示される
サポート
作成する投稿タイプと一緒に使いたい機能にチェックする
タクソノミー
作成する投稿タイプと一緒に使いたいタクソノミーにチェックする

これらの設定項目はあとから変更できるので、とりあえず上記を基本として必要に応じて変更していくみたいな流れになります。(画像では、Trueが真になってますがあまり気にしないでください、、)

カスタム投稿記事の追加と表示する

管理画面のメニューに「ホテル」が追加されていると思うので、そこから「新規追加」で記事を作成しましょう。

適当な内容の記事が3つくらいあればいいと思います。

個別ページの作成する

カスタム投稿タイプ「ホテル」の記事は、他の投稿記事と違うデザインで表示したいので、single-hotel.phpを作成します。

ここまでできればsingle-hotel.phpにカスタム投稿タイプの記事が表示できているはずです。

一覧ページの表示する

同じようにして一覧ページも作っていきましょう。

といっても、archive-hotel.phpを作成するだけです。簡単ですね。

カスタムタクソノミーを作成する

タクソノミーは英語で「分類」という意味です。カスタムタクソノミーをざっくり説明すると、「カスタム投稿タイプ独自のタグやカテゴリーのようなもの」です。カスタム投稿タイプの記事を分類して、一覧表示できるようになります。

カスタムタクソノミーには「カテゴリー型」と「タグ型」を作ることができます。
特徴としては、

  • カテゴリー型は、記事を大きく分類する
  • タグ型は、記事の特徴を示すキーワードを付ける

みたいな感じに思っていただければいいと思います。

カテゴリー型のタクソノミーを作成する

CPT UI 」→「タクソノミーの追加と編集」 から新しいカスタム投稿タイプを追加していきます。

タクソノミースラッグ
作成するカスタムタクソノミーの名前を登録します
複数形ラベル
管理画面のメニューに表示される名前を登録します
単数形ラベル
あまり気にせずに複数形ラベルと同じ名前で登録しておきます

基本設定の次にある「追加ラベル」の欄は、管理画面で表示される説明などに使われるテキストです。編集せずに初期値のままでOKです。

次は「設定」欄を編集します。

※カテゴリー型のタクソノミーを作成するには

  • 階層をTrue
  • UIを表示をTrue(初期値)
  • メニューに表示するをTrue

にすればOK

※タグ型のタクソノミーを作成するには

  • 階層をFalse
  • UIを表示をTrue(初期値)
  • メニューに表示するをFalse

にすればOK

クイック編集を可能にする

設定の「クイック編集 / 一括編集パネルに表示」をTrueに設定しておくと便利なのでおすすめ。

タクソノミーの記事一覧を表示する

カスタム投稿タイプのタクソノミーの記事一覧は、taxonomy.phpで表示します。

おわり

やってみてどうだった?

ねこ

ペンギンくん

プラグインを使えばカスタム投稿タイプは簡単に作れるんだね。

ペンギンくん

まだ不安なところもあるけど、これからはクライアントに使いやすいサイトを提案してみるよ!

以上で、カスタム投稿タイプを簡単に作成できる「Custom Post Type UI」の使い方でした。

カスタム投稿タイプを自在に使えるようになっておくと、クライアントの要望に柔軟に対応できるようになっていいんじゃないでしょうか。