Wordpress プラグイン「Post Avatar」を書き換えてサイズの違うサムネイル画像も表示した

2007.07.18

このBlogでは記事ごとに画像を表示できる Wordpress Plugin Post Avatarを使って、記事の右上に画像を表示させています。

Post Avatar の使いかたはここを参照に。
Post Avatar でオサレに着飾る « BorialisのBoroBoro日記

また、記事ごとに表示させている画像には、画像を鏡面反射させるWP Wetfloorプラグインを使っています。

「関連記事」と「最近の記事」にサムネイル画像

デザイン変更に伴って、中段の「関連記事」と「最近の記事」に記事ごとの画像をサイズを小さくして表示したかったので、CSSで画像サイズを変更しようと思ったのですが、CSSだと画質が悪くなるし、鏡面反射がうまくされなくなってします。

なのでサイズの小さなサムネイル画像を作って、Post avatarを書き換え、サムネイル画像を「関連記事」と「最近の記事」の記事ごとに表示するようにしました。

関連過去記事：3カラムにデザインをマイナーチェンジしました

「最近の記事」はget_posts()でループを作って、その中で記事のタイトル the_title()、記事の要約 the_excerpt()、記事ごとの画像 gkl_postavatar() を呼び出しています。

get_posts()の説明

僕が使用しているテーマのsingle.phpの一部、get_posts()で最近の記事を表示する例。gkl_postavatar()の４番目のパラメータは下記で記している変更に従っています。

        <?php
        $recentposts = get_posts('numberposts=5&offset=0');
        foreach($recentposts as $post) :
        setup_postdata($post);
        ?>
 
        <div class="entry">
     　
          <div class="entry_title">
            <a href="<?php the_permalink(); ?>" ><?php the_title(); ?></a>
          </div>
      

           <?php if (function_exists('gkl_postavatar')) gkl_postavatar('postavatar reflect rheight20 ropacity65', '', '','1'); ?>

           <div class="text">

             <?php the_excerpt(); ?>
           </div>

          <br class="clear_both" />
        </div>

       <?php endforeach; ?>

また、「関連記事」はUltimate Tag Warriorの関連記事を表示する関数 UTW_ShowRelatedPostsForCurrentPost() を使っています。この関数は、デフォルトでは記事の要約と記事の画像が表示されないので、ultimate-tag-warrior-core.php を書き換えて対応しました。この方法はまた今度記事にします。

「Post Avatar」を書き換えてサイズの違うサムネイル画像も表示

gkl-postavatar.php に変更を加えて、サイズの違うサムネイル画像も表示するようにしました。具体的には gkl-postavatar.php の関数 gkl_postavatar() に、新しいパラメータ $gkl_thumb を追加し、画像のパスを正規表現で書き換えています。また、gkl-postavatr.phpは他にも$post_titleやimgのクラスなんかにも変更を施しています。

以下、変更例。

function gkl_postavatar($class = "", $before = '<div class="postavatar">', $after = '</div>' ,$gkl_thumb="" ) {
    global $post, $gkl_AvatarURL, $gkl_myAvatarDir;
    $post_id = $post->ID;
    $CurrAvatar = get_post_meta($post_id,'postuserpic');
    $CheckAvatar = $gkl_myAvatarDir . $CurrAvatar[0];

    // Display nothing if value is empty or file does not exist
    if ( empty($CurrAvatar) || !file_exists($CheckAvatar) ) {

    } else {
        // Show post avatar
    
        $post_title = $post->post_title ;//変更 altとtitleに記事のタイトルが表示されるように    
        $CurrAvatarLoc = $gkl_AvatarURL . $CurrAvatar[0];

        if ( $CurrAvatarLoc != $gkl_AvatarURL ) {

            $CurrAvatarLoc = str_replace('/', DIRECTORY_SEPARATOR, $gkl_myAvatarDir . ltrim($CurrAvatar[0],'/'));
            if ( empty($gkl_thumb) )
                $CurrAvatarLoc = $gkl_AvatarURL . ltrim($CurrAvatar[0],'/');
            } else {
                $CurrAvatar = ltrim($CurrAvatar[0],'/');
                $CurrAvatar = preg_replace('/([0-9]+\/)?([0-9]+\/)?(.+?).png/', '$1$2thumbnail.$3.png' , $CurrAvatar);
                $CurrAvatarLoc = $gkl_AvatarURL .$CurrAvatar;
            }
            
            $dim = getimagesize("$CurrAvatarLoc");
            $width = $dim[0];
            $height = $dim[1];
                         
            if (empty($before) && empty($after) && !empty($class))
                echo '<img class="'. $class .'" src="'. $CurrAvatarLoc .'" style="width:'. $width .'px; height:'. $height .'px; border:none;" alt="'. $post_title. '" />'."\n";
            else
                echo $before .'<img class="'. $class .'" src="'. $CurrAvatarLoc .'" style="width:'. $width .'px; height:'. $height .'px; border:none;" alt="'. $post_title. '" title="'. $post_title. '" />'. $after ."\n";//$beforeと$afterでかつ$classが使える様に変更
        }
    }
}

僕の場合画像を置いている場所が、Postavarで設定したディレクトリ以下に直接画像を置いているものと、Postavarで設定したディレクトリ/2007/07/hoge.pngのように年と月でディレクトリを作ってその下に置いてあるものがあります。

また、画像の拡張子は全てpngで、hoge.pngのサムネイルはthumnail.hoge.pngとしています。

ですので上記の様な置換になりました。素人が趣味程度でやってるので、実はもっとうまい方法があると思われます。