ブログサイトなどを見ていると記事の終わりに関連記事が表示されているのを見たことがあると思います。
プラグインを使えば簡単に表示できたりもするのですがプラグインに頼りっきりだとアップデートの機会に使えなくなってしまう恐れもあります。
そのため今回はプラグインを使わずに関連記事を表示する方法を紹介したいと思います。
CONTENTS
同じカテゴリーの最新記事を表示する
（現在表示している記事を除外）
良く使うパターンですね。
出力したい部分にこちらのコードを記述します。
<h3><?php the_category(' | '); ?>の最新記事</h3>
<?php
$post_id = get_the_ID(); //投稿IDを取得
foreach((get_the_category()) as $cat) {
$cat_id = $cat->cat_ID ; //カテゴリーIDを取得
break ;
}
query_posts(
array(
'cat' => $cat_id,
'showposts' => 3, //表示件数
'post__not_in' => array($post_id), //post__not_inで取得した投稿IDの記事を除外
)
);
if(have_posts()) :
?>
<ul>
<?php while (have_posts()) : the_post(); ?>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endwhile; ?>
</ul>
<?php else : ?>
<p>関連記事はありません</p>
<?php endif; ?>
<?php wp_reset_query(); ?>コード内に補足説明を入れていますが、ポイントはpost__not_inで取得した投稿IDの記事を除外（現在表示している記事を除外）するところです。
それと関連記事がなかった場合に「○○の最新記事」とタイトルだけが表示されている状態はおかしいので、投稿がない場合の記述もしています。
出力結果はこちら。
<h3><a href="カテゴリーページへのリンク">カテゴリー名</a>の最新記事</h3>
<ul>
<li><a href="投稿記事へのリンク1">記事タイトル1</a></li>
<li><a href="投稿記事へのリンク2">記事タイトル2</a></li>
<li><a href="投稿記事へのリンク3">記事タイトル3</a></li>
</ul>同じカテゴリーの最新記事をサムネイル付きで表示する
（現在表示している記事を除外）
やっぱり画像もあった方が見栄えがいいよねって場合はこちらのコードを使います。
<h3><?php the_category(' | '); ?>の最新記事</h3>
<?php
$post_id = get_the_ID(); //投稿IDを取得
foreach((get_the_category()) as $cat) {
$cat_id = $cat->cat_ID ; //カテゴリーIDを取得
break ;
}
query_posts(
array(
'cat' => $cat_id,
'showposts' => 3, //表示件数
'post__not_in' => array($post_id), //post__not_inで取得した投稿IDの記事を除外
)
);
if(have_posts()) :
?>
<ul>
<?php while (have_posts()) : the_post(); ?>
<li>
<a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
<!-- サムネイル画像がある場合はサムネイル画像を呼び出す -->
<?php if ( has_post_thumbnail() ): ?>
<?php echo get_the_post_thumbnail($post->ID); ?>
<!-- サムネイル画像がない場合は指定したNO-IMAGE画像を呼び出す -->
<?php else: ?>
<img src="<?php echo get_template_directory_uri(); ?>/img/no-image.png" alt="NO IMAGE" title="NO IMAGE" />
<?php endif; ?>
<?php the_title(); ?>
</a>
</li>
<?php endwhile; ?>
</ul>
<?php else : ?>
<p>関連記事はありません</p>
<?php endif; ?>
<?php wp_reset_query(); ?>サムネイル画像があればその画像を呼び出す。なければあらかじめ用意したNO-IMAGE画像を呼び出しています。
この場合の出力結果はこうなります。
<h3><a href="カテゴリーページへのリンク">カテゴリー名</a>の最新記事</h3>
<ul>
<li><a href="投稿記事へのリンク1"><img src="画像1"/>記事タイトル1</a></li>
<li><a href="投稿記事へのリンク2"><img src="画像2"/>記事タイトル2</a></li>
<li><a href="投稿記事へのリンク3"><img src="サムネイルがないのでNO-IMAGE画像"/>記事タイトル3</a></li>
</ul>ランダムに同じカテゴリーの記事をサムネイル付きで表示する
（現在表示している記事を除外）
今度は最新記事を表示するのではなく、同じカテゴリーの記事をランダムに表示する場合です。
過去の記事は埋もれてしまいがちなので、ランダムに表示させることによってまた見てもらえる可能性がアップします。
<h3><?php the_category(' | '); ?>の関連記事</h3>
<?php
$post_id = get_the_ID(); //投稿IDを取得
foreach((get_the_category()) as $cat) {
$cat_id = $cat->cat_ID ; //カテゴリーIDを取得
break ;
}
query_posts(
array(
'cat' => $cat_id,
'showposts' => 3, //表示件数
'post__not_in' => array($post_id), //post__not_inで取得した投稿IDの記事を除外
'orderby' => 'rand', //ランダムに記事を表示
)
);
if(have_posts()) :
?>
<ul>
<?php while (have_posts()) : the_post(); ?>
<li>
<a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
<!-- サムネイル画像がある場合はサムネイル画像を呼び出す -->
<?php if ( has_post_thumbnail() ): ?>
<?php echo get_the_post_thumbnail($post->ID); ?>
<!-- サムネイル画像がない場合は指定したNO-IMAGE画像を呼び出す -->
<?php else: ?>
<img src="<?php echo get_template_directory_uri(); ?>/img/no-image.png" alt="NO IMAGE" title="NO IMAGE" />
<?php endif; ?>
<?php the_title(); ?>
</a>
</li>
<?php endwhile; ?>
</ul>
<?php else : ?>
<p>関連記事はありません</p>
<?php endif; ?>
<?php wp_reset_query(); ?>先ほどまでのコードと基本は同じですが、'orderby' => 'rand',という記事をランダムに表示させるコードを追加しています。
出力結果はこちら。
<h3><a href="カテゴリーページへのリンク">カテゴリー名</a>の関連記事</h3>
<ul>
<li><a href="投稿記事へのリンク5"><img src="サムネイルがないのでNO-IMAGE画像"/>記事タイトル5</a></li>
<li><a href="投稿記事へのリンク2"><img src="画像2"/>記事タイトル2</a></li>
<li><a href="投稿記事へのリンク10"><img src="画像10"/>記事タイトル10</a></li>
</ul>画面が表示される度にランダムで表示されるので、毎回違う記事が表示されることになります。
可読性を考慮してテンプレート化
single.phpなどに今までの記述をすることで関連記事の表示が可能になりました。
ただ若干コードが長いので可読性は下がります。
もし、そこらへんが気になる方はテンプレート化して呼び出す方法もありです。
例えば先ほどまで記述していたものを「relation-post.php」などの名前で一つのファイルとして保存します。
そして、出力したい場所に以下の記述をすればテンプレート化したファイルを呼び出せます。
<?php get_template_part('relation-post'); ?>いかがでしたでしょうか。
これをベースに投稿の本文や日付を足したり、色々カスタムをしていただければと思います。
