サムネイル付き関連記事(タグ)をプラグインなしで表示させる【wordpress】

かわたま.netもやっと30記事ほどになってきました！
だんだん記事が増えてくると、昔書いたの記事が埋もれてきます。
読者に他の記事も読んでもらうために、記事の最後に関連記事を表示させたいと思います。

関連記事を表示させるためのプラグインもたくさんありますができればプラグインなしでいきたい！
と思ったら簡単に設置できましたのでメモ^O^

この記事の下にある「関連記事」欄が完成形です。

目次

#1：関連記事を表示させるためのphpファイル（related.php）を作成

今回は、見ている記事（シングルページ）と同じタグがつけられた記事を表示させます。
single.phpに直接書いてもいいのですが、後で管理しやすいように別ファイルで読み込ませたいと思います。
今回は「related.php」という名前で作成します。

<?php
    $original_post = $post;
    $tags = wp_get_post_tags($post->ID);
    $tagIDs = array();
    if ($tags) {
        $tagcount = count($tags);
        for ($i = 0; $i < $tagcount; $i++) {
            $tagIDs[$i] = $tags[$i]->term_id;
        }
    $args=array(
    'tag__in' => $tagIDs,
    'post__not_in' => array($post->ID),
    'showposts'=>4,
    'ignore_sticky_posts'=>1
    );
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
    while ($my_query->have_posts()) : $my_query->the_post(); ?>
        <li>
            <h4>
                <a href="<?php the_permalink();?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>
            </h4>
        </li>
<?php endwhile; wp_reset_query(); ?>
<?php } else { ?>
    関連する記事は見当たりません…
<?php } } ?>

13行目の ‘showposts’=>4, で表示させる関連記事数を設定します。
今回は4つの記事を表示させます。
複数タグがある場合も、全てのタグの関連記事を表示します。

※以前’caller_get_posts’を使っていましたが、非推奨ということが分かったので’ignore_sticky_posts’に変更しました。（2014/10/18）

#2：single.phpにrelated.phpを読み込ませる

single.phpの、関連記事を表示させたい位置に下記を追記します。

<div id="relation">
<h3>関連記事</h3>
<ul>
<?php get_template_part( 'related' ); ?>
</ul>
</div>

4行目は、テンプレートファイルに別ファイルを読み込ませるためのタグです。
今回はrelated.phpを読み込ませたいので( ‘related’ )となります。

これで関連記事タイトルが表示されます（サムネイルなし）。

#3：関連記事をサムネイル（アイキャッチ）付きで表示させる

アイキャッチ付きで表示さたい場合には、related.php(任意の名前)を下記のように記述します。

<?php
    $original_post = $post;
    $tags = wp_get_post_tags($post->ID);
    $tagIDs = array();
    if ($tags) {
        $tagcount = count($tags);
        for ($i = 0; $i < $tagcount; $i++) {
            $tagIDs[$i] = $tags[$i]->term_id;
        }
    $args=array(
    'tag__in' => $tagIDs,
    'post__not_in' => array($post->ID),
    'showposts'=>4,
    'caller_get_posts'=>1
    );
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
    while ($my_query->have_posts()) : $my_query->the_post(); ?>
        <li>
         <span class="cat-thum">
           <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>の詳細へ"><?php
           if ( has_post_thumbnail()) {
                the_post_thumbnail('thumbnail');
               } else {
              echo '<img src="'.get_bloginfo('template_url').'/images/no-image.gif" alt="hoge" />';
              };
           ?></a>
         </span> 
            <h4>
                <a href="<?php the_permalink();?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>
            </h4>
        </li>
<?php endwhile; wp_reset_query(); ?>
<?php } else { ?>
    関連する記事は見当たりません…
<?php } } ?>

20〜28行目がサムネイル表示の記述です。
25行目はサムネイルがない記事にも、レイアウトを統一させるためにデフォルトで画像を表示させているのでその記述です。

あとはcssで調整して完成です。
念のためかわたま.netで記述しているcss書いておきます。
サイトに合わせて自由に調整してください。

/* --------related---------- */
#related h3 {
  border-bottom: 1px dotted #ccc;
  padding-bottom: 2px;
  font-size: 18px;
  letter-spacing: 1px;
}
#related ul {
  padding-left: 0px;
}
#related li {
  list-style: none;
  border-bottom: 1px dotted #ddd;
  margin: 0 2% 20px 0;
  padding: 0 0 0px 0px;
  width: 48%;
  float: left;
}
#related .cat-thum {
  width: 80px;
}
#related img.wp-post-image {
  width: 80px;
  height: 80px;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px #ccc;
  margin-bottom: 10px;
}
#related h4 {
  font-size: 100%;
  margin: 0px;
}

固定ページも同様に関連記事として表示させたい場合の記述方法は別記事にまとめました。
»【wordpress】各記事ページに投稿と固定ページの関連(タグ)記事を表示する方法