読者です 読者をやめる 読者になる 読者になる

かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

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

WordPress Responsive HTML5

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

例えば、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などの属性を設定できるのですが、srcsetsizesは引数でで変更することができませんでした。 なので、例えば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;

まだ、sizesの書き方が理解しきれていないので、ちゃんと実験して理解したい。
レティナディスプレイの比率もいっぱいになって、モバイル対応が大変だ...


[参考]