Cocoonフォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

不具合の発生手順:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法
  7. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

CocoonのLazy Loadに関す...
 
共有:
通知
すべてクリア

[解決済] CocoonのLazy Loadに関する不具合

12 投稿
2 ユーザー
6 Reactions
1,675 表示
ろこ
(@lococo)
Prominent Member Registered
結合: 7年前
投稿: 830
Topic starter  

管理画面内までは確認していなかったのですが、minify-html.phpにある#L351#L367に問題があり、管理画面内でコメントのアバターや記事一覧のサムネイルが表示されません。

関数get_the_post_thumbnailやget_avatarはWordPress標準のLazy Loadに対応しているので、重複してしまっていると思います。


   
taichi reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17220
 

よろしければ、管理画面のどの部分かスクリーンショットをいただけますか。


   
ろこ
(@lococo)
Prominent Member Registered
結合: 7年前
投稿: 830
Topic starter  

どの部分というよりは、管理画面内全体で関数get_the_post_thumbnailやget_avatarが用いられているところです。

サムネイルなら、

  • 投稿一覧のアイキャッチ
  • 固定ページ一覧のアイキャッチ
  • Cocoon設定

など、アバターなら、

  • ユーザー一覧のユーザー名
  • ダッシュボードのアクティビティ

などが当てはまります。

 

コードを見てもらえれば分かりますが、それぞれのフックがある関数ではWordPress5.5のLazy Loadに対応しています。


   
わいひら and taichi reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17220
 

詳細ありがとうございます。
管理画面内といっても、範囲が広くて違う部分ばかり見ていました。テスト投稿はアイキャッチを設定してななくて。
管理画面では、Lazy Loadしないように修正しておきました。
アバターは、よく見たら公開ページでも正常に動作していなかったのでとりあえずコメントアウトしました。


   
ろこ
(@lococo)
Prominent Member Registered
結合: 7年前
投稿: 830
Topic starter  

確認しました。

 

管理画面内の不具合は解消されましたが、WordPress5.5とCocoonそれぞれのLazy Loadについて、対応範囲の切り分けがよく分かっていないので教えていただけないでしょうか。

 

両方のLazy Loadを有効化した場合、

  • コンテンツ内画像(wp_filter_content_tagsを通している箇所)
    • WordPress5.5=対応している
    • Cocoon=対応していない
  • サムネイル画像(get_the_post_thumbnail)
    • WordPress5.5=対応している
    • Cocoon=一部を除き対応している
  • その他の画像(Cocoon独自の画像出力)
    • WordPress5.5=対応していない
    • Cocoon=一部を除き対応している

get_avatarはCocoonのLazy Loadだと正しく動作しないとのことなので、WordPress5.5のみが対応している点は分かりましたが、例えば

  • コンテンツ内画像はWordPress5.5側に合わせているのに対し、サムネイル画像は一部を除いて重複している。
  • get_the_post_thumbnailを用いてサムネイル画像を出力している機能とget_the_post_thumbnailを用いずにサムネイル画像を出力している機能がある。

など、一貫性がないように思います。


   
わいひら reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17220
 

ありがとうございます。

既に、WordPress標準のLazy Loadが入っているかを判別して、除外してみたんですが、これだと何らかの問題があったりしますかね。
https://github.com/yhira/cocoon/commit/b06bfacd728b3be1e89479a29a1a14049b4d746d

get_the_post_thumbnailを用いてサムネイル画像を出力している機能とget_the_post_thumbnailを用いずにサムネイル画像を出力している機能がある。

すいません。よろしければ、1つだけで良いので該当部分を教えていただければ幸いです。


   
ろこ
(@lococo)
Prominent Member Registered
結合: 7年前
投稿: 830
Topic starter  

既に、WordPress標準のLazy Loadが入っているかを判別して、除外してみたんですが、これだと何らかの問題があったりしますかね。

minify-html.php#L355かつminify-html.php#L362を満たす、つまりWordPress5.5でloading="lazy"がないパターンのサムネイル画像がどのような画像なのかがよく分かっていません。

このパターンのサムネイル画像がどの部分か具体的に教えていただけると助かります。

 

また、関数get_the_post_thumbnailは

$attr['loading'] = '';

のように引数$attrを指定することによって、個別のサムネイル画像でLazy Loadを無効にできるようになっていると思うので、強制的にCocoonのLazy Load機能に当てはめてしまうのはあまり良い実装でないように思います。

 

よろしければ、1つだけで良いので該当部分を教えていただければ幸いです。

