WordPress Popular Postでオリジナルのサムネイル画像を使う方法

WordPress Popular Posts（WPP）は、人気記事ランキングを簡単に表示できるWordPressの定番プラグインです。

WPPにはサムネイル画像を指定したサイズに加工してくれる便利機能が実装されていますが、元画像からサムネイルを作成するので自分で加工して使っている場合には意図したサムネイル画像が作成されません。

また、異なる記事で同じサムネイル画像を使ったり、WPPで作られた画像がWordPressが生成したサムネイル画像と同じになったりするとGTmetrixで「Serve resources from a consistent URL」という指摘（同じリソースが別々のURLで使われてる）を受けてしまいます。

そんな時には、WPPのサムネイル画像の参照先を変更すれば改善するので方法を紹介します。

WPPのサムネイル画像参照先の変更
まとめ

WPPのサムネイル画像参照先の変更

WPPには、custom_wpp_post_outputというhookが用意されているのでこれを利用します。

下記のコードをfunction.phpに追記すると、サムネイル画像の参照先がWordPressのサムネイル画像に変更されます。


function custom_wpp_post_output( $content, $post, $instance ) {
    if( has_post_thumbnail( $post->id ) ) {
        list($src, $width, $height) = wp_get_attachment_image_src( get_post_thumbnail_id( $post->id ), 'thumbnail' );
        $content = preg_replace( "/<img(.*) src=\"[^\"]+\"([^>]*)>/i", '<img$1 src="'.$src.'"$2>', $content );
    }
    return $content;
}
add_filter( 'wpp_post', 'custom_wpp_post_output', 10, 3 );

wp_get_attachment_image_srcの第2引数にthumbnailを指定していますが、独自にサムネイル用の画像を作成している場合には変更して使ってください。STINGER8ならst_thumb100やst_thumb150が利用できます。

WPPで指定しているサムネイル画像サイズ（縦横）とWordPressが作成しているサムネイル画像サイズが異なると画像表示が崩れる場合があるので注意してください。サイズが異なる場合には、WordPressのサムネイル画像を作り直すか、WPPのサムネイル画像を使ってください。

また、サムネイル画像の参照先を変更してもWPPのサムネイル画像は作成されます。放置していてもあまり問題にはなりませんが、時々削除するのが無難です。WPPの設定メニューの「Tools」＞「Empty image cache」で削除できます。

まとめ

自分が用意したサムネイル画像と違うのが気になって実装してみましたが、GTmetrixの指摘も改善されるという効果もありました。

WordPressとWPPが同じサムネイル画像を参照すれば画像のダウンロード数が軽減されるという効果があるので、興味があったら試してみてください。

WPP Plus Widgetを使っている場合でも、この方法で変更できます。