WordPressのsingle.phpを編集して記事の下に関連記事を出力する

|

アクセス数の多い人気ブログの記事本文の下には、必ずと言って良いほど関連記事が表示されていますよね。記事の下の関連記事を出力することで、サイト内での巡回を促しより多くの記事を読んで貰えるようになりますよ。

今回はWordPrssの記事に、プラグインなしでサムネイル付きの関連記事を出力する方法をご紹介します。

関連記事を呼び出すため記述を追加する

まずは、関連記事を呼び出すための記述をsingle.phpに追加していきましょう。single.phpに追加するソースコードは下記の通りです。

single.phpの記事の終了タグ前に追加 
<aside class="relatedkiji">
  <h4>関連記事</h4>
  <ul>
  <?php if(has_category() ) {
    $cats =get_the_category();
    $catkwds = array();
    foreach($cats as $cat){
         $catkwds[] = $cat->term_id;
    }
  } ?>
  <?php $args = array(
      'post_type' => 'post',
      'posts_per_page' => '4',
      'post__not_in' =>array( $post->ID ),
      'category__in' => $catkwds,
      'orderby' => 'rand'
    );
  $my_query = new WP_Query( $args );?>
    <?php while ( $my_query->have_posts() ) : $my_query->the_post(); ?>
      <li><a href="<?php the_permalink(); ?>">
        <?php the_post_thumbnail('medium'); ?>
        <div class="text">
          <?php the_title(); ?>
        </div>
      </a></li>
    <?php endwhile; ?>
  <?php wp_reset_postdata(); ?>
  </ul>
</aside>

上記のソースコードを記事の終了タグの前に追加することで、関連記事を下記の画像のように記事の下に出力することができます。

上記のソースコードだけではわかりにくいので、関連記事を出力するためのコードについてもう少し掘り下げてご説明します。各設定を変更する場合などは、下記の説明を参考にしてください。

カテゴリIDを呼び出す

同じカテゴリの記事を出力するために、現在の記事に設定されているカテゴリIDを取得しましょう。下記のコードで、現在の記事に設定されている全てのカテゴリを取得できます。

<?php if(has_category() ) {
  $cats =get_the_category();
  $catkwds = array();
  foreach($cats as $cat){
       $catkwds[] = $cat->term_id;
  }
} ?>

関連記事記事を出力するためのサブループを設定する

先程取得したカテゴリIDを利用して、サブループでWordPressのデータベースから記事の情報を取得します。

<?php $args = array(
  'post_type' => 'post',
  'posts_per_page' => '4',
  'post__not_in' =>array( $post->ID ),
  'category__in' => $catkwds,
  'orderby' => 'rand'
);
$my_query = new WP_Query( $args );?>
<?php while ( $my_query->have_posts() ) : $my_query->the_post(); ?>

--	ループさせる要素--

<?php endwhile; ?>
<?php wp_reset_postdata(); ?>

上記のコードでサブループを構成しています。『$args = array(～』で指定している記事の抽出条件については下記の通りです。

post_type

呼び出す記事の種類を指定します。今回は投稿記事を出力するため『post』を指定しています。

posts_per_page

ループで出力する記事数を指定します。今回は4つ記事を出力します。

post__not_in

呼び出す記事から除外するものを指定します。『array( $post->ID )』で現在のページを除外しています。

category__in

呼び出す記事のカテゴリIDを指定します。先程呼び出した、現在の記事のカテゴリIDを指定するため、『$catkwds』を値として指定します。

orderby

呼び出す記事の並び順を指定します。今回は、指定した条件の記事をランダムで呼び出すため『rand』を指定します。

関連記事にタグを出力する

記事下の関連記事に同じカテゴリに属する記事でなく、同じダグが設定されている記事を出力することもできます。

タグで関連記事を出力したい場合は、カテゴリIDを呼び出すコードを下記のソースコードに置き換えてください。

<?php if(has_tag() ) {
  $tags =get_the_tags();
  $tagkwds = array();
  foreach($tags as $tag){
       $tagkwds[] = $tag->term_id;
  }
} ?>
<?php $args = array(
    'post_type' => 'post',
    'posts_per_page' => '4',
    'post__not_in' =>array( $post->ID ),
    'tag__in' => $tagkwds,
    'orderby' => 'rand'
  );
$my_query = new WP_Query( $args );?>
  <?php while ( $my_query->have_posts() ) : $my_query->the_post(); ?>

--	ループさせる要素--

  <?php endwhile; ?>
<?php wp_reset_postdata(); ?>

ループさせる要素を追加する

サブループが完成したら、ループ内で繰り返し呼び出す要素を記述します。今回は『タイトル』『サムネイル画像』をリストタグである『<li></li>』で追加します。

<li><a href="<?php the_permalink(); ?>">
  <?php the_post_thumbnail('medium'); ?>
  <div class="text">
    <?php the_title(); ?>
  </div>
</a></li>

以上のように『記事のカテゴリIDの抽出』→『サブループ』→『サブループ内の要素』の順に記述して関連記事を出力しましょう。最後に、『<aside></aside>』と『<ul></ul>』でサブループ全体を括り、ulタグの前に『<h4></h4>』でタイトルをつければ、関連記事を出力するためのソースコードは完成です。

関連記事一覧のデザインを整える

関連記事が出力されたことを確認したら、CSSでデザインを整えて行きましょう。サンプルCSSを載せておきますのでstyle.cssに追加して調整してください。

style.cssに記述 ※@mediaを使用してCSSをレスポンシブデザインにCSSを調整する場合は、headタグでviewportの設定を行なってください 
.relatedkiji {
  margin: 40px 0 0;
  padding: 10px;
}

.relatedkiji h4 {
  font-size: 1.25em;
  padding: 3px 5px;
  border-bottom: solid 1px #999;
}

.relatedkiji ul {
  font-size: 0;
  margin: 10px 0;
  padding: 0;
}

.relatedkiji li {
  display: inline-block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 25%;
  padding: 10px 5px;
  list-style: none;
  vertical-align: top;
}

.relatedkiji li a {
  display: block;
  text-decoration: none;
  color: #000;
}

.relatedkiji li a:hover {
  color: #000070;
  background-color: #eee;
}

.relatedkiji img {
  height: 120px;
  object-fit: cover;
}

.relatedkiji .text {
  font-size: 16px;
  font-weight: bold;
}

@media (max-width: 599px) {
  .relatedkiji ul {
    margin: 0;
  }
  .relatedkiji li {
    display: block;
    width: 100%;
  }
  .relatedkiji li a:after {
    display: block;
    clear: both;
    content: '';
  }
  .relatedkiji img {
    float: left;
    width: 90px;
    height: 70px;
  }
  .relatedkiji .text {
    width: auto;
    margin-top: 5px;
    margin-left: 100px;
  }
}

object-fitは、とても便利なCSSプロパティですがIEに対応していません。object-fitをIEにも対応させる方法は下記の記事で紹介しています。

wordpressで画像のサイズをCSSで最適化してレスポンシブデザインに対応する
パソコン用表示 スマートフォン表示

上記のCSSをそのまま記述すると上記の画像のように表示されます。好みに合わせてCSSを編集して自分好みのでデザインに調整してください。

以上で、WordPressの記事に関連記事を出力するための作業は完了です。ユーザーにより多くの記事を見てもらうには、必須と行っても過言ではないので、関連記事を設置してみてくださいね！