WordPressで記事内の1枚目の画像を取得する方法が便利すぎた
ワードプレスでサムネイル画像ではなく記事内の1枚目の画像を取得する方法が便利すぎた。
当ブログのトップページでは各記事の画像を取得し表示しているのですが、これが結構くせものです。サムネイルはget_the_post_thumbnailで呼び出せるのですがサムネイル画像だとちょっと小さい。出来れば記事下に使っている画像を取得したいのです。
なかなか用途を選ぶ要件だと思うのですが、ずばりの記事がありましたので紹介したいと思います。目的の動作が実現できました。感謝です><
01 . 手順
1.functions.phpに以下を追加する
function getPostImage($mypost){ if(empty($mypost)){ return(null); } if(ereg('<img([ ]+)([^>]*)src\=["|\']([^"|^\']+)["|\']([^>]*)>',$mypost->post_content,$img_array)){ // imgタグで直接画像にアクセスしているものがある $dummy=ereg('<img([ ]+)([^>]*)alt\=["|\']([^"|^\']+)["|\']([^>]*)>',$mypost->post_content,$alt_array); $resultArray["url"] = $img_array[3]; $resultArray["alt"] = $alt_array[3]; }else{ // 直接imgタグにてアクセスされていない場合は紐づけられた画像を取得 $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); $resultArray["url"] = wp_get_attachment_url($file->ID); $resultArray["alt"] = $file->post_title; }else{ return(null); } } return($resultArray); }
2.表示したい場所に以下を追加する(ループ内で使用)※少し改変
<?php $postImage = getPostImage($post); if($postImage == null){ // 画像が無い場合の処理 }else{ echo '<img class="first-img" alt="'.$postImage["alt"].'" width="400px" src="'.$postImage["url"].'" />'; } ?>
以上です:)
コメントにてクラス名に数字始まりのクラス名つけると動作がおかしい旨のご意見いただきました。命名的にも宜しくないので”1st-img”となっていたところを”first-img”に修正しました。01.手順 2の5行目
corcheroさん、ありがとうございます。
▼元記事
WordPressで記事に含まれる1枚目の画像を抽出する | ryodesign/codeclip(リンク先なくなっているようです)
これで1枚目の画像を表示したい場所に表示することができます。ピンポイントでかつ要件を満たす素敵な記事ですね。とても参考になりました。
Comments