#はじめに
WordPressで表示している内容をRatinaに対応するようにしてほしいと依頼された。
ブロックエディタの画像やサムネイルであれば自動で出し分けされるようだが今回はまとめてHTMLで記述されている。
なんとかしてimgファイルを置換すればいいかな。
#解決方法
WPテーマ内のfunction.phpに以下のコードを追加
//画像タグを抽出
$pattern = '/<img (.*?)src=[\'"](.*?)(\.png|\.jpg)[\'"](.*?)>/i';
preg_match_all('<img (.*?)src=[\'"](.*?)(\.png|\.jpg)[\'"](.*?)>', $text,$result);
$target = array();
$replace = array();
foreach($result[2] as $i=>$img_base){
$img = $img_base.$result[3][$i];
//画像URLからWP上のIDを取得
$id = attachment_url_to_postid($img);
//WPにアップロードされた画像であればlarge,mediumの画像を取得して画面幅によって切り替わるようsrcset属性と置換
if($id){
$target[] = 'src="'.$img.'"';
$target[] = "src='".$img."'";
$medium_img = wp_get_attachment_image_src($id, 'medium');
$large_img = wp_get_attachment_image_src($id, 'large');
$replace[] = 'srcset="'.$img.' 1025w, '.$large_img[0].' 1024w, '.$medium_img[0].' 600w" sizes="auto"';
$replace[] = "srcset='".$img." 1025w, ".$large_img[0]." 1024w, ".$medium_img[0]." 600w' sizes='auto'";
}
}
$text = str_replace($target, $replace, $text);
return $text;
}
add_filter("the_content", "img_to_multi");
#おわりに
がんばったらpictureタグに入れ替えるとかもできたかもしれないがそこまでは出来ていない。
あくまで画面幅にしか対応していないのでどちらかというとAndroid端末対応の方が正しいのかも。