不動産プラグインシリーズではver5.3.4 から物件画像を表示している imgタグ部分に「loading=”lazy”」タグを追加するようなりました。
以下の対象プラグインを利用する事で自動で 物件画像等に「loading=”lazy”」タグが追加されるようになります。
【不動産プラグイン(本体) ver5.3.4~ 】
【不動産カスタム面積検索プラグイン ver5.3.4~ 】
【不動産イン条件利回りプラグイン ver5.3.4~ 】
【不動産イン条件坪単価プラグイン ver5.3.4~ 】
【不動産物件ショートコードプラグイン ver5.3.4~ 】
【不動産閲覧履歴プラグイン ver5.3.4~ 】
【不動産プラグインテーマペース unpc ver5.3.4~ 】
この「loading~」とはブラウザ側で遅延ロードをサポートするもので、img要素やiframe要素に対応しています。
「loading=”lazy”」は最近 ウェブ標準 となり、ブラウザではChoromeとEdge等がサポートされています。
※Firefox も ver75(2020/4頃) で対応されるそうです。
将来的にはWordPress標準となる機能です。※WordPress5.5(2020/8頃)~
【参考】Can I use… Support tables for HTML5, CSS3, etc
https://caniuse.com/#feat=loading-lazy-attr
「loading=”lazy”」をキャンセルする方法
すでに別の方法で遅延読み込みをしている場合は、「loading=”lazy”」をキャンセルする事ができます。
以下のコードを テーマの functions.php 又は my-plugin.php に張り付けてください。
/** * Lazy-Loading Images * * @since Fudousan Plugin 5.3.4 */ add_filter( 'fudou_lazy_loading_enabled', '__return_false' );
テーマ側での対応方法
もしテーマ側でも物件一覧や物件詳細ページ等で独自コードで画像を表示している部分があれば「loading=”lazy”」タグが追加されるように 検討してください。
【参考】以下はunpcテーマベースでのやりかたです。
※これにより「loading=”lazy”」が不要な方向けに 上記のアクションフィルターを使って「loading=”lazy”」タグ追加をキャンセルすることもできるようになります。
①functions.php に以下のコードを追加
/** * Lazy-Loading Images * * @since Fudousan Plugin 5.3.4 */ if ( !function_exists( 'fudou_lazy_loading' ) ) { function fudou_lazy_loading() { global $fudou_lazy_loading; if( false !== apply_filters( 'fudou_lazy_loading_enabled', true ) ){ $fudou_lazy_loading = 'loading="lazy"'; }else{ $fudou_lazy_loading = ''; } } add_action( 'init', 'fudou_lazy_loading' ); }
②imgタグがあるテンプレート に以下のコードを追加・修正
■該当のテンプレート又は関数内にlazy_loadingタグを取得するコードを書き込んでください。
global $fudou_lazy_loading;
■以下imgタグを変更してください。
echo '<img src="・・・・'; ↓ echo '<img ' . $fudou_lazy_loading . ' src="・・・・">';
又は
<img src="・・・・'; ↓ <img '<?php echo $fudou_lazy_loading;?> src="・・・・">