記事の一番最初の画像を取得してサムネイルにする方法【WordPress】

  • 投稿 : 2015-04-28
  • 更新 : 2018-01-17
追記:2017/11/06

Use an external image as Featured Image of your post/page/product (WooCommerce). Includes Auto Set (External Post), Product Gallery, Social Tags and m …

WordPress.org


【Wordpress プラグイン】記事の最初の外部画像URLもアイキャッチにする – ブログ運営のためのブログカスタマイズ

上記のように、プラグインで実現する方法もあります。

以下は、自力でPHPでやる方法です。



アイキャッチを設定していないが、記事一覧時にサムネイル表示したい場合があるかと思います。そういう時に使えると思います。テーマーのfunction.phpにユーザー関数を書けば、テーマの中で自由に使えます。

記事の一番最初の画像を取得するサンプル

// 記事内の画像を取ってくる
function get_the_content_image($postid = null) {
	 global $post;
	 $first_img = '';
	 
	 if(is_null($postid)){
		 $p = get_post($postid);
	 }else{
		 $p = $post;
	 }

	 $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $p->post_content, $matches);
	 $first_img = $matches [1] [0];

	 if(empty($first_img)){ //Defines a default image
		 $first_img = "images/no-image.png";
	 }
	 return $first_img;
}

上記をテーマーのfunction.phpに追加。

テーマファイルの中で、<img src="<?php echo get_the_content_image(); ?>"/>と指定すれば、画像が表示されるかと思います。

記事IDを明示的に指定する場合は、<img src="<?php echo get_the_content_image($postid); ?>"/>です。

ネットで検索すると、ほとんど同じコードがでてくるかと思います。どこが一番最初に書かれたものか不明なぐらいたくさん出てくると思います。そのサンプルには、 ob_start();、ob_end_clean();が使用されているのですが、個人的に必要なさそうに思うのでそのコードは削除しています。

参考:
WordPressで記事内の画像を取得 | KennyQi
WordPressで記事内の画像を、一覧表示のときなどに取得してサムネイルで表示する方法。と、謎のob_startについて | ブログ名つけてください。

記事の一番最初の画像のサムネイルを取得するサンプル

// 記事内の画像を取ってくる
function get_the_content_image($postid = null) {
	 global $post;
	 $first_img = '';
	 
	 if(is_null($postid)){
		 $p = get_post($postid);
	 }else{
		 $p = $post;
	 }

	  $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $p->post_content, $matches);
	 $first_img = $matches [1] [0];

	 if(empty($first_img)){ //Defines a default image
		 $first_img = "images/no-image-150x150.png";
	 }else{
		$first_img = substr_replace($first_img, '-150x150',strrpos($first_img,'.'),0) ;
	 }
	 return $first_img;
}

一つ目のサンプルだと、一番最初の画像のままなので、PCならOKでもスマホなどではデータ量という点でよろしくない場合があるかと思います。

Wordpressの場合は、画像のアップロード時に150x150のサムネイルを作成します。ファイル名の後ろに-150x150とつけるというルールになっているようなのでそれを利用します。

参考:
WordPressで記事中の最初の画像の「サムネイルのサイズ」で設定した正方形の画像を表示:メモ | webutubutu

ワンポイント!!

/<img.+src=[\'"]([^\'"]+example\.com[^\'"]+)[\'"].*>/i

画像のURLの一部に、example.comが含まれている画像だけを対象にしたい場合は上記のように書きかえれば可能です。正規表現の部分は、見直したほうがよい場合もあります。

preg_match()正規表現チェッカー

正規表現が期待通りの動作をするかどうかは、上記の「preg_match()正規表現チェッカー」で確認すると簡単です。

上手く動作しないとか、継続用のビーコン画像を取得してしまうとか、アフィリエイトの画像を取得するなどの場合は、正規表現の部分を見直してみてください。

参考:
記事内の一番最初の画像を自動で表示する『catch_that_image()』でうまく最初の画像が取得できない | マウスやすめ~パソコンに疲れたら・・・ 自分癒しのBLOG~

サムネイル画像を再生成してくれるプラグイン

■Regenerate Thumbnails
WordPress › Regenerate Thumbnails « WordPress Plugins

Wordpressの場合、画像アップロード時にサムネイルも作成するので、このタイミングで作らなかったものはサムネイルが存在しません。

そういう時は、再作成してくれるプラグインをつかって、生成すればよいかと思います。

アップロード時に画像をリサイズしてくれるプラグイン

■Imsanity
WordPress › Imsanity « WordPress Plugins

参考:
WordPress アップロード時に画像をリサイズしてくれる「Imsanity」 | 無料ホームページ制作、パソコン・インターネットの使い方

その他、情報源など

22の WordPress カスタマイズ ハック
First Image of WordPress Post as Thumbnail | KEN.ph

検索すると似たようなコードがいろいろ出てきますが、その中でも上記の2つが分かりよいかなと思います。

スポンサーリンク