WordPressで関連記事を一覧表示する

WordPressで関連記事一覧を表示する方法 WordPressでの記事が増えてくると、関連する記事を自動的に一覧表示したくなる時があります。
そういったプラグインも多数あるようですが、プラグインを使用せずに関連記事の一覧表示をやってみたいと思います。

プラグインを使わないことのメリットは、自分の好きなように応用できることです。
CSSなどで表示の仕方を工夫できます！
WordPress動作も重くなりにくいと思います！

Salty WordPress的コード

私が実際に使用しているコードを紹介します。
私は同じカテゴリーに属する記事を関連記事として表示しております。
同じタグが付いたものを関連記事として表示するやり方も載せておきます。

カテゴリーの場合

<?php
	// 同じカテゴリーの記事を関連記事として表示する
	$categories = wp_get_post_categories($post->ID, array('orderby'=>'rand')); // 複数カテゴリーを持つ場合ランダムで取得
	if ($categories) {
		$args = array(
			'category__in' => array($categories[0]), // カテゴリーのIDで記事を取得
			'post__not_in' => array($post->ID), // 表示している記事を除く
			'showposts'=>5, // 取得記事数
			'caller_get_posts'=>1, // 取得した記事の何番目から表示するか
			'orderby'=> 'date' // 記事を日付順にする
		);
		$my_query = new WP_Query($args);
		if( $my_query->have_posts() ) { ?>
			<?php while ($my_query->have_posts()) : $my_query->the_post(); ?>
 
				<div class="termlist_one">
						<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( array(100,100) ); ?></a>
						<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><br>
						<?php echo get_post_meta($post->ID, _aioseop_description, true); ?>
					<br clear="all" />
				</div><!-- .termlist_one -->
 
			<?php
			endwhile;
		}
		wp_reset_query();
	}
?>

タグの場合

<?php
	// 同じタグの記事を関連記事として表示する
	$tags = wp_get_post_tags($post->ID, array('orderby'=>'rand')); // 複数タグを持つ場合ランダムで取得
	if ($tags) {
		$first_tag = $tags[0]->term_id;
		$args=array(
			'tag__in' => array($first_tag), // タグのIDで記事を取得
			'post__not_in' => array($post->ID), // 表示している記事を除く
			'showposts'=>5, // 取得記事数
			'caller_get_posts'=>1, // 取得した記事の何番目から表示するか
			'orderby'=> 'date' // 記事を日付順にする
		);
		$my_query = new WP_Query($args);
		if( $my_query->have_posts() ) { ?>
			<?php while ($my_query->have_posts()) : $my_query->the_post(); ?>
 
				<div class="termlist_one">
						<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( array(100,100) ); ?></a>
						<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><br>
						<?php echo get_post_meta($post->ID, _aioseop_description, true); ?>
					<br clear="all" />
				</div><!-- .termlist_one -->
 
			<?php
			endwhile;
		}
		wp_reset_query();
	}
?>

CSS

CSSはカテゴリー･タグの両方で共通です。

.termlist_one {
	padding-bottom: 2px;
	margin-bottom: 2px;
}
.termlist_one img {
	float: left;
	margin-right: 5px;
}

上記のコードでは、

アイキャッチ画像の表示･記事へのリンク
タイトルの表示･記事へのリンク
All in One SEO Packでの詳細(Description)の表示

という表示になります。
All in One SEO Packの詳細(Description)の表示をやめたい場合には、

<?php echo get_post_meta($post->ID, _aioseop_description, true); ?>

を削除してください。

筆者の感想

関連記事をアイキャッチ画像付きで一覧表示すれば、見栄えもかなりよくなります！
色々なページを見てもらえる機会も増えますし、絶対にやるべきたと思います。
プラグインを使わずしても、難しい作業なしでできますしね！

CSSを工夫すれば色々な表示の仕方が可能ですので、自分のサイトに合った表示のさせ方を作り上げてください！