WordPress 4.4 Responsive Images の size の値を変更したい。

WordPress 4.4 以降では、管理画面からアップロードされた画像を表示させる時に、wp_get_attachment_image()とかget_the_post_thumbnail()とかの関数を使ってimgタグを出力すると、自動的にsrcsetとsize属性がつくようになりました。

例えば、580px x 166px の画像を出力した場合はこんな感じです。

<img width="580" height="166" src="/uploads/img580x166.png" class="attachment-full size-full" alt="" srcset="/uploads/img580x166.png 580w, /uploads/img580x166-300x86.png 300w" sizes="(max-width: 580px) 100vw, 580px">

srcset属性は、画像をトリミングしているものを指定すれば、比率が異なるサイズのものは取ってこないので良いのですが、
size属性は(max-width: 580px) 100vw, 580px"のように、オリジナル画像の幅以下の場合はViewport幅の100%が表示され、それ以外はオリジナルの画像が表示されるような設定が自動的に付けられてしまいます。

wp_get_attachment_image() 関数の第三引数でaltなどの属性を設定できるのですが、srcsetとsizesは引数でで変更することができませんでした。なので、例えばsizes="100v" とかにしたい場合に困ってしまいます。
　

WordPressのメディアのsrcsetとsizesを取得・変更する方法

srcset と sizes の取得方法

下記の関数で取得することができます。

srcset は

wp_get_attachment_image_srcset( $attachment_id, $size = 'medium' )

sizes は

wp_get_attachment_image_sizes( $attachment_id, $size = 'medium' )

sizes を独自に変更したい場合

少し面倒なのですが、srcsetを取得してimgタグを組み立てればOKそうです。

<?php
$thumb_id = get_post_thumbnail_id( $post_id );
// wp_get_attachment_image_url の size のデフォルト値は `thumbnail`
$src = wp_get_attachment_image_url( $thumb_id, 'thumbnail' );
$srcset = wp_get_attachment_image_srcset( $thumb_id, 'thumbnail' );
$alt = get_post_meta($thumb_id, '_wp_attachment_image_alt', true);

$img = '<img src="' . $src . '"
     srcset="' . $srcset . '"
     sizes="100v" alt="' . $alt . '">';

echo $img;