noseblog

menu

2019.6.15

Custom Post Type UIとAdvanced Custom Fieldsを組み合わせてカスタム投稿タイプを作成する方法

こんにちは、のせです。

今回はwordpressサイト制作でよく使われるプラグインであるCustom Post Type UI(CPT UI)とAdvanced Custom Fields(ACF)を利用して下の画像のようなシンプルなカスタム投稿タイプを作成したいと思います。

手順としては以下の通りです。

  • CPT UI , ACFをインストール
  • CPT UI でカスタム投稿タイプ、カスタムタクソノミーを作成する
  • ACFでカスタムフィールドを作成する
  • カスタム投稿タイプに投稿を追加する
  • phpを記述して投稿内容を出力する

それでは作っていきましょー

Custom Post Type UI、Advanced Custom Fieldsをインストール

「プラグイン」→「新規追加」からCustom Post Type UIとAdvanced Custom Fieldsをインストールしましょう。

CPT UI でカスタム投稿タイプ、カスタムタクソノミーを作成する

はじめに新たな投稿タイプ「メニュー」を作成し、その後「メニュー」にカスタムタクソノミーの「メニューカテゴリー」を作成します。

カスタム投稿タイプを作成する

ダッシュボードにて「CTP UI」→「投稿タイプの追加と編集」画面にいきます。

次のように入力します。

投稿タイプスラッグは、投稿タイプのスラッグ名ですので英数字で記入しましょう。

複数形ラベルは投稿タイプの名前です。単数形ラベルは複数形ラベルと同様にしておけば大丈夫です。

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

ダッシュボードにて「CTP UI」→「投稿タイプの追加と編集」画面にいきます。

次のように入力します。

かスタムタクソノミー スラッグは、投稿タイプのスラッグ名ですので英数字で記入しましょう。

複数形ラベルはカスタムタクソノミーの名前です。単数形ラベルは複数形ラベルと同様にしておけば大丈夫です。

一旦ダッシュボードを確認するとカスタム投稿タイプ「メニュー」が追加されていることがわかります。

メニューカテゴリーの”フード”と”ドリンク”を作成する

「ダッシュボード」→「メニュー」→「メニューカテゴリー」画面を表示する。

新規メニューカテゴリーを追加の欄で以下のように入力をして[フード]と[ドリンク]を作成しましょう。

カスタム投稿タイプとかスタムタクソノミー の設定は以上になります。

ACFでカスタムフィールド を作成する

次にアドバンスカスタムフィールドの設定をします。

ダッシュボードにて「アドバンスカスタムフィールド」→「新規追加」画面にいきます。

今回追加するカスタムフィールドはこちらにになります。

フィールドの種類 用途
メニュー名 メニューの名前を指定する
メニューイメージ メニューの画像を指定する
価格 メニューの価格を指定する
コメント メニューの紹介文を記載する

 

初めに新しいフィールド「メニュー名」を作成してみます。

“フィールドを追加”を押して、次のように入力します。

メニュー名の入力が終わったら、メニューイメージ、価格、コメントも追加していきましょう。

最終的には次のようになります。

最後にメニューフィールドを作成したカスタム投稿タイプ「メニュー」と紐づけるために位置を設定します。

フィールドタイプの説明と使い方についてはこちらのサイトに非常に丁寧に記載されているので、もしよければご参照ください

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

作成した投稿タイプ「メニュー」に投稿を追加していきます。

カスタムタクソノミーであるメニューカテゴリーと、ACFにて設定したカスタムフィールド であるメニュー名、メニューイメージ、価格、コメントを次のように設定しましょう。

メニューカテゴリーにはフード or ドリンクを追加しましょう

こんなかんじで投稿を5つほど追加しましょう。

これにてコーディング前の下準備は整いました。

phpを記述して投稿内容を出力する

それでは最後にphpを書いて、投稿内容をwebサイトに出力しましょう。

次のように入力しましょう。

カスタムフィールドはフィールドタイプによって、出力方法が少し違います。

それぞれのフィールドタイプの出力方法はこちらのサイトに詳しく解説されています。

こちらの記述でカスタムタクソノミーの出力しています(ここではフード or ドリンクを出力)。

 

cssはこちらになります。

 

説明は以上になります。

補足:カスタムタクソノミー のターム(ドリンク、フード)で条件分岐する方法

最後に補足でカスタムタクソノミーのタームに応じて条件分岐させる方法について解説します。ググってもあまり出てこなかったのでメモがてらに補足しておきます。

今回はフードとドリンクという2つのタームを作成しました。

こちらの画像のようにfoodとドリンクを分けて表示させるためのphpとcssをおまけで載せておきます。

phpはこちらです。

 

22,54行目のis_object_in_term()関数でfoodとdrinkで条件分岐をさせています。

cssはこちらになります。1つ目のcssとほとんど変わりませんが一応載せておきます。

 

おわり

以上、”Custom Post Type UIとAdvanced Custom Fieldsを組み合わせて自分だけのカスタム投稿タイプを作成する方法”でした

CTP UI や ACFはとても便利なプラグインですので、ぜひ使いこなしてみてください。