カテゴリー
WordPress運営日誌»WP関連古記事»WordPress関数»

【ほぼコピペのみ】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さん、あかめ女子さん、有難うございました。

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



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

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

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

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

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

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

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

コメントを残す

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