web-dev-qa-db-ja.com

WebPをサポートしているWordPress投稿コンテンツで<img>タグの代わりに<picture>要素を使用する方法

私は自分のカスタムテーマを開発し、投稿コンテンツに挿入されたWordPress画像のデフォルトコードを変更する方法を見つけようとしているので、私はwebPフォーマットのサポートを追加して<picture>要素内に含めることができます。

私は自分のサーバー上のcwebpライブラリとWordPress管理でメディアに画像をアップロードしている間PHP exec()を使用して.webp画像を生成します。

コードは次のとおりです。

function my_image_webp($meta, $id){

    if(!isset($meta['sizes'])) {
        return $meta['full'];
    }

    $upload_path = wp_upload_dir();
    $path = $upload_path['basedir'];

    // media upload direktorij
    if(isset($path)){
        $file = trailingslashit($upload_path['basedir'].'/').$meta['file'];
    }else{
        $file = trailingslashit($upload_path['path']).$meta['file'];
    }

    list($orig_type) = @getimagesize($file);
    switch ($orig_type) {
            case IMAGETYPE_PNG:
            $png_image = preg_replace('/\\.[^.\\s]{3,4}$/', '', $file);
            exec("cwebp ".$file." -o ".$png_image.".webp");
            break;
            case IMAGETYPE_JPEG:
            $jpg_image = preg_replace('/\\.[^.\\s]{3,4}$/', '', $file);
            exec("cwebp ".$file." -o ".$jpg_image.".webp");
            break;
        }

        // return
        wp_update_attachment_metadata($id, $meta);
        return $meta;

    }
}
add_filter('wp_generate_attachment_metadata','my_image_webp', 10, 2);

現在、私の投稿コンテンツは<img>タグ内にサムネイルを表示するための<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>

このように挿入された1つ以上の画像があります。それで、全体の投稿内容をチェックし、どういうわけかこれを修正するか、または取り替える必要があるでしょうか？

Preg_replace（）またはWordPressのimage_send_to_editor（）関数を使用する必要がありますか？

たぶんいくつかのフィルタを使う？

変更する方法がありますか。

私は<figure>要素のためのいくつかの解決策を見つけました、しかしそれを<picture>と働かせることができません。

postsfunctionsimagespost-thumbnailshtml5
1
Kiki FIstrek Novi

the_content()を使って$postforeach()内のすべての画像をループする必要があります。

これは<img>タグのグループマッチングのためのregexです。すべての画像をarray()に入れます。

-1の最初の画像はすでにarray()に入っているので、0から数え始めます。

画像でarray()をループし、グループ一致"size-full"で3で画像を検索し、そうであれば、グループ一致7でsrcの値を取得します。

その後、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);
0
Fritex