WordPressプラグインを使わないでアイキャッチ付きの関連記事一覧を表示する方法をご紹介します。WordPressプラグインは、簡単に使用することができます。ただ、プラグインは入れすぎるとその分、動作が遅くなったりと弊害の部分もあります。また、セキュリティ上の観点からも できる事なら使わずに済んだほうが良いわけです。
今回は、WordPressの記事の下に関連記事をアイキャッチ（画像）付きで表示させるのをプラグイン無しで表示させる方法をご紹介します。
こんな感じになります
function.phpを編集
下記コードを function.php に追加します。サムネイルのサイズを変更したい場合は、コードを修正してアップしてください。
1 add_theme_support( ‘post-thumbnails’ );<br />
2 set_post_thumbnail_size( 100, 50, true );
single.phpを編集
下記コードを single.php に追加します。
01 <div class=”relatedposts”>
02 <h3>Related posts</h3>
03 <p><?php<br />
04 $orig_post = $post;<br />
05 global $post;<br />
06 $tags = wp_get_post_tags($post->ID);</p>
07 <p> if ($tags) {<br />
08 $tag_ids = array();<br />
09 foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;<br />
10 $args=array(<br />
11 ‘tag__in’ => $tag_ids,<br />
12 ‘post__not_in’ => array($post->ID),<br />
13 ‘posts_per_page’=>4, // Number of related posts to display.<br />
14 ‘caller_get_posts’=>1<br />
15 );</p>
16 <p> $my_query = new wp_query( $args );</p>
17 <p> while( $my_query->have_posts() ) {<br />
18 $my_query->the_post();<br />
19 ?></p>
20 <div class=”relatedthumb”>
21 <a rel=”external” href=”<? the_permalink()?>”><?php the_post_thumbnail(array(150,100)); ?><br />
22 <?php the_title(); ?><br />
23 </a>
24 </div>
25 <p> <? }<br />
26 }<br />
27 $post = $orig_post;<br />
28 wp_reset_query();<br />
29 ?>
30 </p>
31 </div>
CSSを編集
下記コードをCSSに追加して下さい。横幅や装飾を変更したい場合は下記より変更して下さい。
1 .relatedposts {width: 640px; margin: 0 0 20px 0; float: left; font-size: 12px;}<br />
2 .relatedposts h3 {font-size: 20px; margin: 0 0 5px 0; }<br />
3 .relatedthumb {margin: 0 1px 0 1px; float: left; }<br />
4 .relatedthumb img {margin: 0 0 3px 0; padding: 0;}<br />
5 .relatedthumb a {color :#333; text-decoration: none; display:block; padding: 4px; width: 150px;}<br />
6 .relatedthumb a:hover {background-color: #ddd; color: #000;}
コピペで表示させることができますので非常に便利です。あとは多少ブログのデザインに合うように微調整してお使い下さい。
