サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2020-08-27 14:19
確認しました。
管理画面内の不具合は解消されましたが、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
2020-08-28 20:16
ありがとうございます。
既に、WordPress標準のLazy Loadが入っているかを判別して、除外してみたんですが、これだと何らかの問題があったりしますかね。
https://github.com/yhira/cocoon/commit/b06bfacd728b3be1e89479a29a1a14049b4d746d
get_the_post_thumbnailを用いてサムネイル画像を出力している機能とget_the_post_thumbnailを用いずにサムネイル画像を出力している機能がある。
すいません。よろしければ、1つだけで良いので該当部分を教えていただければ幸いです。
Topic starter
2020-08-28 21:06
既に、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
2020-08-30 19:14
Cocoonテーマに同梱されている画像は別ですが、WordPressにアップロードされた画像を出力している箇所について、get_the_post_thumbnailなどWordPressにあるLazy Load対応の関数で画像タグを取得しないのは何か別の問題があったりするのでしょうか？
おそらく、おすすめ・ナビカードは、カテゴリー等のアイキャッチを含むため当時はそのようにしたんだと思います。
あと、以下のようなメニュー情報から直接画像情報が取得できたからそのまま使ったのかなと。
https://github.com/yhira/cocoon/blob/0e0818736d94923856f78f32fa4aa3c030efce7a/lib/shortcodes.php#L553
今回のLazy Loadとかのことがない以前は、そこまでは考えてませんでした。
Topic starter
2020-08-30 23:01
確認しました。
修正ありがとうございます。
カテゴリー等のアイキャッチを含むため
画像自体は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
2020-08-31 20:41
ご確認ありがとうございます。
画像自体は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の仕様に則ることができるのを補足として書き込んでおきます。
ありがとうございます。
そのようにしたいと思います。
2020-08-31 20:53
wp_lazy_loading_enabledはよく知らなかったので、メモも載せておこうと思います。
https://kinsta.com/jp/blog/wordpress-5-5/
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。