【WP】レイジーロード有効化のためimgの属性名を自動置換したいです。

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で何かしらの記述が必要でしたら、合わせてご教示いただけるとありがたいです。

CHERRY

2019/04/29 07:21 編集

反映されませんでは、状況がわかりませんので、どのような状況になるのかを具体的に記載してください。例えば、エラーが表示される場合は、エラーメッセージをそのまま記載してください。

KazuhiroHatano

2019/04/30 03:02

どういう風に反映されないかがわからんのでなんともだけど <?=get_the_content();?>とか<?=$post->post_content;?>とかでコンテンツを出力してるとthe_contentのフィルタを通らないそこは大丈夫？

Masa-Y

2019/04/30 05:14

CHERRYさま、KazuhiroHatanoさま、ありがとうございます。画像を２つ追加しました。状況は、画像のsrc属性はdata-echoに変換されずに、 srcのままで出力されています。そのため通常のロード時の読み込みで、遅延ローディングになりません。

Masa-Y

2019/04/30 05:18

すみません、追加画像の１つめは、背景画像のアドレスがhttpであったことが原因でした。 httpsに修正しましたらエラーは消えました。

Masa-Y

2019/04/30 05:22

wp-config.phpのデバッグモードをtrueにしていますが、ブラウザ画面にエラー表示は出ていません。

KazuhiroHatano

2019/04/30 05:27

１　そもそもcustomize_img_attrが実行されてるのか確認２　フィルタフックの実行優先順位を下げてみる（add_filterの第３引数に大きい数字を入れる）３　customize_img_attrで$contentおよび$re_contentをdumpしてみて意図通りの値か確認

Masa-Y

2019/04/30 05:31

ありがとうございます！１２３試してみます、すこしお時間頂いて再度ご報告します。

Masa-Y

2019/05/03 02:57

お世話になります。 1 ustomize_img_attrは実行されています(src → data-echo に置き換わっています)。画像追加しました。２１００を入れてみましたが動きに変わりないようです３ customize_img_attr関数内にvar_dump入れてみましたら、$contentは string(8292)"、$re_contentは string(8364)" と出ました。自分自身これが何を意味するのかは、よくわかりません。すみません。

Masa-Y

2019/05/03 03:08

echo.jsは反映されるようになったので、一旦解決とさせていただき、二つ目の質問は内容を整理した上であらためてさせていただこうと思いますありがとうございました。