Как заменить <img>, включая атрибут класса "size-full", элементом <picture>из содержимого публикации WordPress с помощью регулярного выражения?

Question

Я занимаюсь разработкой своей пользовательской темы и пытаюсь выяснить, как изменить код по умолчанию для WordPress <img>, вставленный в содержимое публикации, чтобы я мог добавить поддержку формата webP и включить его в элемент <picture>.

Я не могу заставить его работать с регулярным выражением.

В настоящее время в содержимом моего сообщения есть элемент для отображения эскиза в теге <p>, но тег <img> представляет собой ссылку <a>, которая указываетк полноразмерному изображению.

В настоящее время я получил это для полноразмерного изображения в содержимом сообщения:

<p>
    <a href="http://www.example.com/wp-content/uploads/2018/11/image-full.jpg" itemprop="url" title="Some title">
        <img alt="Alt tag of the image" class="alignnone size-full" src="http://www.example.com/wp-content/uploads/2018/11/image-thumb.jpg" width="940" height="529">
    </a>
</p>

Я пытаюсь изменить его, чтобы получить в результате:

<p>
    <a href="http://www.example.com/wp-content/uploads/2018/11/image-full.jpg" itemprop="url" title="Some title">
        <picture>
            <source srcset="http://www.example.com/wp-content/uploads/2018/11/image-thumb.webp" type="image/webp" />
            <img alt="Alt tag of the image" class="alignnone size-full" src="http://www.example.com/wp-content/uploads/2018/11/image-thumb.jpg" width="940" height="529">
        </picture>
    </a>
</p>

У меня есть одно или несколько изображений, вставленных вот так.Итак, нужно будет проверить весь контент поста и как-то изменить / заменить его, найдя класс с «size-full», а затем добавить их вокруг?

Должен ли я использовать preg_replace() или любую функцию?

Может быть, использовать какой-то фильтр?

У вас есть идеи, как его изменить?

Answer 1

Вы должны просмотреть все изображения внутри $post the_content(), используя foreach().

Что дает нам regex для группового соответствия тега <img>.Поместите все изображения в array().

Начните отсчет с -1, поскольку 0 имеет 1-е изображение уже в array().

Переберите array() с изображениями, найдите изображениес "size-full" с групповым соответствием 3, если да, получите его значение src с групповым соответствием 7.

После, замените src="value" extenstion - .png, .jpg ...,назначить замененную строку новой переменной.Используйте новую переменную и добавьте к ней расширение ".webp".

Замените существующие теги <img> элементом <picture> и вызовите функцию для $content.

function webp_picture_fix($content){
    global $post;
    preg_match_all("/<img(.*?)class=('|\")(.*?)('|\")(.*?)src=('|\")(.*?)('|\")(.*?)>/i", $content, $images);

    if(!is_null($images)){
        $i = -1;
        foreach ($images as $key) {
            $i++;
            //echo $key[$i];
            if(strpos($images[3][$i], 'size-full') !== false){
                //echo "hi";
                $slika_ekstenzija = $images[7][$i];
                $sewebp = preg_replace('/\\.[^.\\s]{3,4}$/', '', $slika_ekstenzija);
                $webp_slika_src = $sewebp.".webp";
                $replacement = '<picture><source srcset="'.$webp_slika_src.'" type="image/webp" /><img'.$images[1][$i].'class='.$images[2][$i].$images[3][$i].$images[4][$i].$images[5][$i].'src='.$images[6][$i].$images[7][$i].$images[8][$i].$images[9][$i].'></picture>';
                $content = str_replace($images[0][$i], $replacement, $content);
            }
        }
    }

    return $content;
}
add_filter('the_content', 'webp_picture_fix', 9999);