サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2020年6月14日 12:34
わいひら様、フォーラムの皆様、お疲れ様です。書き込み制限直前に失礼致します。
Wordpress標準の「メディアを追加」機能でZIPのダウンロードリンクを参照して作り、それをスタイルの囲みボタンを使用して装飾した所、通常のページの表示では上手く行ったんですが、何故かAMPページでは表示が崩れてしまいました。当該のページは、
https://rpgcritic.com/cover035/ で、
不具合のあるAMPページは、
https://rpgcritic.com/cover035/?amp=1
であります。
ちなみに、google AMP テストではエラーは出ませんでした（緑表示）。プラグインも停止して試してみたものの、改善されませんでした。
お忙しい中とは思いますが、どなたか原因をご教授頂ければ幸いです。
Topic starter
2020年6月14日 12:41
自作自演でのリプライすみません。
こちらへの不具合報告用に、事前準備の指示通り、「高速化設定を無効」にした所、なぜだか当方には理由が分からないのですが、表示が改善され、全く問題なく表示されるようになっておりました。というわけで、敢えて「高速化設定を有効」にしたまま、上記のページリンクを表示させておきたいと思います。
初心者故に何となく問題が切り分けられつつあるのに自分で対応できず、申し訳ありません。
Topic starter
2020年6月14日 15:47
何度も自演リプライ申し訳ないっす。ちなみに、敢えて高速化設定を有効、にした後にAMPキャッシュを削除し忘れておりましたので、それを削除し、現在は不具合が出ている状況、を再現できております。
2020年6月14日 19:15
https://rpgcritic.com/cover035/
全く同じ内容で、こちらの環境でテストさせていただければと思うので、よろしければ上記の記事のソースコードを以下の方法でいただくことはできますでしょうか。
https://wp-cocoon.com/notepad-pw/
2020年6月16日 19:19
僕のテスト環境で同じコンテンツをいれて、AMPページで表示してみた限りでは問題なく表示されているようです。
不具合の再現方法がわからないので、ちょっと以下のトラブルシューティングに書かれていることぐらいしか僕にもわからないかもしれません。
https://wp-cocoon.com/faq-css-trouble/
よろしければ「全てのプラグインを停止した状態」で動作確認をしていただけますでしょうか。
それでも改善しない場合は、それに加えて「親テーマのみを有効にした状態」にしても動作確認いただければと思います。
あと、よろしければ環境情報もいただいてよろしいでしょうか。
https://wp-cocoon.com/theme-report/
endou reacted
Topic starter
2020年6月18日 04:30
わいひらさん、ご対応ありがとうございます。
その後ご指摘の点を幾つか試してみたんですが、プラグイン全停止ではやはり改善されず、一方、子テーマから親テーマへの変更で症状が改善されました。
以上のような理由から、私の子テーマ上の設定に今回の不具合の原因がある、ことがはっきり致しました。
しかしながら、その後、自力で症状を改善しようと模索してみたものの、問題点の特定にまでは至りませんでした（ちなみに、CSSはカルーセル表示に関する行を追加していたんですが、それを削除して子テーマデフォルトの状態に戻したものの、効果はありませんでした）。
あと、本来初めに提示するべきソ－スコードと環境情報が後付になってしまって申し訳ありません。環境情報は以下です。
----------------------------------------------
サイト名：ポリアモルフィズム
サイトURL： https://rpgcritic.com
ホームURL： https://rpgcritic.com
コンテンツ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.4.2
PHPバージョン：7.3.18
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:77.0) Gecko/20100101 Firefox/77.0
サーバーソフト：LiteSpeed
サーバープロトコル：HTTP/1.1
エンコーディング：gzip, deflate, br
言語：ja,en-US;q=0.7,en;q=0.3
----------------------------------------------
テーマ名：Cocoon
バージョン：2.1.8
カテゴリ数：24
タグ数：0
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：0.0.5
style.cssサイズ：828バイト
functions.phpサイズ：169バイト
----------------------------------------------
Gutenberg：0
AMP：1
PWA：0
Font Awesome：4
Auto Post Thumbnail：0
Retina：0
ホームイメージ：/wp-content/uploads/2019/08/frautal044-17.jpg
----------------------------------------------
ブラウザキャッシュ有効化：1
HTML縮小化：1
CSS縮小化：1
JavaScript縮小化：1
Lazy Load：0
WEBフォントLazy Load：0
----------------------------------------------
利用中のプラグイン：
Akismet Anti-Spam 4.1.6
Contact Form 7 5.1.9
Easy Table of Contents 2.0.11
Google XML Sitemaps 4.1.0
iThemes Security 7.7.1
WebSub/PubSubHubbub 3.0.3
WordPress Ping Optimizer 2.35.1.2.2
WP Multibyte Patch 2.8.4
----------------------------------------------
2020年6月18日 12:22
HTML 縮小化と CSS 縮小化の無効化は可能でしょうか？
通常ページも何か変です。
https://validator.w3.org/nu/?doc=https%3A%2F%2Frpgcritic.com%2Fcover035%2F
※ Stray end tag head. などが出ている。
Topic starter
2020年6月18日 12:28
Akiraさん、返信ありがとうございます。
一旦、高速化設定を無効化しました。もしご検証頂ければ幸いです。
2020年6月18日 14:23
おそらく原因は BOM（Unicode のデータ） です。BOM を削除すれば、解決できるかもしれません。
通常ページでは、</head> タグの直前に BOM があります（赤い点が BOM）。
子テーマの tmp-user/head-insert.php などに BOM があるかもしれません。
※注 1：BOM はコードエディターでなければ確認できないと思います。
※注 2：Windowsの「メモ帳」などを使うと BOM が入ります。
AMP ページでは、<style amp-custom> に BOM があります。
子テーマの style.css か amp.css に BOM があるかもしれません。
外部からは「ここに BOM がある」と正確に指摘するのは難しいです。
This post was modified 4年前 4回 by Akira
2020年6月18日 17:23
Akiraさん、ご検証ありがとうございます。
ご指摘の通り、tmp-user/head-insert.php がBOMになっておりました。ですんで、そこに関しては最新の子テーマの同名ファイルで上書きいたしました。
一方、子テーマの style.css と amp.css は、私の確認した限りでは、BOMアリにはなっていなかったようであります。
で、上記の２つを確認した後、当該のAMPページに付きまして、再度高速化設定を有効化してから表示を確認してみたんですが、やはり表示の崩れは解消されませんでした。
せっかく細部を見て頂いたのにすいません。とはいえ、ひとまずBOMがあること自体に一切気付いていなかったので、不具合を一つ取り除いていただいたことに感謝致します。
いずれにしても、私の子テーマが問題であることには変わりませんので、なんかお騒がせしてしまって申し訳ない、といった感じです。
あと、Akiraさんには以前にもお世話になった記憶があったので、いいねをするためにフォーラムに登録しました。ですんで、なんかスレッドの途中から名前が微妙に変わっているんですが、わたしはこのトピックを立てたEndouです。
2020年6月19日 16:40
Akiraさん、返答が遅れて大変申し訳ありません。ちょっと仕事に出ておりました。前回の自分のコメント時に一言申し添えておくべきでした、重ねてお詫び致します。
HTML と CSS の縮小化、を再度有効に致しました。何度もご苦労おかけしますが、ご検証頂ければ幸いです。
2020年6月19日 19:20
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：0.0.5
style.cssサイズ：828バイト
functions.phpサイズ：169バイト
----------------------------------------------
子テーマ、は何かカスタマイズされているのでしょうか？
みたところ、特に大きなカスタマイズはないように見えます。
カスタマイズしていないのであれば、一度子テーマを削除して再インストールしてみるとどうでしょう。
https://wp-cocoon.com/downloads/
子テーマの再インストールでは、設定は保持されると思いますが、一応念のため設定のバックアップをとっておいたほうがいいかもしれません。
https://wp-cocoon.com/how-to-theme-settings-backup/
endou reacted
2020年6月19日 20:15
わいひらさん、返信ありがとうございます。
おっしゃるとおり、子テーマは全くカスタマイズしてないんで、設定のバックアップ後にftpソフトで全てのファイルを最新のヴァージョンで上書きしてみたんですが、症状は改善されませんでした。
あとは私のwordpressそのものとか、htaccesとかに問題があるんですかねえ、素人なのでその辺が判別できずすみません。
直近のことで言えば、三週間ほど前にレンタルサーバーをこちらのサイトでもおすすめされているカラフルボックスに引っ越したんですが、もしかしたらその際の手順などが影響しているのかも知れません。
何にしても、当方の特殊環境・設定による不具合であることに疑いはないので、そこまでの切り分けの手助けをして頂いたわいひらさんとAkiraさんには非常に感謝している所です。
2020年6月20日 01:16
私の環境で不具合を再現できました。endou さんのサイトの固有の問題ではない気がします。
ただ、関係しそうなファイルをざっと見たのですが、問題になりそうな箇所が分かりませんでした。明日の夜まで時間が取れないため、とりあえず私が確認した内容だけ書いておきます。
不具合は、「HTML の縮小」と「画像の拡大効果」を併用した時に発生します。
- 旧エディターを使用（Gutenberg ではない）。
- notepad の内容を旧エディターにそのままコピペ。
- 「HTML の縮小」を有効にし、 Cocoon 設定 → AMP タブの「画像の拡大効果」で「AMP Lightbox」か「AMPギャラリー」を選ぶと不具合が発生。
- 「HTML の縮小」を無効にすれば、「画像の拡大効果」に関係なく正常になる。
- 「画像の拡大効果」で「なし」を選べば、HTML を縮小しても正常になる。
- 不具合の発生時は、notepad に記載の <a> 開始タグから tmp/content.php の 231 行目までがなくなる。また、「画像の拡大効果」が「なし」以外だと 232 行目のロゴ画像に拡大効果が付く。
- Notice を含め PHP エラーは出ていない。
- 子テーマは何もいじっていないまっさらな状態。プラグインを全て停止しても解消しない。また、親テーマでも不具合が出る。
This post was modified 4年前 by Akira
2020年6月20日 03:38
あちゃあ、そうだったんですか。間違った解釈してしまいすみません。
とりあえず、これ以上素人が口出ししてもどうにもならなそうなので様子を見ときます ? 。
2020年6月20日 21:01
僕のテスト環境で、以下の条件で動作確認してみたんですけど、なぜか再現されない…。
- 旧エディターにそのままコピペ
- 「HTML の縮小」を有効
- 「画像の拡大効果」で「AMP Lightbox」か「AMPギャラリー」を選ぶ
なにか他に条件とかが必要なんですかね ?
2020年6月20日 21:02
あちゃあ、そうだったんですか。間違った解釈してしまいすみません。
いずれにせよCocoonの不具合だと思います。
不具合が再現でき次第、修正を試みてみます。とりあえずいろいろ設定を変更してみて、不具合再現を試みてみようと思います。
endou reacted
2020年6月20日 21:03
とりあえず、これ以上素人が口出ししてもどうにもならなそうなので様子を見ときます ? 。
よろしければ高速化設定から、「HTML の縮小」を無効にして、キャッシュの削除メニューから「AMPキャッシュの削除」を行って、問題が改善されるかどうかを確認してみていただいてよろしいでしょうか。
2020年6月21日 04:01
わいひらさん、ご指摘の通り「HTML の縮小」を無効にして、キャッシュの削除メニューから「AMPキャッシュの削除」を行うと、不具合は解消されました。
再度、「HTML の縮小」を有効にすると、不具合が再現される状態です。
わいひら reacted
2020年6月21日 15:26
ごめんなさい。私では解決できそうにありません。
原因になりそうな箇所が分からないですし、わいひらさんの環境で再現できない理由も分からない…。
ちなみに、HTML を縮小し、画像の拡大効果がなしの場合のダウンロードボタンの HTML は、こんなものです。
<div class="btn-wrap btn-wrap-indigo btn-wrap-l"><a href="https://rpgcritic.com/wp-content/uploads/2020/06/HS2CoordeF_20200604033548801.zip">この衣装データをダウンロード</a></div>
画像の拡大効果の正規表現には、マッチしないはずなんですけどね。なぜ、画像の拡大効果で変になるのか分からない。
This post was modified 4年前 by Akira
2020年6月21日 16:29
とりあえず#post-35398の手順通りに確認してみただけですが、「HTMLの縮小」有効化によって改行がなくなり、amp.php#L536やamp.php#L562にある次のコード赤字部分
$pattern = '{<a href="[^"]+?/wp-content/uploads.+?"><amp-img(.+?)></a>}i';
が不具合の原因となっているようです。
この正規表現では改行以外のすべてが含まれてしまうため、次に
"><amp-img(.+?)></a>
となる記述がマッチするまでの全てのHTMLを処理します。
（マッチしない場合は処理されず、不具合は生じないはず。）
なので、
僕のテスト環境で、以下の条件で動作確認してみたんですけど、なぜか再現されない…。（#post-35449）
となるのは、コピペしたHTML以降にAMP化された画像タグがないからではないでしょうか？
画像タグがない場合はコピペ以降に画像タグを入れ、再度チェックしてみてください。
2020年6月21日 20:24
不具合が再現されない条件として「画像拡大効果」が「Spotlight（軽量・高機能ギャラリー）」というのも原因ぽいです。
「a class="spotlight" 」がついているので、以下の正規表現にマッチしないっぽい。
$pattern = '{<a href="[^"]+?/wp-content/uploads.+?"><amp-img(.+?)></a>}i';
となるのは、コピペしたHTML以降にAMP化された画像タグがないからではないでしょうか？
画像タグがない場合はコピペ以降に画像タグを入れ、再度チェックしてみてください。
ちょっと試してみたのですが、まだ再現されないので、後でもうちょっと探ってみます。
不具合に関しては、その赤字部分が問題で間違いなさそうです。
2020年6月22日 17:06
"><amp-img(.+?)></a>ついでに、こちらの正規表現も同様の理由で修正した方がよさそうです。
もちろん、そちらも存じているのですが、その部分については不具合を再現してからにしようと思ってます。
とりあえず、修正しても明らかにおかしくなる影響がおそらくないであろう、「uploads.+?"」の部分は修正しておきました。
https://github.com/yhira/cocoon/commit/d338a254de51a656d47b53c0cfa567fc3d9c211f
よろしければ、endouさんにお願いできればと思うのですが、以下のファイルでアップデートして改善されるかを試してみていただいてよろしいでしょうか。
------------------------------------------------
https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。
FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------
また、懸念部分があるので改善されるとは限りません。
お手数ではありますが、よろしくお願いいたします。
endou reacted
2020年6月22日 17:38
あと「"><amp-img(.+?)></a>」の部分の正規表現もなるべく不具合が出にくいものに修正できたかと思います（多分）。
Akiraさんとロコさんのおかげで、問題部分にたどり着くことができました。
ありがとうございます！
endou reacted
2020年6月22日 18:40
わいひらさん、分析とご対応ありがとうございます。
ただ、早速FTPソフトで開発版をアップロードした所、当方の環境では表示が改善されませんでした（なんかスイマセン）。
一応、該当ページは不具合が出た状態のまま公開してあります。わいひらさんが不具合状態のスクリーンショットとして提示されているのと同様の状況です。
2020年6月22日 19:56
AMPキャッシュの削除は行われましたか？
それでも改善されない場合は、同じ設定で動作確認したいと思います。
以下の設定状態はどのようになっていますか？
- 「AMP」タブの「画像の拡大効果」
- 「画像」タブの「画像拡大効果」
- 「本文」タブの「内部リンクの開き方」
動作確認のため、上まで戻るのが大変なのでもう一度リンクだけ貼っておきます。
2020年6月23日 00:07
一度こちらの最新版（2.2.0.1）でもう一度上書きアップデートしてから試してみていただけると幸いです。
https://github.com/yhira/cocoon
endou reacted
2020年6月23日 00:11
親テーマのバージョンを確認してみたところ、まだバージョンが古いままです。
前回修正ファイルを提示した時点で、2.2.0だったはずなので、少なくともそれになっていないと改善されないと思います。
https://rpgcritic.com/wp-content/themes/cocoon-master/style.css
endou reacted
2020年6月23日 16:15
わいひらさん、すいません、完全に私のミスでした。
winrarでunzipしたらcocoon masterの中にもう一個cocoon masterが入ってまして、そのままアップロードしてしまい、要はマスターのフォルダ直下にもう一個マスターのフォルダ置いてました。マジで愚かすぎて申し訳ないっす。
というわけで、当方の環境でもようやくampページが正常表示されるようになりました。何度も謝罪ばかりですが、ここまでの展開の中で議論をミスリードするような書き込みを幾度かしてしまいましたことを、少し反省しております。
そして、解決に関わって頂いたAkiraさん、ロコさん、わいひらさんに深く感謝します。一週間に渡っての分析とご対応、どうもありがとうございました。
わいひら reacted
2020年6月23日 19:43
ご確認ありがとうございます！
この不具合を修正できたのも、報告していただいたendouさんはもとより、Akiraさん、ロコさんのおかげです。感謝申し上げます！
endou reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。