【ほぼコピペのみ】WordPressのcategoryページで、各投稿から画像を抜き出してサムネイル表示する方法

更新

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

実現したこと

  • サムネイルを設定している場合はその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

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

貼るだけ簡単!アクセスが倍増するWordPress用OGPコード | Oxy notes

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

【ほぼコピペのみ】WordPressのcategoryページで、各投稿から画像を抜き出してサムネイル表示する方法」への2件のフィードバック

  1. らんらん

    上記のソースをとこのファイルに入れればいいですか?
    まだ初心者なので全然わかりません;;;;

    すみませんが、助けてください

    返信
    1. web_shufu 投稿作成者

      らんらんさん、コメント頂き有難うございます。

      お使いのテーマによって、コードを入れるべきファイルは変わります。TwentyTwelveやTwentyElevenなどのデフォルトテーマではcontent.phpです。

      そのほかのテーマではcategory.phpとかhome.phpになるのではないでしょうか。

      ただ、上記コードはビギナーの方が扱うには難しすぎるかもしれません。

      返信

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です