- このトピックには17件の返信、2人の参加者があり、最後に
により2年、 2ヶ月前に更新されました。
-
投稿
-
【お使いの Snow Monkey のバージョン】 16.1.3
【お使いの Snow Monkey Blocks のバージョン】 14.1.1
【お使いの Snow Monkey Editor のバージョン】 7.0.1
【お使いのブラウザ】 Google Chrome
【当該サイトのURL】### 実現したいこと
トップページでファーストビューの画像の「loading=”lazy”」を外したい。### 発生している問題
過去に同様な投稿（「アイキャッチ画像の「loading=”lazy”」を外したい」）がありましたが、
その後WordPress 5.9で「ページで最初の画像および iframe のネイティブ Lazy-load が無効になった」という情報がありました。その情報をもとにSnow Monkeyで作成したサイトで試しているのですが、通常の固定ページでは確かにそのようになるのですが、ホームページに設定した固定ページでは最初の画像にも自動的に loading=”lazy” が付いてしまうようです。
### 試したこと
テストとしては投稿画面でページの最初に画像ブロックで適当な画像を設置しています。
通常の固定ページではloading=”lazy”は入りませんが、同じページをトップページに指定すると入るようになります。Snow Monkeyでトップページの場合にもファーストビューの画像のloading=”lazy”が入らないようにする方法について
ご存知の方がいらっしゃっいましたらご教示いただけますと助かります。【参考リンク】
最初の画像のネイティブLazy-loadを無効にしたWordPress 5.9がリリース – 海外SEO情報ブログEnhanced lazy-loading performance in 5.9 – Make WordPress Core
「アイキャッチ画像の「loading=”lazy”」を外したい」
よろしくお願いいたします。
いいねをした人: 居ませんご確認ありがとうございます。ウィジェトやページヘッダ画像は入っていないです。
簡単な検証用サイトを作成してみました。
ホームページとサンプルページは同じ手順で作成していますが
ホームページの1枚目画像にはloading=”lazy”が付きます。サンプルページ１は1枚目画像には付かず、2枚目画像には付いています。
しかし固定ページの場合も「最新の投稿」ブロックを追加したサンプルページ２には最初の画像にも loading=”lazy” がつきました。
その他のブロックの場合などは未検証です。
いいねをした人: 居ませんテストサイトありがとうございます！
トップページ、サンプル1についてはこちらでもほぼ同じ内容でローカル環境をつくってみたところ再現できました。サンプル2についてはこちらでは再現できませんでした。
トップページについては、ページ表示前にコンテンツの有無を調べるために
the_content()を実行しており、それで画像のカウントが二重になってしまうので問題がおこっているようです。themes/snow-monkey/template-parts/content/entry/front-page.phpで<?php ob_start(); $has_do_shortcode = has_filter( 'the_content', 'do_shortcode' ); if ( $has_do_shortcode ) { remove_filter( 'the_content', 'do_shortcode', $has_do_shortcode ); the_content(); add_filter( 'the_content', 'do_shortcode', $has_do_shortcode ); } else { the_content(); } $content = ob_get_clean(); ?> <?php if ( $content ) : ?>となっているところを、まるっと消して
<?php if ( get_the_content() ) : ?>に変えてしまうとどうでしょうか？
いいねをした人: 居ませんloading=”lazy” の付かなくなったトップページですが、サンプルページ２と同じように「最近の投稿」ブロックを追加してみたところ loading=”lazy” が付くようになってしまいます。
「画像」「画像」「最近の投稿」３つのブロックを並べただけの構造です。
いいねをした人: 居ませんんーなんでしょうね…それはこちらでは再現できませんでした。
wp-includes/media.phpの中にwp_get_loading_attr_default()という関数があります。これがlazyにするかどうかを判定して出力しているのですが、$content_media_count = wp_increase_content_media_count();という部分を
$content_media_count = wp_increase_content_media_count(); echo '<pre>`; var_dump($content_media_count); echo '</pre>`;としてみたら、画面上にどのような表示がされますか？ 僕の環境だと
int(1) int(2)という表示がされます。これは画像を表示するたびに実行されるので、画像が2枚だから1と2が出力されるということです。最近の登校ブロックを入れると最初の画像にも
lazyが出力されてしまうということは、その画像より前の段階で、何らかの理由によりこの関数が実行されているのかなと…。上記のようにコードを改変することで、この関数がどこで呼び出されたのかがわかるので、可能であれば試してみてください。いいねをした人: 居ませんやってみました。
トップページでは
int(2)
int(3)
int(4)
と表示されます。サンプルページ１（1枚目にlazyがついてない）では
int(1)
int(2)サンプルページ２ではトップページと同じ結果
投稿ページ「テスト２（最新の投稿ブロック追加） 」では
int(2)
int(3)となりました。
いいねをした人: 居ませんお！ということはやはりコンテンツの表示前に1回実行されているっぽいですね。ブラウザで HTML ソースを表示してみると、HTML ソース上のどこかに
int(1)が出力されていないでしょうか？ もし出力されているようであればどの部分の前後に出力されているか知りたいです。また、Snow Monkey Blocks 以外に有効化しているプラグインがあれば教えてください。
いいねをした人: 居ません最新の投稿ブロックのサムネ画像のところに出力されていました。
<div class="c-entry-summary__figure"> <pre>int(1) </pre><img loading="lazy" width="1024" height="768" src="（省略）"/>サムネの表示されない「テキスト」などにしても画像自体は出力されているのですね。
Snow Monkey Blocks以外の有効にしているプラグインは以下の３つです。
My Snow Monkey
Snow Monkey Editor
WP Multibyte Patchいいねをした人: 居ませんあーなるほどです。そうですね、なるべく共通のテンプレートパーツを使いたくて、レイアウトによっては画像を CSS で消しているだけのものがあります。が、なぜ最近の投稿ブロックの画像が最初に実行されているのかはわかりません…。
無理やりな方法ですが、Snow Monkey のフックで強制的に1つ目の
loading="lazy"を消すのが簡単かもしれません。add_filter( // テンプレートパーツ が template-parts/content/entry/content/content.php のときに実行 'snow_monkey_template_part_render_template-parts/content/entry/content/content', function( $html, $name ) { if ( 'page' === $name ) { // 固定ページのとき $html = preg_replace( '|loading="lazy"|', '', $html, 1 ); // 1個目の loading="lazy" を強制的に消す return $html; } }, 10, 2 );実行条件は
get_the_ID()やis_page()等で状況に合わせて変更してください。いいねをした人: 居ませんありがとうございます！
なぜ最近の投稿ブロックの画像が最初に実行されるのかモヤモヤが残りますが…
下記のように書いて1枚目画像のloading=lazyを消すことはできました。add_filter( // テンプレートパーツ が template-parts/content/entry/content/content.php のときに実行 'snow_monkey_template_part_render_template-parts/content/entry/content/content', function( $html, $name ) { if ( 'page' === $name || 'front-page' === $name || 'post' === $name ) { // 固定ページ、フロントページ、投稿 のとき $html = preg_replace( '|loading="lazy"|', '', $html, 1 ); // 1個目の loading="lazy" を強制的に消す return $html; } }, 10, 2 );ところで最初のところで themes/snow-monkey/template-parts/content/entry/front-page.php を書き換えたことによる影響はどのようなことが考えられるのでしょうか？
いいねをした人: 居ませんところで最初のところで themes/snow-monkey/template-parts/content/entry/front-page.php を書き換えたことによる影響はどのようなことが考えられるのでしょうか？
the_content()はフィルターフックthe_contentが実行されますが、get_the_content()だと実行されません。現状だとトップページに割り当てられた固定ページの本文は空だけどthe_contentフックで追加されたコンテンツがある場合でも正しく条件分岐されます（lazyのことではなくてあくまでもともとの条件分岐で出力される HTML の意味）が、get_the_content()に変更するとその条件はスルーされてしまうことになります。なので実際に変更をいれるときはもうちょっと調整する必要があります。もうちょっと調整してみて次のアップデートに組み込みたいと思います。
いいねをした人: 居ません
- トピック「ファーストビューの画像の「loading=”lazy”」を外したい」には新しい返信をつけることはできません。