カスタムフィールドに登録した画像の imgタグに srcset属性（レスポンシブイメージ）をつける

2019スマホ全盛時代ですね。htmlも日々進化し、幅に応じて表示する画像を変えられるsrcset属性、いわゆる”レスポンシブイメージ”というのがあります。
WordPressはデフォルトのコンテンツ入力欄で貼り付けたimgタグには srcset属性を自動で付与して出力してくれますが、カスタムフィールドで登録した画像の imgタグには srcset属性を付与してくれません。
　
ちなみにコンテンツ入力欄で貼り付けた imgタグに srcset属性を自動でつけたければ、テンプレート側で呼び出す関数は、

<?php echo get_the_content(); ?>

ではダメですので気をつけましょう。

<?php the_content(); ?>

でないといけません。
私も一回これでハマりました。備忘録です。
　
　
余談はさておき、今回はカスタムフィールドプラグインの王道、Advanced Custom Fields（アドバンストカスタムフィールド）でカスタムフィールドに登録した画像の imgタグに srcset属性をつけてみようと思います。

テーマのfunctions.php に以下を追記しましょう。
※　Advanced Custom Fields 本家サイトからの流用です。

function awesome_acf_responsive_image($image_id,$image_size,$max_width){
    //引数は（画像ID, サイズ{full,large,medium,thumbnail}, 表示最大幅）

    if($image_id != '') {
        // set the default src image size
        $image_src = wp_get_attachment_image_url( $image_id, $image_size );
        // set the srcset with various image sizes
        $image_srcset = wp_get_attachment_image_srcset( $image_id, $image_size );
        // generate the markup for the responsive image
        echo 'src="'.$image_src.'" srcset="'.$image_srcset.'" sizes="(max-width: '.$max_width.') 100vw, '.$max_width.'"';
    }
}

これで関数側はできました。

あとは、表示したい場所に以下のように記述するだけです。
アドバンストカスタムフィールドの設定では、画像の返り値は「画像オブジェクト」「画像URL」「画像ID」の3択から選ぶことができますが、ここでは「画像ID」を設定してください。

$acf_img_id = get_field('acf_img');
<img <?php awesome_acf_responsive_image($acf_img_id,'medium','728px'); ?> class="xxx" >

これで srcset属性つきの imgタグのできあがりです。

---