簡単で便利！Advanced Custom Fieldsの｢関連｣で関連記事を手動で選択・表示する

2023.10.27

※当ブログのリンクには一部広告が含まれています。

ブログ記事の下や任意の場所に、関連する記事やオススメ記事のリストを表示させる方法は色々ありますよね。例えば、自動的に関連記事を抽出して表示してくれるプラグインなどありますが、意図的に自分で記事を選びたい場合も度々あります。

そんな時に活躍してくれるのが、Advanced Custom Fieldsの「関連」機能です。

カスタムフィールドで条件を指定した内容のリンク付き記事のリストが編集ページで表示されるので、手動といってもタイトルやURLをそれぞれコピペするような煩わしさはありません。実は最近までその存在に気が付かずにいたのですが、お仕事で改めて使ってみると便利だったのでご紹介します。

今回は下の図のように、投稿記事の下部に手動で選んだ関連記事を5件表示させてみたいと思います。

Advanced Custom Fieldsのインストールと基本的な設定方法については以下の記事でまとめています。

参考記事【画像付き】Advanced Custom Fieldsのインストールと基本的な設定方法

「関連」のカスタムフィールドを作成する
投稿記事の編集ページ
「関連」の出力方法
ACFを更に使いやすくするACF Pro

「関連」のカスタムフィールドを作成する

Advanced Custom Fieldsのカスタムフィールド作成画面で、以下のようなカスタムフィールドを作成します。

フィールドラベル: 編集ページで表示される名前です。今回は「オススメ関連記事」としました。
フィールド名: recommend_posts
フィールドタイプ: 関連
Returen Format: カスタムフィールドの戻り値を指定します。今回は「Post Objects」を選択して、カスタムフィールドの様々な情報を配列で返してもらいます。
投稿タイプ: 投稿の編集ページで表示させる記事の投稿タイプを選びます。今回はブログの投稿記事から記事を選ぶので「post」を指定しています。
タクソノミーでフィルタする: 投稿の編集ページで表示させる記事のカテゴリーを選びます。
フィルター: 編集ページでの記事一覧の検索機能を選択します。
Elements: 編集ページの記事一覧で表示する要素を選択します。
最大投稿数: ここで数を指定すると、それ以上の記事は選べなくなります。

投稿記事の編集ページ

編集ページに行くと、下の図のようにカスタムフィールドで指定した内容の記事一覧が表示されています。検索窓から検索することが可能です。

ページに表示させたい記事を左コラムから選ぶと、その記事が右コラムに移動します。ドラッグ&ドロップで並べ替えができます。

「関連」の出力方法

カスタムフィールド作成時に返り値を「Post Objects」に指定したので、フィールドの値が配列で返ってきます。以下はforeachでデータを取り出した例です。アイキャッチ画像がある場合は、get the post thumbnailで画像を表示させてもいいですね。

<?php
$posts = get_field('recommend_posts');
if( $posts ):
 ?>
<h3>オススメ関連記事</h3>
	<ul>
	<?php foreach( $posts as $val ): ?>
	    <li>
	    	<a href="<?php echo get_permalink( $val->ID ); ?>"><?php echo get_the_title( $val->ID ); ?></a>
	    </li>
	<?php endforeach; ?>
	</ul>
<?php endif; ?>

公式ページにも他の出力方法がいくつか掲載されています。

Relationship（英語）|ACF

「関連」を指定したカスタムフィールドrecommend_postsの中身は以下のようになっています。

    Array
(
    [0] => WP_Post Object
        (
            [ID] => 78
            [post_author] => 1
            [post_date] => 2017-08-09 11:12:48
            [post_date_gmt] => 2017-08-09 02:12:48
            [post_content] => 疲れない通勤シューズ特集
            [post_title] => 疲れない通勤シューズ特集
            [post_excerpt] => 
            [post_status] => publish
            [comment_status] => open
            [ping_status] => open
            [post_password] => 
            [post_name] => good-shoes
            [to_ping] => 
            [pinged] => 
            [post_modified] => 2017-12-19 15:38:24
            [post_modified_gmt] => 2017-12-19 06:38:24
            [post_content_filtered] => 
            [post_parent] => 0
            [guid] => http://www.xxxxxx.com/xxx
            [menu_order] => 0
            [post_type] => post
            [post_mime_type] => 
            [comment_count] => 0
            [filter] => raw
        )

    [1] => WP_Post Object
        (
            [ID] => 48
            [post_author] => 1
            [post_date] => 2016-05-11 09:05:26
            [post_date_gmt] => 2016-05-11 00:05:26
            [post_content] => メンズ・夏にビルケンシュトック！
            [post_title] => メンズ・夏にビルケンシュトック！
            [post_excerpt] => 
            [post_status] => publish
            [comment_status] => open
            [ping_status] => open
            [post_password] => 
            [post_name] => birken
            [to_ping] => 
            [pinged] => 
            [post_modified] => 2017-12-19 15:17:30
            [post_modified_gmt] => 2017-12-19 06:17:30
            [post_content_filtered] => 
            [post_parent] => 0
            [guid] => http://http://www.xxxxxx.com/xxx
            [menu_order] => 0
            [post_type] => post
            [post_mime_type] => 
            [comment_count] => 0
            [filter] => raw
        )
       //....(以下略)

ACFの「関連」は工夫次第で色々な使い方ができそうですね。

ACFを更に使いやすくするACF Pro

Advanced Custom Fieldsでは、次世代バージョンのACFとACFを更にパワーアップさせた高機能なアドオン（The Repeater Field、The Gallery Field、The Flexible Content Field、Clone field、Options Pages）がパッケージ化された「ACF Pro」という有料プラグインが用意されています。便利な機能が多く搭載されているのでオススメです！

参考記事Advanced Custom Fieldsを更に使いやすく！ACF Proを選ぶ理由と機能紹介

ACF関連記事