Wordpressでfigureタグ+pictureタグを扱う

Wordpress(以下WP)を使用した案件で、挿入する画像にキャプションを付ける場合と付けない場合で出力されるタグに違いがあったので、どの場合でもfigureタグ+picutureタグで出力するようにする必要があった。
また画像はwebp形式で表示することを目的としています。

figureタグとは？

一昔前まではimgタグが存在し、Googleなどの検索エンジンやブラウザはimgタグが「画像」ということが認識できました。
しかしCSSもバージョンがあがり、簡単な図形やイラストの場合はCSSで作ることができ検索エンジンは「画像」という認識ができなくなり、そこでfigureタグが生まれました。
またfigureタグにfigcaptionタグというものを含めることができ
表示しているものの説明を文字で表示することができます。

pictureタグとは？

• 画面の幅に応じて表示する画像を出し分けることができる
  （PCの場合はA画像、SPの場合はB画像のような）
• webpを使用する際に対応していないブラウザの場合、代替画像を設定できる

<picture>
  <source srcset="***" media="(min-width: 1000px)"/> <!-- 幅1000px以上なら表示 -->
  <source srcset="***" media="(min-width: 700px)"/> <!-- 幅700px以上なら表示 -->
  <img src="***" /> <!-- 上記が当てはまらない場合に表示 -->
<picture>

キャプションなしの画像を登録した場合

クラシックエディターの上部にある「メディアを追加」ボタンから画像を追加した場合

<img loading="lazy" class="alignnone size-full wp-image-4632" src="http://localhost:8080/wp-content/uploads/2021/08/image1.png" alt="" width="640" height="640">

imgタグで挿入される

キャプションありの画像を登録した場合

クラシックエディター上ではWPショートコードで挿入される。

[caption id="attachment_4632" align="alignnone" width="640"]<img class="wp-image-4632 size-full" src="http://localhost:8080/wp-content/uploads/2021/08/image1.png" alt="" width="640" height="640" /> これはキャプションです[/caption]
<!-- /wp:paragraph -->

記事を表示した場合（ショートコード変換後）

<figure>
<img loading="lazy" class="wp-image-4632 size-full" src="http://localhost:8080/wp-content/uploads/2021/08/image1.png" alt="" width="640" height="640">
<figcaption>これはキャプションです</figcaption>
</figure>

キャプションなしでもありでも、この形で出力したい！！！！

Q. でもなぜ？
A. webp使用する場合に、非対応ブラウザの場合は代替画像をだすことができるため

<figure>
  <picture>
    <source srcset="***"/>
    <img src="***" />
  </picture>
  <figcaption>これはキャプションです</figcaption>
</figure>

解決方法

• 本文を表示する際にWPのフックを使って、画像のタグを置換する

WPのクラシックエディターで入力している場合
the_contentのフックを使うことで本文を加工することができます。

functions.php

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');

最後に

今回は画像をfigure+picture構造で出力することを目標としており
Wordpressでwebpを生成する方法は割愛しております。