サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2019-07-09 11:58
いつも、お世話になっております。
昨日Google Search Consoleからエラー発生のメッセージが届き、調べてみたりしたのですが、CSSはじめ知識がほとんどないため解決方法がわかりません。
ご教示いただければうれしいです。
■エラー内容
AMPの新たな問題が 4 件検出されました。
(1)「amp-animation」で必要なタグ「amp-animation extension .json script」がないか、正しくありません。
(2)タグ「style[amp-keyframes]」の親タグは「body」である必要があります。
(3)タグ「amp-animation」に、許可されていない子タグがあります。
(4)タグ「amp-animation」の子タグの数が正しくありません。
■サーチコンソールに表示されたエラーページ（4件とも）
https://chiangmai-life.net/money-exchange/?amp=1
■試した対策（過去ログなどを見て）
ちなみにCSSとかはいじっておらず、直近で行ったのはカルーセルに人気記事を表示させたことだけです。
(1)外観→ウィジェット→サイドバーにあるカテゴリを開くとドロップダウン表示にチェックが入っていないか？
→ 入っていない
(2)</div>忘れてないか？
→ 当該エラーページのソースを見ると、
(1)checkbox:checked~.toggle-content{border-color:#fff}.column-wrap>div>*:first-child{margin-top:0}@media (min-width:600px){……
(2){min-width:100%}.fb-like-box .fb_reset{display:none}.fb-like-buttons>div>*{height:100%}@media screen and (max-width:639px)
という箇所があるが、この div> のタグがヘンな気もする
ですが、知識がないため、もしここが問題だったら、どのファイルをどのように修正すればいいのかわかりません。
■サイト情報は以下の通りとなります
----------------------------------------------
サイト名：サワディーチャオ チェンマイ
サイトURL： https://chiangmai-life.net
ホームURL： https://chiangmai-life.net
コンテンツURL：/wp-content
インクルードURL：/wp-includes/
テンプレートURL：/wp-content/themes/cocoon-master
スタイルシートURL：/wp-content/themes/cocoon-child-master
子テーマスタイル：/wp-content/themes/cocoon-child-master/style.css
Wordpressバージョン：5.2.2
PHPバージョン：7.2.17
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
言語：ja-JP,ja;q=0.9,en-US;q=0.8,en;q=0.7,th-TH;q=0.6,th;q=0.5
----------------------------------------------
テーマ名：Cocoon
バージョン：1.8.8.1
カテゴリ数：69
タグ数：45
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：0.0.5
----------------------------------------------
Gutenberg：0
AMP：1
PWA：0
Auto Post Thumbnail：0
ホームイメージ：/wp-content/uploads/2018/10/home_image.jpg
----------------------------------------------
ブラウザキャッシュ有効化：1
HTML縮小化：1
CSS縮小化：1
JavaScript縮小化：1
Lazy Load：0
WEBフォントLazy Load：0
JavaScript（フッター）：1
----------------------------------------------
利用中のプラグイン：
Akismet Anti-Spam 4.1.2
BackWPup 3.6.9
Category Order and Taxonomy Terms Order 1.5.7
Contact Form 7 5.1.3
Disable XML-RPC Pingback 1.2
EWWW Image Optimizer 4.8.1
Google Language Translator 5.0.49
Google XML Sitemaps 4.1.0
Lazy Load 0.6.1
Regenerate Thumbnails 3.1.1
WordPress Ping Optimizer 2.35.1.0.0
WP Multibyte Patch 2.8.2
----------------------------------------------
よろしくお願いいたします。
2019-07-09 16:58
https://search.google.com/test/amp?hl=ja&id=DsTPVpBhjN56Tql4YYst2w
該当ページのAMPページではない正規ページより、AMPテストの結果を貼り付けて頂けたら。上記リンクのような感じ。
わいひら reacted
2019-07-09 19:45
https://chiangmai-life.net/money-exchange/?amp=1
これはもしかしたら、PHPエラーが出ているのかもしれません。
よろしければ以下の方法で、エラーメッセージが出ているか調べていただいてよろしいでしょうか。
https://nelog.jp/edump-wordpress-error-check
Topic starter
2019-07-09 23:54
かうたっくさん、わいひらさん
ありがとうございます。
ご教示いただきました、edumpをインストールしてエラーの出ている画面（ https://chiangmai-life.net/money-exchange/?amp=1 ）をリロード→edumpの出力画面を表示させてみましたが、エラーメッセージは出ませんでした（右下にポップアップ画面が出てphpプログラムとかを調べに行ってる的な表示は出ましたが）。
あとの対策としては、エラーの出ているカテゴリをAMPから除外するくらいでしょうか？？？
2019-07-10 08:06
ってか、そのページを開いても表示されないようですね。
これって、昨夜から表示されてませんでしたか？
https://chiangmai-life.net/money-exchange/?amp=1
- Lazy Load 0.6.1
- と導入したプラグインedump
2点を停止してご確認いただけますか？
もしかしたらCocoon設定・キャッシュ削除からAMPキャッシュの削除を行わないとダメかもです。
****
ちなみにGoogleのキャッシュは今なら表示されてるようです。
https://www.google.com/amp/s/chiangmai-life.net/sk-money-changer/%3famp=1
わいひら reacted
Topic starter
2019-07-10 13:31
かうたっくさん
すみません、ご返信の趣旨がよく理解できていないかもしれません。
＞ってか、そのページを開いても表示されないようですね。
＞これって、昨夜から表示されてませんでしたか？
＞ https://chiangmai-life.net/money-exchange/?amp=1
はい、Google Search Consoleからエラーのメッセージが届いて以降確認している限りでは何も表示されません。
＞Lazy Load 0.6.1と導入したプラグインedump
＞2点を停止してご確認いただけますか？
確認しましたが、はやり表示されないようです。
＞もしかしたらCocoon設定・キャッシュ削除からAMPキャッシュの削除を行わないとダメかもです。
削除しましたが、変化はなくやはり何も表示されません。
2019-07-10 14:57
ご返信の趣旨がよく理解できていないかもしれません。
URLさきを確認してなかったのでedumpを入れてから真っ白になったのかどうか、また真っ白なエラーが出ていると、明記されてなかったので確認しただけです。
エラーがでなければ、基本的な事を行っていただけたらとおもうのですが。
- 親テーマの読み込みがうまくいってない可能性
親テーマをダウンロードして上書きしてみる
- プラグインの停止
- 子テーマのカスタマイズが影響してないかチェックするため親テーマを有効にしてみるなどなど
- Cocoon設定・その他にある『JavaScriptライブラリ設定』の変更
などなど。どこに原因があるか、どこに原因がないか特定していただけますか。
Cocoon設定・キャッシュ削除からAMPキャッシュの削除を行わないとダメかもです。
わいひら reacted
Topic starter
2019-07-10 19:38
かうたっくさん
ありがとうございます。やってみます。
2019-07-10 21:30
私のサイトでも同様にGoogle Search ConsoleからAMPエラーが届くようになりました。エラーが届く前後でやったことはCocoon及びインストール済みのプラグインのアップデートだけです。
AMPページのソースコードを確認すると、bodyタグのすぐ後ろのamp-animationタグが閉じられていないようなのですが、それが問題だったりしますでしょうか？
こちらが私の運用しているサイトです。
https://www.hori-uchi.com/?amp=1
2019-07-10 22:05
かうたっくさんが書かれた、以下は試してみられましたでしょうか？
- （全ての）プラグインの停止
- 子テーマのカスタマイズが影響してないかチェックするため親テーマを有効にしてみるなどなど
- Cocoon設定・その他にある『JavaScriptライブラリ設定』の変更
あとよろしければ、コードを見やすくするために、高速化設定を無効にしていただくことは可能でしょうか。
https://wp-cocoon.com/theme-trouble/
Topic starter
2019-07-10 23:30
わいひらさん、ありがとうございます。
試してみた結果は、以下の通りです。
なお、表示を試行したページは https://chiangmai-life.net/money-exchange/?amp=1 です
＊（全ての）プラグインの停止 → 表示されませんでした
＊親テーマを有効にしてみる → 表示されました（子テーマが問題？）
＊Cocoon設定・その他にある『JavaScriptライブラリ設定』の変更 → 元の設定は「jQuery Core 1.12.4／jQuery Migrate 1.4.1」だったのですが、それ以外の組み合わせにしたらすべて表示されました。
しかも、テストした後で当初の組み合わせに戻したところ、なぜか表示されるようになりました。Ctrl+F5でリフレッシュしても表示されます（したがって、今も表示されています）。
そんなことってあるのでしょうか？？？
それと、ご指示のありました高速化設定は無効にしました。
よろしくお願いいたします。
Topic starter
2019-07-10 23:38
すみません、訂正です。
やはり、元の設定の「jQuery Core 1.12.4／jQuery Migrate 1.4.1」の組み合わせでは、しばらくしたら表示されなくなりました。
2019-07-10 23:57
＊（全ての）プラグインの停止 → 表示されませんでした
プラグインが原因の可能性が低いって事。
＊親テーマを有効にしてみる → 表示されました（子テーマが問題？）
その可能性が極めて高いと思います。js系のカスタマイズが原因かもしれないですね？？
＊Cocoon設定・その他にある『JavaScriptライブラリ設定』の変更 → 元の設定は「jQuery Core 1.12.4／jQuery Migrate 1.4.1」だったのですが、それ以外の組み合わせにしたらすべて表示されました。
これはわからないです。けど、子テーマが原因の可能性がさらに高いかと思われます。
なぜなら。
AMPのキャッシュを『毎回くらい削除』しないと、おそらく正常に表示しないかと思われるからです。たぶんですけどね。
やはり、元の設定の「jQuery Core 1.12.4／jQuery Migrate 1.4.1」の組み合わせでは、しばらくしたら表示されなくなりました。
キャッシュが絡んでるとどこが原因なのか、不明になりがちだと思われます。
Cocoon設定・キャッシュ削除からAMPキャッシュの削除を
変更してはキャッシュ削除。みたいにしないと特定できないかもです。
わいひら reacted
2019-07-11 12:56
わいひらさん、
高速化設定をいじっていたらAMPエラーがなくなりました！
具体的には「JavaScriptを縮小化する」のチェックを外せばOKでした。
ソースコードを読んだわけではないので推測ですが、JavaScriptの縮小化を有効にするとamp-animationの閉じタグがなくなってしまうようなので、JavaScript縮小化の際に正規表現のマッチミスなどの理由でタグが削除されている可能性はないでしょうか？
縮小化についてはHTML、CSSも確認しましたがこちらはチェックしておいてもエラーは出ませんでした。
これで問題は解決しましたが、ご指摘いただいた点を確認した結果も報告いたします。
- （全ての）プラグインの停止
- → 30以上のプラグインを使用しており、停止の影響が測れないので停止できませんでした。
- 子テーマのカスタマイズが影響してないかチェックするため親テーマを有効にしてみるなどなど
- → 親テーマを有効にしたところAMPエラーが無くなりました。
- Cocoon設定・その他にある『JavaScriptライブラリ設定』の変更
- → すべての組み合わせを試しましたがAMPエラーで表示できませんでした。
また、原因特定に活用いただけるかもしれませんので、HTMLの縮小化もしばらく無効にしておきます！
わいひら reacted
Topic starter
2019-07-11 13:08
Cocoon設定・キャッシュ削除からAMPキャッシュの削除を
変更してはキャッシュ削除。みたいにしないと特定できないかもです。
かうたっくさん
ありがとうございます。
「変更しては、キャッシュ削除」やってみます。
2019-07-11 20:24
高速化設定をいじっていたらAMPエラーがなくなりました！
具体的には「JavaScriptを縮小化する」のチェックを外せばOKでした。
解決方法を、ありがとうございます。
ただ、当サイトもJavaScriptの縮小化を行っているのですが、不具合が再現できないんですよね…。
https://wp-cocoon.com/1-8-8/?amp=1
何でだろう…。
とりあえず、原因部分はわかりました。
なので、僕の環境でも不具合が再現出来れば、修正を試みたいと思います。
ちなみに、問題解決前は、全てのページでエラー表示になっていましたか？
それとも、特定のページだけでしたでしょうか。
もしわかれば、原因の切り分けのため教えていただければ幸いです。
Topic starter
2019-07-12 00:32
私も、「JavaScriptを縮小化する」のチェックを外したら、Google Search Consoleから指摘されていたページすべてが表示されるようになりました。
その後、「JavaScriptライブラリ設定」の6つ（3*2）の組み合わせをすべて「変更しては、キャッシュ削除」してみても、ページすべてが表示されました。
わいひら reacted
Topic starter
2019-07-13 13:30
わいひらさん
ありがとうございます。
本日、指摘されていた6ページがGoogle Search Consoleの再審査ですべて合格となりました。
なお、サイトの設定のほうは、引き続き縮小化の設定をすべてオフとしています。
ご報告まで。
わいひら reacted
2019-07-16 15:52
Chrome です。
＜style amp-custom＞タグの上で右クリックをし、「Edit as HTML」を選択したスクリーンショットです。
通常ページの＜style＞タグには BOM はないので、なぜ AMP ページで入るのかは分かりません。
わいひら reacted
2019-07-16 16:27
amp.cssをチェックしたら、bomありで保存したものが配布されてるみたいですよ。
uft-8
style.cssとかはutf-8N bomなしで保存されてるみたいです。
This post was modified 5年前 by かうたっく
2019-07-16 19:36
なるほど。「Edit as HTML」にする必要があったんですね。
僕も同様の画面が確認できました。
amp.cssをBOMなしにしたものをアップしておきました。
------------------------------------------------
https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。
FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------
amp.cssもstyle.cssも同様にSCSSをコンパイルしてできるものなのになんでだろう…。
ファイル作成当初の設定状態を継承しているところなのかな…。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。