Add Me!Close Menu Navigation
Add Me!menu

記事一覧にサムネイル画像をつけてみる

wordpress2.9から、記事にサムネイル投稿できる機能がつきました。(3.0ではアイキャッチ画像)

この機能を使って、記事の一覧などにサムネイルを入れているのは時々見かけます。

 

ただこの機能を使う場合は、記事を投稿するたびに何らかの画像をアップしなければなりません。

アイキャッチ専用に画像を用意するというのもちょっと……と思ったので、今回は下記の方法をとることにしました。

投稿記事内の最初の画像をサムネイルとして使用する

やり方はこちらを参考にしました。

1.まず使用しているテーマの functions.php をエディタで開きます

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://xxxxx.lolipop.jp/wp/xx/wp-content/themes/xxxxxxx/images/thumnail.jpg"; 

 }
    return $first_img;
}

もしも、テーマ内にfunctions.phpがなかった場合は新しく用意します。

テキストエディタで

1行目    <?php

2行目以降に上記のコード

最後の行   ?>

と入力し、文字コードをutf-8にして、「funcitons.php」という名前で保存します。

2.index.phpのサムネイルを入れたい部分にコードを追加

記事一覧のループの中で、サムネイル画像を入れたい部分に

<img src="<?php echo catch_that_image(); ?>"  width="50" height="50"/>

と追記します。

このとき、「width="50" height="50"」と指定したサイズがサムネイルのサイズになります。

この部分にclass指定してレイアウトを整えてもOKです。

archive.phpなど他にサムネイルを追加したい箇所があればそちらにもコードを追加します。

※この方法の一番の欠点は、もともとの投稿画像を 無理矢理サイズ変更して表示していることです。

 この方法ではwidthとheightの指定で見栄え上リサイズしているだけなので、だいたい変倍(縦横比が違う)がかかりますし、元画像を読み込んだ上ブラウザで変換処理というのは、見ている側に負担のかかる処理として昔から忌避されてるやり方でもあります。

投稿サムネイル機能では、画像の一部を切り取った上で別保存できるので本来はそちらの方がいいのかなあ……。すみませんズボラで。

Leave a Reply




monthly archive

Bookmark

  • www3.to/無料URL転送サービス

コロプラ

  • もう少し成長させてみる
    2012/03/22 | 11:17 AM

    万プラ・万コロを達成した我がコロニー。 フィールドも全て埋まってしまったのでとりたててすることもない。 初めて勧誘した知人はかなりの旅行魔で、距離ボーナスとアイテムをざかざか獲得してくれる。 警戒していたわらしにも先日と […]

    No Comments

  • RSSArchive for コロプラ »