タグを使って「関連記事一覧」を出力するWordPressカスタマイズ
ブログを運営するにあたって「関連記事」ってなにげに重要なんですよね。
便利なプラグインも揃っていて実装もそれほど手間ではないのでは・・・。
しかし、テーマを少々カスタマイズすることで実装できてしまうのです。
自分用の備忘録にもなるし、タグを使った関連記事一覧の出力方法を紹介します。
WordPressで関連記事を出力するイメージ
タイトルとアイキャッチ画像を表示し、記事ページへリンクします。
ただのテキスト一覧では面白くないので、やっぱサムネイル画像は欲しいと思ったので付けてみました。
ソースコード
single.phpに以下を追加。
<?php // 同じタグを持つ記事を取得
$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(
'orderby' => 'rand',
'tag__in' => $tagIDs,
'post__not_in' => array($post->ID), // 現在の記事を含めない
'posts_per_page' => 4,
'ignore_sticky_posts' => true // true:先頭固定表示の投稿を無視
);
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) { ?>
<div id="related-article">
<p class="related-title">同じタグの記事一覧</p>
<?php echo '<ul class="index">';
while ($my_query->have_posts()) : $my_query->the_post(); ?>
<li>
<a href="<?php the_permalink();?>">
<?php //サムネイル画像（無い場合は別の画像）を表示
if ( get_the_post_thumbnail($post->ID,'thumbnail') ):
echo wp_get_attachment_image(the_post_thumbnail('thumbnail'));
else: ?>
<img src="<?php bloginfo('stylesheet_url'); ?>/image/noimage.jpg" alt="Noimage" />
<?php endif; ?>
</a>
<span><a href="<?php the_permalink();?>"><?php the_title(); ?></a></span>
</li>
<?php
endwhile;
wp_reset_query();
echo '</ul>'; ?>
</div>
<?php } // if $my_query ?>
<?php endif; ?>
画像サイズは、管理画面の「設定」→「メディア」の「サムネイルのサイズ」で表示されます。
アイキャッチ画像が未設定の記事の為に、Noimage的な画像も用意しておくと良いと思います。
参考にさせて頂いたページはこちら
