関連記事をタグを使って表示する【WordPress】

2013年5月24日 Wordpress NAndo

ブログを運営するにあたって「関連記事」ってなにげに重要なんですよね。
便利なプラグインも揃っていて実装もそれほど手間ではないのでは・・・。

しかし、テーマを少々カスタマイズすることで実装できてしまうのです。
自分用の備忘録にもなるしアウトプットしておきましょう。

関連記事の出力イメージ

関連記事の出力イメージ
ただテキストの一覧では面白くないので、やっぱサムネイル画像はほしいところ。

<?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; ?>

画像サイズは、管理画面の「設定」→「メディア」の「サムネイルのサイズ」で表示されます。
アイキャッチ画像が未設定の記事の為に画像をテーマフォルダに入れておいてください。
場所:テーマフォルダ/image/noimage.jpg

参考にさせて頂いたページはこちら

プラグインを使わずに、WordPressのサムネイルつき関連記事を表示する