記事に含まれる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. よむ said on 2010/11/05 at 22:30

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

    • jun said on 2010/11/06 at 13:02

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

  2. よむ said on 2010/11/09 at 12:08

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

  3. あぶ said on 2014/11/10 at 18:52

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

  4. あぶ said on 2014/11/14 at 19:18

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

  5. つっちー said on 2016/06/15 at 13:19

    こんにちは。

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

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

    • jun said on 2016/06/15 at 13:51

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

コメントを残す

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

この投稿へのトラックバック

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

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

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

  4. 1o4.org - wordpressによるCMSの設置 said on 2012/03/07 at 18:27

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

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

  6. wordpressによるCMS | 曲豆製作所 said on 2014/07/03 at 12:15

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

トラックバック URL