制作会社から制作会社じゃない会社に転職が決まりました。制作会社で学んだことを残らず記事にしたいと思います。

パンDKOTORI Blogの公式キャラクター「パンD」です。
コーディングWordPress記事内の最初に使用されている画像を取得する[WordPress]

記事内の最初に使用されている画像を取得する[WordPress]

2014年12月08日WordPress 便利コード PHP 
記事内の最初に使用されている画像を取得する[WordPress]記事のアイキャッチ画像

記事内の最初に使用されている画像をめちゃくちゃ簡単に取得する方法をご紹介します。functions.phpにコードを追加する形です。

まえがき

この前ある案件でクライアントから「トップページの最新記事一覧に記事の中で使用されてる画像を表示させることは可能ですか。アイキャッチに登録するのが面倒なので。。。」というご要望をいただきました。。
確かに本文に絶対画像いれるのであればアイキャッチに画像を登録するの手間になりますよね。ググってみたらめちゃくちゃ簡単に対応できたので覚え書きです。

functions.phpにコードを追加する形です。

記事内の最初の画像を取得する

functions.phpにコードを追加する

下記コードを使用中のテーマのfunctions.phpに追加してください。

function catch_that_image() {
    global $post, $posts;
    $first_img = '';
    ob_start();
    ob_end_clean();
    $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
    $first_img = $matches [1] [0];
 
if(empty($first_img)){ //Defines a default image
        $first_img = "/images/default.jpg";
    }
    return $first_img;
}

10行目のパスは画像が無い時に表示する代替画像のパスを設定してください。

ザックリ説明すると、「preg_match_all()」関数で本文中のimgタグを$matchesに格納して$first_imgに代入。
$first_imgに値が入らなかった場合は代替画像のパスを出力するというコードですね。

出力するためのコード

functions.phpにコード追加できたら、実際に出力したいループ内に下記コードを追加してください。

<img src="<?php echo catch_that_image(); ?>" alt="<?php the_title(); ?>" />

特に難しいことはありませんね。
altは適宜変更してください。

出力した画像のサイズを制御する

今回紹介した方法で出力した画像をいい具合にリサイズしたいシチュエーションが多々あると思います。
実際KoToRiもそうでした。

しかし、今回ご紹介した方法だと「wp_get_attachment_image_src()」関数のようにメディアサイズを自由に指定することができないので
CSSで無理やり調整してやる必要があります。

といってもメチャクチャ簡単です。
画像自体に「max-width」と「max-height」を指定するだけです。
画像の最大サイズを「max-width」「max-height」で設定してやれば、最大サイズを超えないように縦横比固定で縮小してくれます。

って、CSSバリバリの方だったら説明されるまでも無いですね笑

まとめ

最初は「めんどくさそう」って感じでしたがやってみると簡単で非常に便利でした。
アイキャッチとかカスタムフィールドとかで画像登録するのメンドクサイ人はメンドクサイですからね。
こういう引き出しも持っているといざと言うとき提案できるのではないでしょうか。

参考サイト

wprecipes様

Thank you!

シェアするみんなシェアしてね

フォローするフォローする

いつもKOTORI Blogをご覧いただきありがとうございます。Facebook、Twitterを通じて、皆様と交流していき色んな情報を共有していければな~と思ってます。お気軽に登録してください!

基本フォロー返します。

RSSを登録する

RSSはこちらから。

follow us in feedly

Feedly使ってる人はこちらから。

Buy me a Beer

動く!パンDのLINEスタンプ
好きな人にアプローチスタンプ
パンDのLINEスタンプ

関連する記事関連する記事も読んでみてね

コメント