WordPress imgタグに独自のクラスや属性を追加する

やりたいこと

• the_post_thumbnail() や wp_get_attachment_image() で出力される <img> タグに独自のCSSクラスや属性（data-*）を追加したい

Lazy Load 使いたいとかそういうパターン

配列で渡せばいいよ

例

• 投稿IDやサイズはよしなに
• CSSクラス lazy を追加する
• data-original 属性を追加する

the_post_thumbnail()

post_thumbnail.php

<?php
the_post_thumbnail(
    $size,
    array(
        'class'         => 'lazy',
        'data-original' => 'img/example.jpg'
    )
);

get_the_post_thumbnail()

get_the_post_thumbnail.php

<?php
get_the_post_thumbnail(
    $post,
    $size,
    array(
        'class'         => 'lazy',
        'data-original' => 'img/example.jpg'
    )
);

wp_get_attachment_image()

wp_get_attachment_image.php

<?php
wp_get_attachment_image(
    $attachment_id,
    $size,
    false,
    array(
        'class'         => 'lazy',
        'data-original' => 'img/example.jpg'
    )
);

全てで対応

wp_get_attachment_image() から出力される全ての img タグ（投稿サムネイルやギャラリーショートコードなど）で対応するならば wp_get_attachment_image_attributes フィルターフックだけでOK。

※コード未検証です

wp_get_attachment_image_attributes.php

<?php
function my_attachment_image_attributes( $atts, $attachment ) {
    $atts['class']         = $atts['class'] + ' lazy';
    $atts['data-original'] = 'img/example.jpg';
    return $atts;
}
add_filter( 'wp_get_attachment_image_attributes', 'my_attachment_image_attributes', 10, 2 );

現場からは以上です。