スタッフブログ

カスタムフィールド(ACF)の投稿オブジェクトの使い方

2023.09.19

ACF投稿オブジェクト設定方法

WordPressの固定ページや投稿をカスタマイズできるプラグインで有名なAdvanced Custom Fieldsには「投稿オブジェクト」というフィールドタイプが準備されています。

今回は「投稿オブジェクト」を使って、商品ランキングを表示する方法をご紹介します。

■以前
以前までは、並び替えプラグイン「Intuitive Custom Post Order」を使って、投稿順番の上からいくつか表示させるか、投稿の日時(古い順か、新しい順)で表示させる方法をとっていました。

しかし、上記の方法では投稿のたびに順番を入れ替えたり、投稿の日時を一回一回変更する必要がありました。

■今回実装すること

投稿オブジェクトを使って、固定ページ(今回はTOPページ)からランキング商品を変更する。

投稿オブジェクトとは

ACFの投稿オブジェクトとは、登録された投稿や固定ページの情報を取得し、特定のページで表示させることが出来るフィールドタイプです。

投稿やタクソノミー、タームごとに絞り込みも出来るため、例えばタームごとの商品ランキングみたいなものも対応可能です。

今回は、TOPページで商品(カスタム投稿)の情報を取得して、ランキングとして表示します。

投稿オブジェクトの設定方法

投稿オブジェクト設定方法01

ACFの管理画面の新規追加から通常通り追加します。
フィールド名は任意のものにしてください。今回は「メニューランキング」とします。

投稿オブジェクト設定方法02

通常のフィールド同様に登録していきます。
フィールドタイプを「投稿オブジェクト」にしてください

「投稿タイプで絞り込み」は今回商品(カスタム投稿)を選択します。固定ページ、メディア、投稿が選択できます。

「タクソノミーで絞り込み」は今回は選択せずに進みます。ここでタクソノミーで絞り込みたい場合は、任意のものを選択してください。選択したタクソノミーに属する投稿やページのみが選択できるようになります。

「複数の値を選択できるか?」をはいにしておきます。ランキングのため複数選択したいためです。
一つのみ選択できれば良い場合は、いいえのままにしてください。

返り値は投稿オブジェクトにします。

投稿オブジェクト設定方法03

今回はルールでフロントページを選択します。他の下層ページや投稿で取得したい場合は、任意のものに変更してください。
フロントページにカスタムフィールドを設定する場合は、home.phpからfront-page.phpに変更して、固定ページ化しないといけないので注意してください。

管理画面での投稿オブジェクトの設定方法

投稿オブジェクト管理画面での設定方法

投稿オブジェクトを設定したページ(今回はTOPページ)の編集画面に進むと、先ほど設定したフィールドが出てきます。
今回は商品を設定したので、商品投稿に属している投稿のみ選択できるようになっています。
複数選択可にしているので複数選択することができます。

投稿オブジェクトの出力方法

今回は返り値を投稿オブジェクト、複数選択可で設定しているので、その想定で出力方法を記述していきます。

投稿オブジェクトの返り値

返り値を投稿オブジェクトにした場合の返り値は下記になります。
基本IDを使っていくので返り値は投稿IDでいいかもしれませんね・・・。

  1. object(WP_Post) {
  2. [“ID”]                    => int(123) “投稿 ID”
  3. [“post_author”]           => string() “作成者ID”
  4. [“post_date”]             => string() “投稿日時 (YYYY-MM-DD HH:MM:SS)”
  5. [“post_date_gmt”]       => string() “GMT での投稿日時 (YYYY-MM-DD HH:MM:SS)”
  6. [“post_content”]          => string() “コンテンツ本文”
  7. [“post_title”]            => string() “タイトル”
  8. [“post_excerpt”]          => string() “抜粋”
  9. [“post_status”]           => string() “公開ステータス”
  10. [“comment_status”]    => string() “コメントステータス”
  11. [“ping_status”]           => string() “ピンバック/トラックバックステータス”
  12. [“post_password”]         => string() “閲覧パスワード”
  13. [“post_name”]             => string() “スラッグ”
  14. [“to_ping”]               => string() “ピン通知 URL”
  15. [“pinged”]                => string() “ピン通知済み URL”
  16. [“post_modified”]         => string() “更新日時 (YYYY-MM-DD HH:MM:SS)”
  17. [“post_modified_gmt”]     => string() “GMT での更新日時 (YYYY-MM-DD HH:MM:SS)”
  18. [“post_content_filtered”] => string() “”
  19. [“post_parent”]           => int()    “親 ID (固定ページや添付ファイルなどで使用)”
  20. [“guid”]                  => string() “http://example.com/?p=123”
  21. [“menu_order”]            => int()    “固定ページ の表示順序。”
  22. [“post_type”]             => string() “投稿タイプ”
  23. [“post_mime_type”]        => string() “添付ファイルのとき MIME タイプ”
  24. [“comment_count”]         => string() “コメント数”
  25. [“filter”]                => string() “raw”
  26. }

ループを回す(複数選択されいている場合)

投稿が複数選択されている場合は、ループを回して各投稿情報を取得する必要があります。

<?php
$object = get_field(‘ranking’);
foreach ((array)$object as $value):
?>
出力内容を表示する
<?php endforeach; endif; ?>

投稿オブジェクトの出力(基本)

返り値で設定されているタイトルなどはそのまま表示が可能です

  1. //タイトル
  2. <?php $value->post_title; ?>
  3. //パーマリンク
  4. <?php get_the_permalink($value->ID); ?>
  5. //アイキャッチ
  6. <?php get_the_post_thumbnail( $value->ID,’サイズ’); ?>
  7. //投稿日時
  8. <?php get_the_date(‘Y.m.d’,$value->ID); ?>
  9. //カテゴリ
  10. <?php
  11. $categorys = get_the_category($value->ID);
  12. $category = $categorys[0];
  13. $cat_name = $category->cat_name;
  14. ?>
  15. <?php $cat_name; ?>

投稿オブジェクトの出力(応用)

投稿オブジェクトで取得した投稿のカスタムフィールドを取得する場合は、通常のカスタムフィールドの取得コードに投稿IDを指定するだけ。

<?php the_field(‘フィールド名’, $value->ID); ?>

実際のコード

投稿オブジェクト取得コード

実際に投稿オブジェクトでランキング表示させたコードは上記になります。
画像部分はごちゃごちゃしていますが、あまり気にしないでください笑

まとめ

今回は投稿オブジェクトを使ってTOPページに商品投稿を表示する方法を書いてみました。
たくさんのフィールドがあり、それぞれのフィールドで表示方法なども変わってくるため、扱いが中々難しかったりしますが、使いこなせるとサイトのカスタマイズのレベルが上がって楽しくなってきますよ!・・・たぶん笑

CONTACT

090-6073-9250

担当:足立 お気軽にお問合わせ下さい。

お電話かメールにて、お気軽にお問合わせ下さい。

Catworkには名古屋市を中心に、全国からたくさんのご依頼をいただきます。
電話、メール、ZOOM、Line、チャットワーク等様々なツールを使ってやり取りをさせていただいております。
製作開始から運用まで距離を感じさせない対応を心がけていきます。このたびはCatworkのホームページをご覧いただき誠にありがとうございます。
これからもCatworkをよろしくお願いいたします。

メールでのお問合わせ

持続化補助金について

IT補助金について

ウェブスクール