カスタム投稿タイプをカテゴリー分類して投稿する方法

はじめに

この記事の概要

こんにちは、株式会社TOKOSのたくまです！

カスタム投稿を投稿する際、カテゴリーごとに分類したいなぁと思うことはありませんか？
例えば下記のような投稿です。

• 本の紹介をする際に小説・漫画・雑誌などに分ける
• 料理を投稿する際に中華・和食・イタリアンで分ける

以上のように分類することで、読者に分かりやすい記事を書くことが可能になるかと思います。
また、投稿側もそれぞれの投稿がグルーピングされることによって管理しやすくなるメリットがあります。
そこで今回はカスタム投稿を使用して簡単にカテゴリーを作成する方法をご紹介します！

対象読者

• WordPressでHPを作成されている方
• カテゴリー分類を付与したい方
• カスタム投稿について勉強されている方

前提として、カスタム投稿タイプとカスタムフィールドを使用して投稿を行っていきます。
なお、投稿を作成するにあたっては、Custom Post Type UI(以下、CPT UI)とAdvanced Custom Fields (以下、ACF)を使用しております。
基本的な作成方法については前回作成した記事でご紹介しておりますので、下記の記事をご確認ください。

カスタム投稿タイプとカスタムフィールドを組み合わせて投稿する

WordPressでカスタム投稿タイプを作成し、Advanced Custom Fields（ACF）でカスタムフィールドを追加する方法を解説。CPT UIを使った投稿タイプ作成から、PHPでthe_field()を用いて表示するまで初心者向けに紹介します。

CPT UIとACFを組み合わせてカスタム投稿を作成する

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

早速投稿から作成していきましょう！
今回は料理の投稿ブログを想定して作成していきます。

まずはCPT UIでカスタム投稿タイプを作成します。

スラッグは端的で分かりやすくするため、今回はfoodとします。
管理画面のサイドバーに表示される名前は料理とします。
その他の設定項目は前回の記事を御覧ください。

これで「料理」というカスタム投稿タイプが作成されました。

カスタム投稿タイプにカスタムフィールドを組み合わせる

続いて作成したカスタム投稿タイプにACFを組み合わせて投稿内容を編集しましょう。
タイトルと投稿日、投稿内容は下記の関数で取得可能なので、今回は料理の画像を投稿できるようにします。

・投稿のタイトルを取得する
<?php the_title(); ?>
 
・投稿日を取得する
<?php the_time('Y/m/d'); ?>
 
・投稿内容を取得する
<?php the_content(); ?>

まずは料理というカスタムフィールドを作成します。

そして、先程作成した料理のカスタム投稿タイプに紐付けます。

ここから、画像投稿するためにフィールドを作成します。
手順としては以下の通りです。

1. フィールドタイプで画像選択
2. フィールドラベルとフィールド名を入力
3. 戻り値の形式で画像URLを選択

この手順で設定すると画像のようになるかと思います。

あとは保存すれば設定は完了です。
これで投稿画面で画像を選択できるようになります。

投稿画面で画像のようなフィールドが表示されていれば大丈夫です。

あとは、[画像を追加]からお好きな画像を選択して、投稿すれば完了です。
phpのコード上で表示をする際は下記のような記述をします。

<img src="<?php the_field('c-food'); ?>" class="c-food">

ここまでの内容で投稿が行えるようになりました。

カテゴリー分類を作成する

ACFの[選択]を使用してフィールドを作成する

ここからは、カテゴリー分類を作成する方法についてご紹介します。

今回はACFのフィールドタイプ[選択]を使用する方法をご紹介します。

では作成していきましょう！
先程のカスタムフィールドで新たにフィールドを作成します。
その際に、フィールドタイプは[選択]にしてください。
そうすることでセレクトフォームが生成されます。

そしてカテゴリーとしての選択肢を作成します。
今回は中華・和風・イタリアンの３種類を作成しました。
フォームの中で改行をすることによって、自動で選択肢を生成してくれます。

設定はこれだけです！
実際の投稿画面を見てみましょう。

上記のように表示されていれば問題はありません。
実際の画面で表示する際は、これまでと同様に<?php the_field(); ?>を使用することで表示が可能です。
あとは適宜CSSを当てて、整えてみてください。
実際に私が作成した投稿は以下のようになります。

以上が簡単にカテゴリー分類を作成する方法です。

さいごに

今回はカスタム投稿にカテゴリー分類を付与する方法をご紹介しました。
今回紹介した方法ならカスタムフィールドに1つフィールドを追加するだけなので、簡単に作成することが可能です。
ぜひお試しください！