サイドバーにサムネイル画像付きの最新記事を出しました（おまけ付き）

2012-12-25［WordPress］

当サイトではアフィリエイト広告を利用しています。

先日開催された「本気でアフィリエイトを学ぶ会2012」でネタフルのコグレさんが「記事のリンクは画像があるとクリックされやす」というようなことを話していたので早速実践。
catch_that_image

実はサイトリニューアル時点でもサムネイル付きの記事リンクは構想に入っていたのですが、時間の関係で先送りしていたことだったので、背中を押された感じです^^

サムネイル画像付きの最新記事を出す方法

サムネイル画像を出す方法はアイキャッチ画像を使うのもひとつの方法ですが、記事の内容によってアイキャッチを変えている関係で、すべての記事にアイキャッチを入れていないためちょっと別の方法を使っています。

それが記事内の一番最初の画像を取得し、それをサムネイル画像として使う方法です。これならアイキャッチを付けなかった記事でも画像を持ってくることが可能になります。

そもそも画像がない記事では、、、
という声も聞こえますが、ジャンクワードの森では画像のない記事はないですし、画像がなかった時の代替も設定できているので問題はないと思います。

前置きが長くなりましたが、実際の設定方法はこちら

functions.phpに次のコードを追加

[php]function catch_that_image() {
global $post, $posts;
$first_img = ”;
ob_start();
ob_end_clean();
$output = preg_match_all(‘/<img.+src=[\’"]([^\’"]+)[\’"].*>/i’, $post->post_content, $matches);
$first_img = $matches [1] [0];

if(empty($first_img)){ //Defines a default image
$first_img = "http://blog.junkword.net/wp-content/themes/junkword/images/default.jpg";
}
return $first_img;
}[/php]

「$first_img=”http://blog.junkword.net/wp-content/themes/junkword/images/default.jpg”;」の部分は記事に画像がなかった時の代替なので、必要に応じて変更させてください。

sidebar.phpに次のコードを追加

[php]<dl>
<dt><h2>最近の投稿</h2></dt>
<dd>
<?php query_posts($query_string . "&showposts=8"); ?>
<?php
if ( have_posts() ) : while ( have_posts() ) : the_post();
?>
<div class="new-entry">
<div class="image"><a href="<?php the_permalink(); ?>"><img src="<?php echo catch_that_image(); ?>" alt="<?php the_title(); ?>" /></a></div>
<h3 class="entrytitle"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
</div>
<?php endwhile; endif; ?>
</dd></dl>[/php]

ごちゃごちゃっとなっていますが、ポイントは

[php]<?php echo catch_that_image(); ?>[/php]

で、この記述を入れることで記事の一番最初の画像を読み込むことができます（functions.phpで設定してあります）。

＜おまけ＞
画像部分のCSSはこんな感じで設定してあります。

[css]aside#menu div.new-entry{
overflow: hidden;
padding: 5px 0 5px 0;
border-bottom:1px dotted #999;
}
aside#menu div.new-entry h3{
margin: 0 0 0 0;
font-size:12px;
line-height:1.3;
}
aside#menu div.new-entry div.image{
margin: 2px 0 0 0;
width:125px ;
float: left;
}
aside#menu div.new-entry div.image img{
width: 100px ;
height: 70px;
padding: 4px ;
border:2px solid #d6d6d6;
}[/css]