ジャンクワードの森

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

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 = "https://blog.junkword.net/wp-content/themes/junkword/images/default.jpg";
}
return $first_img;
}[/php]

「$first_img=”https://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]

トップページに表示させない方法

このままでもいいんですが、ジャンクワードの森の場合トップページが最新の記事になっているため、情報が重複してしまいます。

そこでこんな感じで条件分岐させて、トップページではサムネイル画像付きの最新記事を出さないようにしました。

[php]<?php if(is_home() && !is_paged()): ?><?php else: ?>~最新記事~<?php endif; ?>[/php]

これ以外でも、
[php]<?php if(is_single()) : ?>~最新記事~<?php else: ?><?php endif; ?>[/php]
と書いてもOKだと思います(すみません、こっちは検証していません)。

サムネイル画像付きの記事一覧は最新記事以外にもよく読まれている記事でも使えると思うので、適時変更させていきたいと思います。

<スペシャルサンクス>
この記事(というかWordPressの設定)はこちらのサイトを参考にさせていただきました。ありがとうございます。
記事内の一番最初の画像を取得してサムネイル画像表示 | 簡単ホームページ作成支援-Detaramehp

Sponsored Links

同じカテゴリの最新記事

運営者情報など

運営サポート

35-45 WOMAN

35-45WOMAN(サンゴーヨンゴーウーマン)は、「カッコいいけど身近」な女性向けWEBマガジン。

デザインとかコーディングとか、WordPressの構築とか裏側の部分を一通りやらせていただいています。

ブログ更新のアイテムとかスキルとか