ワードプレスでカテゴリーページやトップページで投稿のサムネイルを表示させたいけど、その都度サムネイルを設定するのが面倒だったウェブシュフです。このたび、ネット上の情報のおかげさまで、この作業を半自動化できたので報告します。

実現したこと

• サムネイルを設定している場合はそのURLを取得。
• サムネイルを設定していない場合は、投稿の最初の画像をサムネイルのサイズに縮小したもののURLを取得。
• 投稿にサムネイルを設定しておらず、投稿内に画像が一枚も無い場合は、テーマファイルのディレクトリーにアップロードしたno_image.pngの絶対パスを取得。
• 上のようにして取得したURLを各投稿のサムネイル画像のURLとする。

コード

<?php 
$str = $post->post_content;
$searchPattern = '/<img.*?src=(["\'])(.+?)\1.*?>/i';//投稿にimgタグが含まれているか調べる
if (has_post_thumbnail())
    {/**サムネイルを設定している場合はそのURLを取得。**/
    $image_id = get_post_thumbnail_id();
    $image = wp_get_attachment_image_src( $image_id, 'thumbnail');
    $ogimage=$image[0];
    } 
else if ( preg_match( $searchPattern, $str, $imgurl )) 
    {/**サムネイルを設定していない場合は、投稿の最初の画像を
サムネイルのサイズに縮小したもののURLを取得。**/             
    $ogimage=$imgurl[2];
    $ogimage=preg_replace("/-[0-9]+x[0-9]+/","",$ogimage);
    $ogimage=str_replace(".jpg", "-150x150.jpg", $ogimage);
    $ogimage=str_replace(".png", "-150x150.png", $ogimage);
    $ogimage=str_replace(".gif", "-150x150.gif", $ogimage);
    } 
else 
    {/**投稿にサムネイルを設定しておらず、
        投稿内に画像が一枚も無い場合は、
        テーマファイルのディレクトリーにアップロードした
        no_image.pngの絶対パスを取得。**/
    $ogimage=get_stylesheet_directory_uri()."/no_image.png";
    }
?>

コードを少し解説

上のコードの「-150×150」は、管理画面の「設定」→「メディア」の「サムネイルのサイズ」に合わせています。

ウェブシュフは上のような設定にしていますが、違う設定にしている場合はコードの「-150×150」を「サムネイルのサイズ」に合わせて適宜変えてください。

また、$ogimageは、トップページやカテゴリーページで各投稿のサムネイルとして呼び出される画像のURLを表しています。

コードの使い方

上のコードを、カテゴリーページやトップページのループ内のなるべく最初の方にコピペして、サムネイルを表示したい場所に<img src=”<?php echo $ogimage; ?>” />を記入すれば完成です。

これで、投稿編集画面で「アイキャッチ画像」の設定をしなくても、必ずサムネイルが表示されるようになります。

自動で表示されるサムネイル（投稿に含まれる最初の画像を縮小したもの）が気に入らないときのみ、投稿編集画面で「アイキャッチ画像」の設定をすればいいんです。

Special Thanks

今回の記事は以下の２記事を大いに参考にして書きました。Oxy notesさん、あかめ女子さん、有難うございました。

• 貼るだけ簡単！アクセスが倍増するWordPress用OGPコード | OXY NOTES

• ”[Å

私がブログでFacebook OGPの設定をプラグインに頼らない2つの理由 | あかめ女子のwebメモ”]