0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

WordPressコンテンツ内の画像をsrcsetを使った出し分けに書き換える

Posted at

#はじめに
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端末対応の方が正しいのかも。

0
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?