2020年7月2日

森島

【WordPress】カスタムフィールドを使って投稿ごとに「関連記事」を設定する

WordPress

facebook
twitter

　関連記事を表示するプラグインを使用することもできますが、あまり融通が利かなかったり、CSSの調整が面倒だったりなので、制作に慣れている方であれば、自分でゼロから設定してしまった方が早い場合があります。

　今回は、カスタムフィールドを追加するプラグインを使用して、各投稿ごとに関連記事を設定できるようにします。関連記事という使い方ですが、記事は手動の選択制で、1つめが未設定であればランダム表示するだけなので厳密に言えば関連記事ではありませんが、サイト内を周回させたいだけであれば大体これで事足ります。

1 要件
2 導入方法

要件

【仕様】
・投稿作成時に、編集画面で「関連する記事」を手動で選択する。
・「関連する記事」の1つめが選択されていない場合は、今までの記事をランダムで表示する。

【使用するプラグイン】
Advanced Custom Fields（カスタムフィールドを作成するプラグイン）

【作業の流れ】
01.カスタムフィールドを設定する
02.投稿詳細のPHPファイルに表示領域を追加
03.CSSの調整（独自でゼロから設定）
04.各投稿の編集画面で関連記事を設定

導入方法

01.カスタムフィールドを設定する

　まず、プラグイン「Advanced Custom Fields」をインストールします。
インストール後、ボタンが「有効化」に変わるので有効化までしてください。

カスタムフィールドを新規追加します。

新規追加の画面です。今回は、関連記事を3件選べるようにします。

入力中の画面です。「フィールドを追加」して、まずは関連記事の入力欄1つめを作ります。

—-
【各項目の解説】
・フィールドラベル
　投稿編集画面に表示される項目名です。任意で好きな名前を付けます。今回は「関連記事[1]」としました。
・フィールド名
　テンプレートに出力する際に使用します。半角英数字で、一意の名前を付けてください。今回は「related1」としました。表の画面に表示する際、連番でタグを出力するので、必ず末尾を数値の連番にしてください。
・フィールドタイプ
　「投稿オブジェクト」を選択してください。これで過去の記事を選択できるようになります。
・投稿タイプで絞り込み
　記事のみ選択、固定ページを除外、カスタム投稿タイプも含める…など、条件に合わせて自由に選択してください。今回は通常のpostのみ取得したいので「投稿」を選択しました。
・タクソノミーで絞り込み
　タクソノミーでの条件を付与したい場合は選択してください。
・空の値を許可するか？
　選択しなければランダムで表示、という条件にしたいので、「はい」にして空の値を許可します。※絶対に選択してほしい場合は「いいえ」にしても表示に問題はありません。
・返り値のフォーマット
　ここは「投稿ID」を選択してください。
—-

　これで1つめのフィールドが完成です。これと同様にフィールドを追加し、3件分のフィールドを作成します。フィールド名は連番にして欲しいので、2つめは「related2」、3つめは「related3」といったルールで増やしてください。4件でも5件でも、3件以上追加しても構いません。

　以下が、3件登録した状態です。登録が完了したら、どの投稿タイプに適用するかを選択します。通常のpostに表示したい場合はそのままで大丈夫です。カスタム投稿タイプに適用する場合は、該当のカスタム投稿タイプを選択します。

ここまで完了したら、フィールドグループを「公開」してください。

02.投稿詳細のPHPファイルに表示領域を追加

　次に、投稿詳細のテンプレートPHPに表示領域を追加します。投稿詳細のページは、テーマのフォルダの中に「single.php」か「singular.php」という名前で存在しています。カスタム投稿タイプの場合は single-xxxx.php といったファイル名になっていると思います。（xxxxのところに、カスタム投稿タイプのタイプ名が入ります。single-movie.phpとかですね。）

　ファイルを開いたら、挿入したい箇所に以下のタグをコピペしてください。

