WordPressプラグインを使わないでアイキャッチ付きの関連記事一覧を表示する方法

WordPressプラグインを使わないでアイキャッチ付きの関連記事一覧を表示する方法をご紹介します。WordPressプラグインは、簡単に使用することができます。ただ、プラグインは入れすぎるとその分、動作が遅くなってりと弊害の部分もあります。また、セキュリティ上の観点からも できる事なら使わずに済んだほうが良いわけです。

今回は、WordPressの記事の下に関連記事をアイキャッチ（画像）付きで表示させるのをプラグイン無しで表示させる方法をご紹介します。

元記事はこちらです。
How to add WordPress Related Posts Without Plugins

こんな感じになります

function.phpを編集

下記コードを function.php に追加します。サムネイルのサイズを変更したい場合は、コードを修正してアップしてください。

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 100, 50, true ); 

single.phpを編集

下記コードを single.php に追加します。

<div class="relatedposts">
<h3>Related posts</h3>
<?php
	$orig_post = $post;
	global $post;
	$tags = wp_get_post_tags($post->ID);

	if ($tags) {
	$tag_ids = array();
	foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;
	$args=array(
	'tag__in' => $tag_ids,
	'post__not_in' => array($post->ID),
	'posts_per_page'=>4, // Number of related posts to display.
	'caller_get_posts'=>1
	);

	$my_query = new wp_query( $args );

	while( $my_query->have_posts() ) {
	$my_query->the_post();
	?>

	<div class="relatedthumb">
		<a rel="external" href="<? the_permalink()?>"><?php the_post_thumbnail(array(150,100)); ?><br />
		<?php the_title(); ?>
		</a>
	</div>

	<? }
	}
	$post = $orig_post;
	wp_reset_query();
	?>
</div>

CSSを編集

下記コードをCSSに追加して下さい。横幅や装飾を変更したい場合は下記より変更して下さい。

.relatedposts {width: 640px; margin: 0 0 20px 0; float: left; font-size: 12px;}  
.relatedposts h3 {font-size: 20px; margin: 0 0 5px 0; }  
.relatedthumb {margin: 0 1px 0 1px; float: left; }  
.relatedthumb img {margin: 0 0 3px 0; padding: 0;}  
.relatedthumb a {color :#333; text-decoration: none; display:block; padding: 4px; width: 150px;}  
.relatedthumb a:hover {background-color: #ddd; color: #000;}

コピペで表示させることができますので非常に便利です。あとは多少 ブログのデザインに合うように微調整してお使い下さい。