WordPressのトップページにエントリーのサムネイルを表示した


このブログ、トップページはエントリーの抜粋だけにしているので、何となく寂しい。なぜでしょう?そうか、写真がないからだ!ということで、トップページのエントリー毎にサムネイルを表示してみました。

image
↑サムネイルと抜粋を表示してます。

1.カスタムフィールド

参考にしたのはこちら。ご紹介ありがとうございます。
■カスタムフィールドを使用して投稿のサムネイルを表示する – わーどぷれすっ!

どうやらエントリー毎にメタ情報として、「カスタムフィールド」というのが追加出来るようです。ダッシュボードの編集ページを見てみると、確かにありますね。エントリー別につけられる変数だと思えばいいようです。

image
↑これ。既にpvc_viewsなるフィールドがあります。恐らくWordPress.com Statsプラグインで、統計情報をとってるので、それがつけてるんでしょうね。

ここに、サムネイルURLのフィールド”image_thumb”を追加して、index.phpで取り出せばいいというわけですな。

2.index.phpを修正

index.phpに、こんなコードがあるはずです。the_content()はエントリー全文を取り出す関数です。

<?php the_content(__('Continue reading', 'vicuna')); ?>

これを、こんな風に変えます。

<?php
    $values = get_post_custom_values("image_thumb");
    $imgSrc = $values&#91;0&#93;;
?>
<?php if ($imgSrc != '') : ?>
<p>
<a href="&lt;?php the_permalink() ?>" title="<?php the_title(); ?>">
    <img align="left" width="100px" src="&lt;?php echo $imgSrc; ?>" alt="<?php the_title(); ?>" />
</a>
</p>
<?php endif; ?>
<?php the_excerpt(); ?>

image_thumbというカスタムフィールドを取り出して、$imgSrcに入れます。URLが指定されていれば、エントリーへの固定リンク付きで画像を表示。幅は100px固定にして文章を左に回り込ませます。そして、the_excerpt()で、抜粋のみを表示するようにする。

これで出来上がりです。

3.まとめ

ちょっとサムネイルのURLを指定する手間が増えましたが、エントリー中の写真URLを指定するだけだけで済むし、何よりトップページが賑やかなのはいいですよね。

カスタムフィールド、何やら便利に使える予感がするぞ。他にも何かやってみようっと。