WordPressで「関連記事」を構築したければ『Advanced Custom Fields』の「関連」がオススメ

WordPressでブログサイトを構築するにあたり、singleページ末尾の「関連記事（あわせて読みたい記事）」をどのように出力するかは悩みどころだ。

筆者はこれまで、自作のコードで構築したり、『Yet Another Related Posts Plugin(YARPP)』などのプラグインに頼ったりしたが、意外なところにたどり着いた。それが『Advanced Custom Fields』の「関連」だ。

『Advanced Custom Fields』といえばカスタムフィールド系プラグインの王道ではあるが、「関連記事」まで構築できるとは恐れ入った。

1記事1記事手動で関連記事を選ばなくてはならず多少手間ではあるが（つまり自動選定ではない）、精度は高まるのでそのほうが良いだろう。おすすめだ。

『Advanced Custom Fields』の「関連」で関連記事を出力する

ACF側の設定

『Advanced Custom Fields』のインストール方法や、基本的な使い方は割愛する。

以下の画像のように、まずは設定を終えよう。

「返り値のフォーマット」を「投稿オブジェクト」にすることだけが注意点。

編集画面に「関連記事」が表示される

設定が終われば、WordPress管理画面の投稿編集画面に、下の画像のような「関連記事」が用意されただろう。

ちなみに、選択するエリアの高さが低いため、少々選びづらい。

もう少し高くしたい方は、『Advanced Custom Fields』のcssファイルを編集しよう。

「../plugins/advanced-custom-fields-pro/assets/css/acf-input.css」のcssファイルが編集対象。
※筆者はpro版を利用しているので上記パスとなっています。

998行目の

.acf-relationship .list {
  margin: 0;
  padding: 5px;
  height: 160px;
  overflow: auto;
}

のheightを480pxくらいに変更してあげよう。

このように選びやすくなる。

phpファイルにて出力

さて、肝心の出力方法。

対象のphpファイル（一般的にはsingle.php）の任意の場所に、以下のように記述しよう。
細かいマークアップは自由にしていただいて構わない。

<div class="related-area">
 <h3>関連記事</h3>
 <div class="related-wrapper">
  <?php $acfrelated = get_field('acf_related'); ?>
  <?php if($acfrelated): ?>
  <?php foreach((array)$acfrelated as $value):?>
   <div class="one-related">
    <div class="eyecatch">
     <a title="<?php echo $value->post_title; ?>" href="<?php echo get_the_permalink($value->ID); ?>">
      <?php echo get_the_post_thumbnail( $value->ID,'thumbnail' ); ?>
     </a>
    </div>
    <div class="entry-wrapper">
     <div class="entry-title">
      <a title="<?php echo $value->post_title; ?>" href="<?php echo get_the_permalink($value->ID); ?>">
       <?php echo $value->post_title; ?>
      </a>
     </div>

     <div class="entry-meta">
      <span class="entry-date"><?php echo get_post_time('Y年m月d日','', $value->ID); ?></span>
      <span class="entry-category"><?php the_category('','',$value->ID);?></span>
      <?php echo get_the_term_list($value->ID, 'xxxxxxxxxx', '<span class="entry-taxonomy">', ', ', '</span>');?><!-- この行はカスタム分類がある場合のみ -->
     </div>
    </div>
   </div>
  <?php endforeach; ?>
  <?php endif; ?>
 </div>
</div>

※4行目の「acf_related」は、ACF側で設定したカスタムフィールド名。
※23行目は、カスタム分類を利用していて、関連記事内で出力したい場合に記述する。「xxxxxxxxxx」がタクソノミースラッグ。

以上で、関連記事が出力されたはずだ。
正しく出力さない場合は、23行目を削除していただきたい。

一覧へ戻る