expexp.jp

WordPress

【WordPress】Smart Custom Fieldsで投稿に関連する記事を表示したい

WordPressのカスタムフィールド作成・管理プラグイン「Smart Custom Fields」を使って、投稿に関連する記事を表示する例を紹介します。

Amazonや楽天の商品ページで表示される関連商品やオススメ商品のイメージです。

関連記事を登録するカスタムフィールドの作成

WordPress管理画面のSmart Custom Fieldsから、関連記事を登録するカスタムフィールドを新規作成します。タイプは「関連(投稿タイプ)」(フィールド名は’recommend_items’としました)。

投稿タイプは表示したいものにチェックしましょう。

これで投稿編集画面で関連記事を登録するカスタムフィールドが表示されます。

関連記事を投稿ページに出力

関連記事を出力したいテンプレートファイルにPHPを記述します。

テーマファイル(single.phpなど)

まずget_post_meta()関数で、’recommend_items’に値が入っているかチェックしています。

/* カスタムフィールドに値があるかチェック */
$relation_flg = get_post_meta( $id, 'recommend_items', true );

カスタムフィールドに値が入っている場合、関連記事を表示する処理を行います。

/* カスタムフィールドに値がある場合、関連記事表示の処理を行う */
if( !empty( $relation_flg ) ) {

  /* 関連記事を表示するラッパー */
  $output_relation_items = '<ul class="relation-items">';

  /* 関連記事のスマートカスタムフィールドの値を取得 */
  $recommend_items = SCF::get( 'recommend_items' );

  /* 取得した値をループ */
  foreach( $recommend_items as $post ) {

    /* SCFの関連(投稿タイプ)には、投稿IDが入っています。 */
    /* テンプレートタグを使いたいので、その投稿IDをグローバル変数へセット */
    setup_postdata( $post );

    /* 投稿IDから取得した関連記事情報を出力用の変数へ代入 */
    $output_relation_items .= '<li id="post-'.get_the_ID().'"><a href="'.get_the_permalink().'">'.get_the_title().'</a></li>';

  }

  /* ラッパーを閉じます */
  $output_relation_items .= '</ul>';

  /* 関連記事を出力 */
  echo $output_relation_items;

  /* メインクエリのグローバル変数を復元 */
  wp_reset_postdata();
}