WPの画像出力を検証してみた。

Wordpress関連
2023年2月25日

WordPressは今（2023年2月）の時点ではpictureタグに対応していない。
PCとスマホで別の画像を表示させたいなどの場合に有効なpictureタグが使えないのだ。
例えば画像を挿入する時にキャプションをいれた場合、ブロックエディタだとfigure figcaptionのタグが付与される。
しかしクラシックエディタの場合は
＜div id=”attachment_〜＞
のようにdivで囲われるため大幅に崩れてしまう。
そこで今までは全て手書きで＜figure＞＜figcaption＞を書き込んでいたわけだが、ブロックエディタなら自動で付与されるのでこれは利用価値があるのではないか。
ここにpictureタグをうまく噛み合わせればほぼ自動で行けるのではないかと思う。
自分のやりたいことに完全には対応していないが以下のコードをfunctions.phpに追加することでpictureタグが利用できる。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function update_content($content) {
    // imgタグからsrc width height altを取り出す
    $pattern = '/<img.*?(?=.*?src\s*=\s*[\"|\'](.*?)[\"|\'])(?=.*?width\s*=\s*[\"|\'](.*?)[\"|\'])?(?=.*?height\s*=\s*[\"|\'](.*?)[\"|\'])?(?=.*?alt\s*=\s*[\"|\'](.*?)[\"|\'])?.*?>/i';
　　　　　　　　// マッチしない場合は$contentをそのまま返す
    $update_content = preg_replace_callback($pattern, function ($matches) {
  
        $src = $matches[1];
        $width = $matches[2];
        $height = $matches[3];
        $alt = $matches[4];
  
        $format = '<picture>'
            . '<source type="image/webp" srcset="%s.webp">'
            . '<img src="%s" width="%s" height="%s" alt="%s" />'
            . '</picture>';
  
        return sprintf($format, $src, $src, $width, $height, $alt);
  
　　　　　　　　}, $content);
    return $update_content;
}
add_filter('the_content', 'update_content');

ただし、上記コードは同一画像をwebpで表示させるためのコードなので、PCとスマホで全く違う画像の表示には対応できないが何か応用できそうである。時間のある時に考えてみる。