例えば、

https://wp-cocoon.com/community/postid/38161/

で対応していない項目として挙げた機能になります。

Cocoonテーマに同梱されている画像は別ですが、WordPressにアップロードされた画像を出力している箇所について、get_the_post_thumbnailなどWordPressにあるLazy Load対応の関数で画像タグを取得しないのは何か別の問題があったりするのでしょうか?


   
わいひら reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17220
 
投稿者:: @lococo

Cocoonテーマに同梱されている画像は別ですが、WordPressにアップロードされた画像を出力している箇所について、get_the_post_thumbnailなどWordPressにあるLazy Load対応の関数で画像タグを取得しないのは何か別の問題があったりするのでしょうか?

おそらく、おすすめ・ナビカードは、カテゴリー等のアイキャッチを含むため当時はそのようにしたんだと思います。
あと、以下のようなメニュー情報から直接画像情報が取得できたからそのまま使ったのかなと。
https://github.com/yhira/cocoon/blob/0e0818736d94923856f78f32fa4aa3c030efce7a/lib/shortcodes.php#L553
今回のLazy Loadとかのことがない以前は、そこまでは考えてませんでした。


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17220
 
投稿者:: @lococo

このパターンのサムネイル画像がどの部分か具体的に教えていただけると助かります。

自分で、画像タグを全部出力して確認してみたところ、loading="lazy"がないパターンは、Cocoonテーマオリジナルの画像(NO IMAGE等)を利用したものしかありませんでした。
なので、そういったものだけにCocoonのLazy Loadを適用するように変更しておきます。
あと、おすすめ・ナビカードの投稿はget_the_post_thumbnailを使用するようにも変更しておきました。


   
ろこ
(@lococo)
Prominent Member Registered
結合: 7年前
投稿: 830
Topic starter  

確認しました。

修正ありがとうございます。

 

カテゴリー等のアイキャッチを含むため

画像自体はWordPressのメディアフォルダにアップロードされ、attachmentデータが付与されているので、投稿/固定ページのアイキャッチ画像などと同様に設定した画像のIDベースで保存・管理されているものと思っておりました。

一応、関数attachment_url_to_postidなどを用いればURL⇒IDに変換できるので、関数wp_get_attachment_imageで画像タグを取得できますが、URLでの設定は可変であることを考えると別の不具合が生じそうですね。

 

画像タグを全部出力して確認してみたところ、loading="lazy"がないパターンは、Cocoonテーマオリジナルの画像(NO IMAGE等)を利用したものしかありませんでした。

やはりそうだったのですね。

コードを読んだ限りでは引数またはフックで操作する以外にloading="lazy"を指定しないパターンが見当たらなかったので、私が見落としている箇所がどこかにあるのではと思い、質問しました。

 


 

最終的にCocoonのLazy Loadを廃止する際には、関数get_original_image_tagの画像タグに対して関数wp_lazy_loading_enabledでloading="lazy"の指定を判定すれば、WordPressの仕様に則ることができるのを補足として書き込んでおきます。


   
わいひら reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17220
 

ご確認ありがとうございます。

画像自体はWordPressのメディアフォルダにアップロードされ、attachmentデータが付与されているので、投稿/固定ページのアイキャッチ画像などと同様に設定した画像のIDベースで保存・管理されているものと思っておりました。

作成当時はそこまで深く考えてなかったです ? 

一応、関数attachment_url_to_postidなどを用いればURL⇒IDに変換できるので、関数wp_get_attachment_imageで画像タグを取得できますが、URLでの設定は可変であることを考えると別の不具合が生じそうですね。

一応、URLからIDが取得できるものに関しては、wp_get_attachment_imageで画像タグを出力するものを今かと検討してみようと思います。

コードを読んだ限りでは引数またはフックで操作する以外にloading="lazy"を指定しないパターンが見当たらなかったので、私が見落としている箇所がどこかにあるのではと思い、質問しました。

ロコさんのおっしゃる通りです。僕の確認が甘かったです。

最終的にCocoonのLazy Loadを廃止する際には、関数get_original_image_tagの画像タグに対して関数wp_lazy_loading_enabledでloading="lazy"の指定を判定すれば、WordPressの仕様に則ることができるのを補足として書き込んでおきます。

ありがとうございます。
そのようにしたいと思います。


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17220
 

wp_lazy_loading_enabledはよく知らなかったので、メモも載せておこうと思います。
https://kinsta.com/jp/blog/wordpress-5-5/


   
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

タイトルとURLをコピーしました