記事に含まれる1枚目の画像を抽出する

WordPressで記事に含まれる1枚目の画像を抽出する関数をご紹介します。
抽出した画像を使ったサムネイル付きの記事一覧を作る場合などにご利用ください。

2015/4/17 更新
情報が古くなっていたため、アイキャッチ画像に対応する等、ソースコードを書き換えました。
以前公開していたソースコードにはphp5で廃止された関数等が含まれていますので、ご注意ください。

WordPressでは、記事にひもづいた画像を出力するプラグインは存在しますが、過去にアップロードした画像などを使いimgタグで出力した場合などにうまく出力されないケースが多いようです。
以下のサンプルコードでは、アイキャッチが存在する場合はアイキャッチ画像を、記事に紐付いた画像が存在する場合はその1枚目の画像を、どちらも無い場合は本文中に出てくる1つめのimgタグの画像を取得します。

取り急ぎの対応内容をそのまま記載していますので、phpが分かるかたはもう少しコードを整理してから実装されることをお勧めします。

function getPostImage($mypost, $size = 'MEDIUM'){
	if(empty($mypost)){ return(null); }
	
	if(has_post_thumbnail($mypost->ID)){
		// アイキャッチ画像を設定済みの場合
		$file_id = get_post_thumbnail_id($mypost->ID);
	}else{
		// アイキャッチが設定されていない場合
		$files = get_children(array('post_parent' => $mypost->ID, 'post_type' => 'attachment', 'post_mime_type' => 'image'));
		if(is_array($files) && count($files) != 0){
			$files = array_reverse($files);
			$file  = array_shift($files);
			if(is_object($file) && isset($file->ID)) $file_id = $file->ID;
		}
	}
	
	if(isset($file_id) && !empty($file_id)){
		// アイキャッチまたは添付されているファイルIDが取得できている場合(altは記事タイトルを使う)
		if(!empty($size)) $res_temp = wp_get_attachment_image_src($file_id, $size);
			else $res_temp = wp_get_attachment_image_src($file_id);
		
		if(is_array($res_temp)){
			$resultArray = array(
				"url"    => $res_temp[0],
				"alt"    => $mypost->post_title
			);
		}
	}
	
	if(!isset($resultArray) || empty($resultArray)){
		// ここまでで画像が取得できていない場合は、記事本文中からimgタグを拾う
		if(preg_match('/<img([ ]+)([^>]*)src=["|']([^"|^']+)["|']([^>]*)>/',$mypost->post_content,$img_array)){
			$resultArray["url"] = $img_array[3];

			// ALTを取得
			preg_match('/alt=["|']([^"|^']+)["|']/',$img_array[0],$alt_array);
			if(!empty($alt_array)) $resultArray["alt"] = $alt_array[1];
				else $resultArray["alt"] = $mypost->post_title;
		}
	}
	
	// ここまで来ても取得できていなければnullを返す
	if(!isset($resultArray)) $resultArray = null;
	
	return($resultArray);
}

この関数を、テーマのfunctions.php内に記述します。

動作を簡単に説明しておきます。

引数が無い場合は、何もせずそのままnullを返しますので、No Image画像を出力するなどの判定条件として使用可能です。
次に、アイキャッチ画像が設定されているかどうかを判定し、設定されていればファイルIDを取得します。
アイキャッチ画像が無い場合は記事作成時にメディアを追加ボタン等を使って挿入された画像があるかどうかを判定します。
こちらも存在する場合はファイルIDを取得します。

続いて、ファイルIDが取得できている場合は実際の画像の取得を行います。
ここでは、wp_get_attachment_image_srcを使用していますが、リンクだけであればwp_get_attachment_linkを使っても構いません。

ここまでの処理で画像が取得できていない場合は、記事本文中のimgタグがあるかどうかを検出します。
同時にimgタグに含まれるsrc属性に設定されているURLを取得し、その後alt属性に設定されているテキストを取得します。

取得した画像の情報は$resultArrayに格納され、配列変数が返されます。

テーマから呼び出す場合は、getPostImage($post)のように、引数に抽出したい記事の配列変数をセットしてください。
例を以下に記載しておきます。

$postImage = getPostImage($post);
if($postImage == null){
	// 画像が無い場合の処理:No Image画像をセットするなどを記述
}else{
	// 画像がある場合の処理
	// 例では、imgタグのセット方法をご紹介しておきます
	echo '<img alt="' . $postImage["alt"] . '" src="' . $postImage["url"] . '" width="出力したい幅" />';
}

記事に含まれる1枚目の画像を抽出するへのコメント

こんにちは。
ずっと探していた関数が見つかり、大変嬉しいです!!ぜひ、こちらを使わせていただきます。
そこで恐縮なのですが、この関数を特定のカテゴリの記事にのみ反映させるにはどうすればよいのでしょうか。
ご教授願えると幸いです。

投稿者: よむ

コメントありがとうございます。
特定カテゴリのアーカイブページのみに使用するということでしょうか。
category-(id).phpを作るという方法か、$catの値で振り分ける方法になるかと思います。

投稿者: jun

すみません、自己解決しました!
ありがとうございました!

投稿者: よむ

[…] 記事に含まれる1枚目の画像を抽出する:APPOFIT. […]

[…] 引用元:記事に含まれる1枚目の画像を抽出する:APPOFIT […]

[…] 主にここを参考にさせていただきました。 あと、初めて正規表現に触れたのでこちらにもお世話になりました。非常にわかりやすい。 […]

[…] 記事一覧に詳細ページの1枚目の画像を抽出 記事に含まれる1枚目の画像を抽出する│APPOFIT様 […]

投稿者: 1o4.org - wordpressによるCMSの設置

[…]     【参考サイト】 》記事に含まれる1枚目の画像を抽出する 》WordPressで前後の記事に含まれる画像を表示する方法 》WordPres:前後の記事へのリンク 応用編 》次の記事と前の記 […]

[…] 記事に含まれる1枚目の画像を抽出する│APPOFIT様 […]

投稿者: wordpressによるCMS | 曲豆製作所

大変参考になり非常に助かったのですが、3つ記事があるとして、1枚目の画像だけを例えばトップページに3つの記事分複数表示したい時はどのようにしたらいいのでしょうか?
記載されているやり方のままループの中にいれても、画像が1枚しか表示されないのです。お手数をお掛けしますがご教授頂けると幸いです。

投稿者: あぶ

すみません、解決しました。
失礼しました。

投稿者: あぶ

こんにちは。

探していたソースが見つかりました!
ありがとうございます♪

ご質問ですが、こちらのソースに追加でユーチューブのサムネイルを取得することはできたりしますでしょうか?

投稿者: つっちー

コメントありがとうございます!
すでに1年前ぐらいの情報になっておりちょっと古いので、動作については検証してみてください。
YouTubeは同様の方法で、正規表現を使ってYouTubeのタグ部分を拾ってくるのが良いと思います。

投稿者: jun

1o4.org - wordpressによるCMSの設置 へ返信する コメントをキャンセル

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