記事内から最大の画像を取得してサムネイル表示

自作プラグインの人気記事一覧にサムネイル表示を付け加える方法を調べてみました

検索すると、catch_that_image() という記事内の最初の画像を取得するコードが複数のサイトで紹介されていましたので、そのコードを参考に、人気記事のリンク一覧にサムネイル画像を付けてみます

参考サイト WordPressの投稿記事内の画像の最初の1枚をサムネイルとして表示 …

アイキャッチ画像（サムネイル）が設定されているか

元々WordPressの記事には、アイキャッチと言われるサムネイルを設定できるようになっています
従って、サムネイルが設定されていれば、get_the_post_thumbnail 関数でサムネイル画像を取得することが出来ます

設定されていなければ、記事内で画像の表示を行っていてもサムネイルを取得することは出来ません

そこで、サムネイルが設定されているか判断して、設定されていれば、get_the_post_thumbnail 関数を用いてサムネイルを取得し、設定されていなければ、作成した get_post_maximage 関数で記事内から最大画像を取得するようにします

こんな感じのコードとなります

    $thumbnail = '';
    if(isset($pid)){
        if ( has_post_thumbnail($pid)) {
            $thumbnail = get_the_post_thumbnail($pid, 'thumbnail', array('class' => 'ga-pvc-image', 'alt' => '' , 'title' => $ptitle) );
        }
        else {
            //記事内から画像を検索する
            $imageurl = $this->get_post_maximage($pid);
            if(!empty($imageurl))
                $thumbnail = '<img class="ga-pvc-image" alt="" src="' .$imageurl .'" title="' .$ptitle .'" />';
        }
    }

ちなみ $pid には、ポストIDが、$ptitle には記事タイトルが設定されています

has_post_thumbnail 関数が、サムネイルの有無を判定しています

また、サムネイルもなく、記事内にも画像がない場合は、ここでは何もしていませんが、No Image を表す画像を用意して表示させるのも良いかもしれません

次は、get_post_maximage 関数を作成します

記事内から最大 width 指定の画像取得

catch_that_image() という元のコードでは、正規表現で記事内の画像（ img タグ）にマッチするものを全て取得して、その最初の img タグを取得していましたが、最初の画像ではなく、最大のものを取得したかったので、img タグ毎にもう一度 width でマッチさせて、その中から width が最大の img タグを選択しています

あまりきれいなコードではありませんが、こんなふうに変更して get_post_maximage 関数としました

   //指定ポストIDの記事内の最大の画像を取得
    public  function get_post_maximage($postid)
    {
        $imageurl = '';
        $pdata = get_post( $postid );
        if( preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $pdata->post_content, $matches)){
            //指定サイズが最大の画像
            $maxwidth = 0;
            $maxnum = 0;
            $idx = 0;
            foreach ($matches[0] as $img){
                $match = array();
                if(preg_match('/width=[\'"]([^\'"]+)[\'"]/i', $img, $match)){
                    $width = (int)$match[1];
                    if($maxwidth < $width){
                        $maxwidth = $width;
                        $maxnum  = $idx;
                    }
                }
                $idx++;
            }
            if(!empty($matches[1][$maxnum])){
                $imageurl = $matches[1][$maxnum];
            }
        }
        return $imageurl;
    }

2013/9/27 追記 img タグのマッチを最短一致で行う

デバッグしていて img タグをうまく取得できない場合があったので調べてみると、HTML文が改行せずに連続に記述されていると正規表現で最長一致となりうまく行っていないことが分かりました

最短一致でマッチさせるために繰り返しメタ文字の後ろに？を追加しました

こんな感じに src の前と > の前の２箇所に追加です

        if( preg_match_all('/<img.+?src=[\'\"]([^\'"]+)[\'\"].*?>/ui', $pdata->post_content, $matches)){

これで改行していなくても img タグにうまくマッチしました (^^)

サムネイル表示

取得した画像は、サムネイルなら WordPress のメディア設定で指定しているサイズ、記事内から取得した画像なら、それぞれの画像サイズとなってしまうので、CSSにより表示サイズを指定します

なんでも良いのですが、今回は img タグに class="ga-pvc-image" というクラス属性をつけました

後は、CSSでこのクラス属性に width や height で任意の画像サイズを指定します

.ga-pvc-image {
    margin: 3px 10px 12px 1px !important;
    width: 80px !important;
    height: 70px !important;
    float: left !important;
}

私の環境ではうまく表示されなかったので important を使ってしまいましたが、サムネイル表示をさせることが出来ました (^_^;)

よくある表示ですが、文字だけよりもいい感じです (^^)

Program Tipsget_the_post_thumbnail, has_post_thmbnail, サムネイル, 記事内の画像取得