Wordpressブログサイトの読み込み速度向上のために、
echo.jsを利用して、Wordpressの投稿記事の画像を、
画面のスクロールに応じて遅延ローディングするよう設定中です。
そのためには、imgタグのsrc属性名を→data-echo属性に変更しなければなりません。
記事投稿欄の中で手動で変更することは可能なのですが、
記事に画像を多用していまして、できれば自動で置換されるようにしたいと考えています。
ネットで調べて自分なりに下記のように書いてみたのですが、変更が反映されません。
初歩的な質問でお恥ずかしいですが、
お詳しい方のアドバイスいただけましたら大変助かります。
php
1【functions.php】 2 3//imgのsrcset属性を無効にする 4add_filter('wp_calculate_image_srcset', '__return_false'); 5 6//src属性をdata-echoに書き換え 7function customize_img_attr($content) { 8 $re_content = preg_replace('/(<img[^>]*)\s+src=/', '$1 data-echo=', $content); 9 return $re_content; 10} 11add_filter('the_content','customize_img_attr');
また、画像読み込みまでの間、src属性にloading.gifを表示させるようにしたいのですが、
そのようなことは可能でしょうか。
希望の出力内容は、以下のようなものです。
php
1【before】 2<figure class="wp-block-image"><img src="画像リンク" alt="xxx" class="wp-image-xxxx"/></figure> 3 4//下のように変換したい 5【after】 6<figure class="wp-block-image"><img src="~/images/loading.gif" data-echo="画像リンク" alt="xxx" class="wp-image-xxxx"/></figure>
javascriptで何かしらの記述が必要でしたら、合わせてご教示いただけるとありがたいです。
あなたの回答
tips
プレビュー