サイト内検索
Cocoonフォーラム
![](https://wp-cocoon.com/wp-content/themes/cocoon-master/screenshot.jpg)
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL:
相談内容:
不具合の発生手順:
解決のために試したこと:
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え(FAQ)
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw)
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2023年5月31日 11:29
lozad.jsを実装しようとしたのですが、知識がないまま調べて見よう見まねでやってみた結果うまくいきません。
調べると、実装する方法としてダウンロードやCDNを読み込むなどとありました。
とりあえずGitHubからzipファイルをダウンロードしました(添付ファイルの「Download ZIP」から)が、展開後のフォルダ内にたくさんのファイルがあり、どれをサーバーにアップして良いかわからず一旦断念し、「CDNを読み込む」という方法を試しました。
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>
こちらをテーマエディターで追記したのですがうまくいかず、何度か試すうちにサイト自体がおかしくなってしまったのでバックアップでサイトを編集前の状態に戻しました。
質問の仕方が正しいかも判断できない知識量で大変恐縮なのですが、ダウンロードしたファイルを直接使う方法及びCDN読み込みの方法について教えていただけないでしょうか。
This topic was modified 1年前 by papi
2023年5月31日 12:33
lozad.jsで何を実現したいのでしょうか?
もし、Lazy loading(画像の遅延読み込み)が目的であるのなら、
lozad.jsは不要です。(WordPress5.5~辺りから)
WordPressの機能として備わっています。
また、
Cocoonの高速化設定から、これ以外の遅延読み込みのサポートもしています。
This post was modified 1年前 2回 by Yamachan11
わいひら reacted
Topic starter
2023年5月31日 12:49
videoタグのmp4を遅延読み込みさせたいためです。
遅延読み込みさせたい理由は、動画を載せているページへの初回アクセス時にvideoタグ部分の表示が添付の画像のようになってしまうという現象が発生しているためです。
初回アクセス時は画像のようになりますが、リロードされると正しく表示されるので、HTML自体の記述が間違っているわけではなく、動画データがキャッシュされさえすれば表示されるという状態だと想定しています。(ここも知識不足であまり分かっていませんが..)
これまでに、キャッシュ系のプラグインを試したり、cloudflareの利用などを試しましたが効果がなく、ページの読み込み後に動画ファイルが読み込まれるようにすれば良いのではと考え遅延読み込みを実装してみたい、というのが背景です。
遅延読み込みの方法としてlozad.jsを検討するに至ったのは、これまでに
・videoタグにposter属性で画像を設定し読み込み完了するまで表示する内容を指定する
・posterと同じような考えで動画ソース後に#t=0.1と記述してみる
・preload属性を追加して遅延読み込みさせる
・遅延読み込みプラグイン「a3 lazy load」利用
など試したのですがいずれも効果がなかったためです。
This post was modified 1年前 by papi
2023年5月31日 12:58
Lozad.js であれば、Cocoon 親テーマに同梱されています。
cocoon/plugins/lozad.js-master
Cocoon 設定 > 高速化 の「Lazy Loadを有効にする」が無効の場合は、lib/utils.php をご参考に読み込めば使えます。コードは子テーマの functions.php に追加します。
add_filter( 'wp_enqueue_scripts', function() { wp_enqueue_script( 'my-lazy-load-js', get_template_directory_uri() . '/plugins/lozad.js-master/dist/lozad.min.js', [], false, true ); $data = 'const observer = lozad(".lozad", {rootMargin: "0px 500px 500px"});observer.observe();'; wp_add_inline_script( 'my-lazy-load-js', $data, 'after' ); });
もし、ご自身でダウンロードしたものをお使いになる場合は、dist に入っているどれかを使います。
- lozad.es.js : ES Modules で書かれたものです。
- lozad.js : CommonJS で書かれたものです。
- lozad.min.js : lozad.js を縮小したものです。
どれを選べばいいのか分からない場合は、最後の lozad.min.js をお選びになるといいと思います。
もし、CDN を利用される場合は、子テーマの tmp-user/head-insert.php にでも <script> をお書きになればいいと思います。ただ、CDN の利用はおすすめしません。
This post was modified 1年前 2回 by Akira
わいひら reacted
Topic starter
2023年5月31日 14:07
Akiraさん
丁寧にご説明くださりありがとうございます。
>Lozad.js であれば、Cocoon 親テーマに同梱されています。
ということはCocoon 設定 > 高速化 の「Lazy Loadを有効にする」にチェックが入っていればlozad.js実装に等しい状態になっているということでしょうか。
もしそうなのであれば、そこもすでに試しているのでおっしゃる通り遅延読み込みは関係ないのかもしれません。
動画ファイルのサイズ等が関係する可能性もあるのでしょうか。
サーバーサイドに疎くわからないのですが、ファイルサイズが大きかったら読み込みに時間がかかることはあっても正しく読み込めないことはないように思うんですがそういうわけでもないんでしょうか。
動画はメディアとしてサーバーにアップロードしているものではなく、Twitterに投稿した動画をmp4化しているものです。
Twitterの埋め込み等を入れると表示スピードに悪影響が出ることは理解していますが、今起きている現象の原因になり得るんでしょうか。
同じようにTwitterに投稿された動画をmp4形式でサイトに載せているサイトをいくつか見つけてソースを見たりしているのですが大きな違いは発見できず、試す方法として思いついていたもので最後に残っていた(実装できず試すことができていなかった)のがJavascriptによる遅延読み込みでした。
2023年5月31日 15:17
@papi さん
ということはCocoon 設定 > 高速化 の「Lazy Loadを有効にする」にチェックが入っていればlozad.js実装に等しい状態になっているということでしょうか。
Cocoon の遅延読み込みは、<img> と <iframe> が対象です。<video> は遅延読み込みされません。そのため、Example with video のように <video> を変更する必要があります。
---
実際に拝見しないと何とも言えません。その動画があるページの URL のご提示は難しいでしょうか。同じ症状が出るテスト環境でも構いません。
わいひら reacted
Topic starter
2023年5月31日 15:44
@Akira さん
>Cocoon の遅延読み込みは、<img> と <iframe> が対象です。
そうなんですね。教えていただいてありがとうございます。
今出先ですぐに試せないのですが、videoの遅延読み込みは試してみようと思います。
>実際に拝見しないと何とも言えません。
そうですよね。対象ページ自体の共有は難しいのでテスト環境を作って確認していただきたいです。
こちらもすぐに準備ができないので、もしお時間やタイミングが合った時に見て頂ければと思います。
すぐに対応できず申し訳ありません。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。
(CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。