ACFの関連フィールドを使ったカスタム投稿タイプの関連付け表示方法

WordPressでカスタム投稿タイプを扱う際、Advanced Custom Fields (ACF) プラグインを使用して、異なるカスタム投稿タイプ間の関係を簡単に作成・管理できます。この記事では、ACFの関連フィールドを使用して、カスタム投稿タイプAとBを関連付け、その内容を表示する方法を解説します。

具体的なシナリオ

仮に、カスタム投稿タイプA(例:プロジェクト)とカスタム投稿タイプB(例:クライアント)を用意したとします。クライアントごとに担当しているプロジェクトを表示したい場合、以下の手順で実現可能です。

手順概要

  1. カスタム投稿タイプBの一覧を取得
    まず、カスタム投稿タイプB(例:クライアント)の全投稿を取得します。
  2. 各投稿に関連付けられたカスタム投稿タイプAの投稿を取得
    次に、各クライアントに関連付けられたプロジェクトをACFの関連フィールドを使って取得します。
  3. 関連付けられたカスタム投稿タイプAのリストを表示
    最後に、クライアントごとに関連するプロジェクトをリスト形式で表示します。

実装例

以下に、実際に使えるコードを示します。

<?php
// カスタム投稿タイプB(例:クライアント)の全投稿を取得
$args = array(
    'post_type' => 'client', // カスタム投稿タイプBのスラッグ
    'posts_per_page' => -1,
);

$b_posts = new WP_Query($args);

if ($b_posts->have_posts()) :
    while ($b_posts->have_posts()) : $b_posts->the_post();
        $b_post_id = get_the_ID(); // クライアントの投稿IDを取得
        $b_post_title = get_the_title(); // クライアントのタイトルを取得
        $b_post_permalink = get_permalink(); // クライアントの投稿リンクを取得

        echo '<h2><a href="' . $b_post_permalink . '">' . $b_post_title . '</a></h2>';

        // 関連するカスタム投稿タイプA(例:プロジェクト)を取得
        $args_a = array(
            'post_type' => 'project', // カスタム投稿タイプAのスラッグ
            'meta_query' => array(
                array(
                    'key' => 'related_client', // ACFの関連フィールドの名前
                    'value' => $b_post_id,
                    'compare' => 'LIKE'
                )
            )
        );

        $a_posts = new WP_Query($args_a);

        if ($a_posts->have_posts()) :
            echo '<ul>';
            while ($a_posts->have_posts()) : $a_posts->the_post();
                echo '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
            endwhile;
            echo '</ul>';
        else :
            echo '<p>No related projects found.</p>';
        endif;

        wp_reset_postdata();
    endwhile;
endif;

wp_reset_postdata();
?>

コードの詳細

  1. カスタム投稿タイプBのクエリ
    post_typeclientに設定し、カスタム投稿タイプB(例:クライアント)のすべての投稿を取得します。
  2. 関連するカスタム投稿タイプAのクエリ
    meta_queryを使って、カスタム投稿タイプA(例:プロジェクト)の投稿の中から、ACFの関連フィールドrelated_clientにクライアントIDが含まれている投稿を取得します。
  3. 結果の表示
    各クライアントごとに、そのクライアントに関連するプロジェクトのリストを表示します。

応用例

このコードを応用することで、異なるカスタム投稿タイプ間の関係を視覚的に表示したり、特定の条件でフィルタリングしたりすることができます。たとえば、プロジェクトのステータスやクライアントのカテゴリに基づいてフィルタリングするなど、さまざまな要件に合わせたカスタマイズが可能です。

以上の手順を実行することで、ACFの関連フィールドを活用した柔軟なコンテンツ表示が実現できます。

この記事を書いた人

田島 佑清

2児の父 / ネクストメディア株式会社のエンジニア