<?php
  $postCount = 3;  //表示したい件数※1
  $postFlag = get_field('related1'); //「''」の中に1つめのフィールド名※2
  echo '<div class="reccomend">';
  echo '<div class="heading"><h3>関連記事</h3></div>';
  
  if($postFlag == ''):
    //自動取得時のループ
    $args = array(
    'post_type' => array('post'),//投稿タイプ※3
    'orderby' => 'rand',
    'posts_per_page' => $postCount,
    'post__not_in' => array(get_the_ID()), //表示中のpostを除外
    'post_status' => 'publish', //公開ステータスが「公開中」のもののみ表示
    ); 
    $wp_query = new WP_Query($args); 
    if (have_posts()):
    while(have_posts()):the_post();
  ?>
  <!--ループするタグ：ここから-->
  <article>
    <a href="<?php get_permalink(); //記事リンク ?>">
      <?php if (has_post_thumbnail()):  //記事サムネイルをimgタグで表示 ?>
      <div class="thumbWrap"><img src="<?php echo the_post_thumbnail_url( 'small' ); ?>" alt=""></div>
      <?php endif; ?>
      <section>
        <h1><?php the_title_attribute(); //記事タイトル ?></h1>
      </section>
    </a>
  </article>
  <!--ループするタグ：ここまで-->
  <?php
    endwhile;
    echo '</div>';
    endif;
    wp_reset_query();
  else:
    //手動選択時のループ
    for($i = 1; $i <= $postCount; $i++){
      $post_field = get_field('related'.$i); //「''」の中にフィールド名の連番を抜いた値を入れる（related1ならrelated）※4
      if($post_field):
        $title = $post_field->post_title;
        $link = get_the_permalink($post_field->ID);
        $thumb_id = get_post_thumbnail_id($post_field->ID);
        $thumb_img = wp_get_attachment_image_src($thumb_id, 'thumbnail');
        $thumb_src = $thumb_img[0];
  ?>
  <!--ループするタグ：ここから-->
  <article>
    <a href="<?php echo $link; //記事リンク ?>">
      <?php if ($thumb_id != ''):  //記事サムネイルをimgタグで表示 ?>
      <div class="thumbWrap"><img src="<?php echo $thumb_src; ?>" alt=""></div>
      <?php endif; ?>
      <section>
        <h1><?php echo $title; //記事タイトル ?></h1>
      </section>
    </a>
  </article>
  <!--ループするタグ：ここまで-->
  <?php
      endif;
    } //for終了
  endif;
  echo '</div>';
?>

<?php

$postCount = 3; //表示したい件数※1

$postFlag = get_field('related1'); //「''」の中に1つめのフィールド名※2

echo '<div class="reccomend">';

echo '<div class="heading"><h3>関連記事</h3></div>';

if($postFlag == ''):

//自動取得時のループ

$args = array(

'post_type' => array('post'),//投稿タイプ※3

'orderby' => 'rand',

'posts_per_page' => $postCount,

'post__not_in' => array(get_the_ID()), //表示中のpostを除外

'post_status' => 'publish', //公開ステータスが「公開中」のもののみ表示

);

$wp_query = new WP_Query($args);

if (have_posts()):

while(have_posts()):the_post();

<?php if (has_post_thumbnail()): //記事サムネイルをimgタグで表示 ?>

<?php endif; ?>

</section>

</a>

</article>

<?php

endwhile;

echo '</div>';

endif;

wp_reset_query();

else:

//手動選択時のループ

for($i = 1; $i <= $postCount; $i++){

$post_field = get_field('related'.$i); //「''」の中にフィールド名の連番を抜いた値を入れる（related1ならrelated）※4

if($post_field):

$title = $post_field->post_title;

$link = get_the_permalink($post_field->ID);

$thumb_id = get_post_thumbnail_id($post_field->ID);

$thumb_img = wp_get_attachment_image_src($thumb_id, 'thumbnail');

$thumb_src = $thumb_img[0];

<?php if ($thumb_id != ''): //記事サムネイルをimgタグで表示 ?>

<?php endif; ?>

</section>

</a>

</article>

<?php

endif;

} //for終了

endif;

echo '</div>';

タグを調整する場合は、「ループするタグ」の中身を調整してください。自動ループ用と、選択時の出力と、2ヶ所あります。
※1　数値を表示したい件数に変えてください。
※2　手順01で設定した、関連記事1つめのフィールド名を入力します。今回はrelated1です。
※3　投稿タイプを設定します。今回はpostにしました。カスタム投稿タイプを使用する場合は、カスタム投稿タイプの名前を入れてください。
※4　※2と同じく、関連記事1つめのフィールド名を挿入します。ただし、連番の最後の数値を抜いてください。

03.CSSの調整

CSSは、タグに合わせて自由に調整してください。

04.各投稿の編集画面で関連記事を設定

　投稿の編集画面を見ると、エディターの下部に「関連記事」の項目が追加されています。

ここを選択して、記事を投稿すれば投稿詳細画面に反映されます。

Web制作、Webサービスに関する技術やノウハウを発信するコラムサイト

【WordPress】カスタムフィールドを使って投稿ごとに「関連記事」を設定する

要件

導入方法

01.カスタムフィールドを設定する

02.投稿詳細のPHPファイルに表示領域を追加

03.CSSの調整

04.各投稿の編集画面で関連記事を設定

関連記事

WordPressの会員限定記事配信プラグイン「Simple Analytics」をリリースしました！

WordPressの会員限定記事配信プラグイン「Limited Post Maker」をリリースしました！

WordPressのフォームプラグイン「Easy Form Maker」をリリースしました！