サイト内検索
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
2018年12月18日 07:20
はじめまして。11月初めからCocoonを利用させていただいております。欲しかった機能が充実していて使いやすく大変気に入っています。ありがとうございます。
先日実装されたLazy Loadですが、早速利用して速度も向上して喜んでいたのですが、たまたま普段使っているiPhone6sを修理に出すことになり、iPhone5の画面で自分のブログを確認してみたら、画像の部分だけ表示されないことに気づきました。
iosは10.3.3というiphone5では最新のバージョンです。PCではもちろん問題ありませんし、嫁のiPhone6s plusでも画像に問題ありません。
Lazy Load機能のオン・オフで明らかに画像の不表示・表示が切り替わるのでLazy Load機能が原因のようです。現在オフにしております。
同じ環境でテストできるようでしたら検証お願いできますでしょうか。
よろしくお願いいたします。
----------------------------------------------
サイト名:院長コラム|あおぞら動物病院|船橋市の動物病院
サイトURL: https://xn--hhrx3xt0jt8h4kenrxmi6a.com/zakkan
ホームURL: https://xn--hhrx3xt0jt8h4kenrxmi6a.com/zakkan
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-child-master
使用スキンURL:
Wordpressバージョン:4.9.9
PHPバージョン:7.2.10
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
エンコーディング:gzip, deflate, br
言語:ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名:Cocoon
バージョン:1.4.7
カテゴリ数:7
タグ数:0
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:0.0.5
----------------------------------------------
利用中のプラグイン:
001 Prime Strategy Translate Accelerator 1.1.1
Akismet Anti-Spam 4.1
BackWPup 3.6.6
EWWW Image Optimizer 4.5.3
iframe 4.3
TinyMCE Advanced 4.8.0
WP Fastest Cache 0.8.8.8
WP Multibyte Patch 2.8.2
----------------------------------------------
Topic starter
2018年12月18日 08:28
追伸ですが、手持ちのiPhone4 の最新iosバージョン7.1.2でも同様に画像表示がされませんでした。
2018年12月18日 11:56
<追伸>
自サイトでも「Lazy Loadを有効にする」にして確認しましたが、画像は全部表示されています。
やはり、iPhoneのiosのバージョンに関係があるのではないでしょうか?
わいひら reacted
2018年12月18日 12:54
うわー、これは悲しいですねぇ。せっかくの可愛い動物さんたちが、、、。
5と5sだと違うんですねぇ。
わたしはPCもiMacなので、iPhone ios 12.0 に上げる際、互換性の関係で渋々MacもMojaveにアップしました。それ以前のiMacは型番が古くて、Safariのサポート切れでどんどん開かないWEBページが増えて、iMacを買い換えました。
iPhoneやスマホもブラウザのサポートが切れた古い機種は切り捨てられる運命かもと思います。
逆に言えば、aozoraahさんの検証によれば、「Lazy Loadを有効にする」をオフにすれば、古い機種のスマホの人にも画像が表示されるという情報は貴重だと思いました。
検証ありがとうございました。
わいひら reacted
2018年12月18日 14:43
OS が古いのが原因だと思います。(ブラウザのバージョンも関係あるかもしれません。)
試しに、下記のコードを子テーマの functions.php に追加されると、どうなるでしょうか。
function wp_enqueue_lazy_load() { if ( is_lazy_load_enable() && ! is_login_page() ) { wp_enqueue_script( 'polyfill-js', '//polyfill.io/v2/polyfill.min.js?features=IntersectionObserver', array(), '3.25.1', true ); wp_enqueue_script( 'lazy-load-js', get_template_directory_uri() . '/plugins/lozad.js-master/dist/lozad.min.js', array( 'polyfill-js' ), false, true ); $data = 'const observer = lozad();observer.observe();'; wp_add_inline_script( 'lazy-load-js', $data, 'after' ) ; } }
Topic starter
2018年12月18日 15:39
Akiraさま
お返事ありがとうございます。
ご指示通り設定してみたのですがうまく表示されませんでした。
ブラウザはgoogle chrome とSafariのどちらもうまくいかないようです。
現在、あえて問題のサイトをLazy load有効にしております。
https://xn--hhrx3xt0jt8h4kenrxmi6a.com/zakkan/
どなたか表示がうまくいかない方がおりましたらご意見いただけますでしょうか。
2018年12月18日 16:40
aozoraahさんのサイト『Lazy load有効』でも、iPhone 5s ではキレイに画像が表示されます。
やはり、現象の原因は iPhone のブラウザ(Safari等)のバージョンだと思うのですが、、、。
1つ気になったのは、Cocoonは1.4.7にしておられて、WordPress 4.9.9 という点です。
Cocoon 1.4.7 は、WordPress 5.0 以上のメジャーアップデートに合わせた仕様だと思うので、今後別の不具合が発生する可能性もあるかも、、、と思いました。
実際、うっかり先に Cocoon を更新してから、WordPress 5.0.1 に更新したものは、一瞬バグりました。(ブラウザ:Mac Safari の再起動で直りました。)
わいひら reacted
2018年12月18日 17:38
うーむ…。
では、こちらのコードを子テーマの functions.php に追加されると、どうなるでしょうか。
すでに削除されているようですが、先程のコードを必ず削除後に追加なさってください。
function wp_enqueue_lazy_load() { if ( is_lazy_load_enable() && ! is_login_page() ) { wp_enqueue_script( 'polyfill-js', '//polyfill.io/v2/polyfill.min.js?features=IntersectionObserver', array(), '3.25.1', true ); wp_enqueue_script( 'lazy-load-js', get_template_directory_uri() . '/plugins/lozad.js-master/dist/lozad.min.js', array( 'polyfill-js' ), false, true ); $data = 'var observer = lozad();observer.observe();'; wp_add_inline_script( 'lazy-load-js', $data, 'after' ); } }
WP Fastest Cache をお使いですので、プラグインのキャッシュ、それとブラウザのキャッシュの削除が必要かもしれません。
TM_BB reacted
2018年12月18日 20:45
Lazy Loadで利用している、IntersectionObserverの対応状況が元々こんな感じですから、やっぱAkiraさんが書かれているように、怪しいのはPolyfillになりますよね。
https://caniuse.com/#feat=intersectionobserver
とりあえず、Akiraさんが書かれたことの結果待ち。
TM_BB reacted
Topic starter
2018年12月19日 07:18
いろいろとアドバイスしていただきありがとうございます。やはり画像が表示されませんでした。キャッシュのクリアは毎回手動で行っております。
コードの追加の方は、このようになるのですが間違っていませんでしょうか?
functions.phpを開くとこのような状態です。以下↓
--------------------------------------------------------------------------------
<?php //子テーマ用関数
//子テーマ用のビジュアルエディタースタイルを適用
add_editor_style();
//以下に子テーマ用の関数を書く
function wp_enqueue_lazy_load() {
if ( is_lazy_load_enable() && ! is_login_page() ) {
wp_enqueue_script( 'polyfill-js', '//polyfill.io/v2/polyfill.min.js?features=IntersectionObserver', array(), '3.25.1', true );
wp_enqueue_script( 'lazy-load-js', get_template_directory_uri() . '/plugins/lozad.js-master/dist/lozad.min.js', array( 'polyfill-js' ), false, true );
$data = 'var observer = lozad();observer.observe();';
wp_add_inline_script( 'lazy-load-js', $data, 'after' );
}
}
2018年12月19日 10:07
MixHostですよね。プラグインのキャッシュも削除済み。ブラウザ例えばFireFoxのアプリを入れて更新後みても同じですよね?
https://wp-cocoon.com/unregister-sidebar/
ここの画像を見ても同じ状況で、表示されませんか?
とりあえずサーバー更新をされる気があれば、支払いを済ませて様子を見るとどうなりますか?
2018年12月19日 10:26
サーバーではなく、ドメインでした。そこも念のためご確認くださいね。
Topic starter
2018年12月19日 10:49
FireFoxでもダメでした。リンク先のページの画像も表示されません。
ブラウザとしてはこれでgoogle chrome、Safari、FireFoxでダメでした。古いiosのせいなんでしょうね。
サーバーはさくらインターネットです。
ドメインの更新とはどんな意味でしょうか。あまり詳しくなくて・・・すみません。
TM_BB reacted
2018年12月19日 10:50
こんにちは。
僕のテスト環境ですが、Laxy loadを試したところ
iPhone5(iOS10.2)で問題なく表示されています。
Akiraさんのコードは入れていない状態です。
Wordpress4.98でも問題なかったです。
サーバは、Xサーバーで親テーマのみです。
ということは、サーバーかプラグイン、子テーマなどで問題が起きてるっぽいですね。
----------------------------------------------
※テスト環境にてURLは伏せています。
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-master
使用スキンURL:
Wordpressバージョン:5.0.1
PHPバージョン:7.1.18
ブラウザ:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
言語:ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名:Cocoon
バージョン:1.4.7
カテゴリ数:17
タグ数:21
ユーザー数:2
----------------------------------------------
利用中のプラグイン:
All In One SEO Pack 2.10.1
Contact Form 7 5.1.1
Google XML Sitemaps 4.1.0
Redirection 3.6.3
Simple 301 Redirects 1.07
Table of Contents Plus 1601
WordPress Importer 0.6.4
Yoast SEO 9.3
----------------------------------------------
2018年12月19日 11:59
コードの追加方法は正しいです。
最後に、こちらのコードを試していただけないでしょうか。私が iPhone を持っておらず、手元で確認できないので大変お手数をおかけします。
function wp_enqueue_lazy_load() { if ( is_lazy_load_enable() && ! is_login_page() ) { wp_enqueue_script( 'polyfill-js', 'https://cdn.polyfill.io/v2/polyfill.min.js?features=IntersectionObserver', array(), '3.25.1', true ); wp_enqueue_script( 'lazy-load-js', get_template_directory_uri() . '/plugins/lozad.js-master/dist/lozad.min.js', array( 'polyfill-js' ), false, true ); $data = 'var observer = lozad();observer.observe();'; wp_add_inline_script( 'lazy-load-js', $data, 'after' ); } }
読み込もうとしている Polyfill(JavaScript が動かないブラウザでも動くようにする JavaScript)を使ったことがなくて、いまいち読み込み方法が分からない…。
ちなみに、Polyfill.io のものを読み込もうとしています。
Cocoon は別の Polyfill を読み込んで、Lazy Load がどのブラウザでも動くようにしています。ただ、その Polyfill では、iOS 10 以前のバージョンに対応できないと私は予想しています。
Topic starter
2018年12月19日 12:21
>たなかま様
プラグイン全て停止してチェックしてみたのですが、当方の環境ではダメでした。
>Akira様
せっかくのコードでしたが、申し訳ありません。うまく表示されませんでした。
iPhone5s移行のiosでは問題ないようなので、諦めてしまうか迷っています。解決にたどりつけなくて申し訳ありません。
TM_BB reacted
2018年12月19日 12:24
フォーラムを開いたままにしていたので、たなかまさんのコメントを読んでいませんでした。
Cocoon 設定 → 高速化の「JavaScriptを縮小化する」も原因の可能性がありますね。
「JavaScriptを縮小化する」に、縮小化を除外するファイルを入力する欄があります。
子テーマの functions.php に追加されたコードを削除後に、この入力欄に下記のようにお書きになると、どうなるでしょうか。
/wp-content/themes/cocoon-master/plugins/polyfill/intersection-observer.js
2018年12月19日 12:36
「JavaScriptを縮小化する」にチェックしたら、不具合が再現できました。
さ、さすがです!
intersection-observer.jsを縮小化から除外しましたが、こちらは不具合が起きたままになりますね。
TM_BB reacted
Topic starter
2018年12月19日 12:53
>Akira様
解決しました!!!!!!!
諦めかけていましたが無事表示されました。
特殊な環境のささいな問題にこれほど助けていただけたことに感謝感激です。
本当にありがとうございました。
TM_BB reacted
Topic starter
2018年12月19日 13:01
すみません。喜びのあまり確認しないで投稿してしまいました。
高速化の「JavaScriptを縮小化する」にチェックを外すと画像が表示されますが、縮小化除外の欄にコードを入力してもうまくいきませんでした。
TM_BB reacted
2018年12月19日 18:03
本題は核心に近づいてきましたね!
***********
サーバーはさくらインターネットです。
ドメインの更新とはどんな意味でしょうか。
こちらまったく別のサイトをみたのかもしれません。
今確認したらサーバーもsakuraと確認できますし、ドメイン『船橋市動物病院.com(xn--hhrx3xt0jt8h4kenrxmi6a.com)』の更新情報も全く問題ありませんです。※画像どころか全部表示されない状況になるかと思ったけど、違ってました。
わいひら reacted
2018年12月19日 18:19
ということは、除外するべきは、こっちのファイルかもしれません。
/wp-content/themes/cocoon-master/plugins/lozad.js-master/dist/lozad.min.js
もしくは、先程の intersection-observer.js ファイルと、今回の lozad.min.js ファイルのどちらも、除外しないといけないかもしれません。
除外する入力欄に 2 つ以上のファイルを追加する場合には、1 行に 1 つのファイルを指定します(1 つファイルを追加後に Enter で改行し、次のファイルを追加)。
ただ、もしこれで画像が表示されたとしても、ちょっと問題あり。というのも、JavaScript ファイルがレンダリングをブロックしてしまうので、サイトスピードが遅くなります。
それだったら、Lazy Load を無効にしたほうが、サイトスピードの面では優れていると思います。
iOS 10 以前を切り捨てるのも選択肢の 1 つです。下記のページによると、iOS 10 以前のバージョンのシェアは、全部合わせても約 7% ほどらしいです。
わいひら reacted
2018年12月19日 20:40
縮小化が原因だとしたら、ライブラリーが原因の可能性もありますね。
親テーマの、lib/php-html-css-js-minifier.phpファイルの中身をすべて以下と、置き換えるともしかしたら、縮小化したままでも解決する可能性もあるかもしれません。
https://gist.github.com/tovic/d7b310dea3b33e4732c0#file-php-html-css-js-minifier-php
2018年12月19日 22:22
お疲れさまです!
Akiraさんのjs除外(2パターンとも)と、わいひらさんのphpファイルの差し替えを試してみましたが、どちらもjsの縮小化で画像は表示されませんでした。
難しいですね・・・。
わいひら reacted
2018年12月19日 22:31
動作確認ありがとうございます。
一応、原因切り分けのためJavaScriptプラグインフォルダ全てを除外するため以下のように、JavaScript除外設定に入力するとどうでしょう?
/plugins/
Topic starter
2018年12月19日 22:42
>わいひらさん
すみません。変わりませんでした。
2018年12月20日 13:03
わいひらさんがご提示された JavaScript プラグインフォルダ全てを除外した時に、「トップへ戻る」ボタンは表示されるでしょうか(スクロールするとページ右下に出てくる上矢印のボタン)。
表示されないなら、User Timing API が怪しいです。
わいひら reacted
2018年12月20日 14:23
Akiraさん、お疲れさまです。
わいひらさんがご提示された JavaScript プラグインフォルダ全てを除外した時に、「トップへ戻る」ボタンは表示されるでしょうか(スクロールするとページ右下に出てくる上矢印のボタン)。
こちらトップへ戻るのボタンは表示されていませんでした。
iPhone7(iOS12)だと表示されています。
よろしくお願いいたします。
わいひら reacted
Topic starter
2018年12月20日 14:37
私のiPhone5ではもともとトップへ戻るボタンが表示されないのですが。
ブラウザはgoogle chromeとSafariで同じです。
2018年12月20日 15:55
子テーマの tmp / head-insert.php に、下記の 2 つのコードのどちらを追加されるとどうなるでしょうか。
ただし、同時にコードを追加すると、意図した動作にならないかもしれません。1 つずつ追加しご確認いただけると、大変助かります。
コードは、どちらも notepad.pw に貼り付けています。
コードその 1
https://notepad.pw/share/2291ct63r
コードその 2
Topic starter
2018年12月20日 16:30
コードその2を貼り付けたらiphone5でも画像表示されました!
2018年12月20日 17:08
私の方でもコード2で表示されました。
(コード1だと不可でした)
2018年12月20日 18:29
何度も面倒なご確認をしていただき、ありがとうございました。
「JavaScriptを縮小化する」の有効時に使われる User Timing API が原因でした(performance.mark とか performance.measure とかのやつで、JavaScript のパフォーマンスを計測するもの)。
新しい PageSpeed Insights が User Timing API を使えと言ってくるので、わいひらさんがいち早く対応された記憶があります。
ただ、iOS は 11 からしか対応していないみたいです。
can i use... : User Timing API
なので、Google の Tools for Web Developers がすすめる記事が紹介している Polyfill の user-timing.js を試していただきました。この Polyfill が、コードその 2 です。
2018年12月20日 23:01
まさか、User Timing APIが原因だったとは…。思いつきもしませんでした。
一応、Akiraさんの書き込まれた情報を元に、修正してみました。
https://github.com/yhira/cocoon/archive/master.zip
よろしければ、試してみていただければ幸いです。
当サイトにも適用してあります。
Topic starter
2018年12月21日 07:20
皆様、ありがとうございました。
たまたま普段使っているiPhoneを修理に出すことになり発見したトラブルでしたが、ここまで皆様のお力を借りることになるとは思っておりませんでした。
そして、まさかこんなに短期間で解決していただけるとは思いませんでした。
iPhone5、iPhone4とほとんど使われなくなったスマホですが、これで画像が見れないユーザーがいなくなったと思うとすっきりした気持ちになりました。
今後も何か助けていただくこともあると思いますが、どうぞよろしくお願いいたします。
こちらをもって「解決」とさせていただきます。
本当にありがとうございました。
2018年12月21日 22:35
おふた方、動作確認ありがとうございます。
aozoraahさんがご報告してくれたおかげで、気づかない不具合を修正できることができました。
こちらこそありがたいです。
またAkiraさんには、問題点をズバッと見抜かれた上に、修正方法まで教えていただき、感謝申し上げます。僕だと、多分そこまでの考えに至らなかったです。
発火ポイントが変わって、さらに自然になりましたね!
こちらも、自分以外の意見を聞きたいところだったので、ありがとうございます。
現在の発火ポイントの方がよさそうな感じですね。
TM_BB reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。
(CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。