カスタム投稿タイプページに関連記事を表示させる方法( Advanced Custom Fieldsを使用)

   

wordpressの記事に「関連記事」を表示させたいとき、
通常であれば「wp related posts」や「YARPP」などのプラグインを使っちゃいます。

しかし、今回求められた仕様は
「表示される関連記事を自分でも選択できるようにしたい」ということ。
しかも対象となるのがカスタム投稿タイプページだったせいで、
どのプラグインを使っても、思ったようになりません…

 

諦めかけたころに、
「Advanced Custom Fieldsの関連が便利すぎてヤバい」
https://irec.jp/wordpress/plugin/relevance-ac-fields/
という記事を見つけ、その通りにやってみたところ、何の苦労もなくできちゃったんです。

それまでの苦悩格闘が無意味になるほど、本当にヤバかったので紹介します。
先ほどの記事を参考にして実際に使用したコードで説明します。

 

Advance Custom Fieldsの設定

まずはAdvance Custom Fieldsの設定です。
「フィールドタイプ」を「関連」にします。
「Elemments」から表示させたい要素を選択。
(今回の例では「アイキャッチ画像」と「タイトル」を選択した状態で説明します)
「Return Format」は「Post Objects」を選択します。

 

関連記事を表示させたい場所に、下記コードを記入

 

<?php $awasete = get_field('hogehoge'); ?> // カスタムフィールド名 hogehoge
<?php if($awasete): ?>
     <ul>
     <?php foreach((array)$awasete as $value):?>

          <?php if(get_the_post_thumbnail( $value->ID )): ?>
          <li>
          <a href="<?php echo get_the_permalink($value->ID); ?>"> // 記事へのリンクが書き出される
          <?php echo get_the_post_thumbnail( $value->ID,'thumbnail' ); ?> // 記事のサムネイル画像が書き出される
          <p><?php echo $value->post_title; ?></p> // 記事のタイトルが書き出される
          </a>
          </li>
          <?php endif; ?>
     <?php endforeach; ?>

     </ul>
<?php endif; ?>

カスタムフィールドを表示させるには、
通常であれば、<?php the_field(‘hogehoge’); ?>だけで良いのですが、
それだけでは表示できないというところがポイントです。

 

 

カスタム投稿タイプは、扱いが難しいので苦手なんですが…
今回の件は、投稿タイプを気にせず利用できて、本当にやばかった!
つか、Advance Custom Fieldsに「関連」なんていう項目があったなんて
全然知りませんでしたよ。

 - ウェブデザイン