Cocoonフォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

不具合の発生手順:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法
  7. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

AMPページでのダウンロードリンク表示...
 
共有:
通知
すべてクリア

[解決済] AMPページでのダウンロードリンク表示について

36 投稿
5 ユーザー
34 Reactions
1,810 表示
(@Tanemoto Endou)
Eminent Member
結合: 6年前
投稿: 22
Topic starter  

わいひら様、フォーラムの皆様、お疲れ様です。書き込み制限直前に失礼致します。

Wordpress標準の「メディアを追加」機能でZIPのダウンロードリンクを参照して作り、それをスタイルの囲みボタンを使用して装飾した所、通常のページの表示では上手く行ったんですが、何故かAMPページでは表示が崩れてしまいました。当該のページは、

https://rpgcritic.com/cover035/  で、

不具合のあるAMPページは、

https://rpgcritic.com/cover035/?amp=1

であります。

ちなみに、google AMP テストではエラーは出ませんでした(緑表示)。プラグインも停止して試してみたものの、改善されませんでした。

お忙しい中とは思いますが、どなたか原因をご教授頂ければ幸いです。


   
(@Tanemoto Endou)
Eminent Member
結合: 6年前
投稿: 22
Topic starter  

自作自演でのリプライすみません。

こちらへの不具合報告用に、事前準備の指示通り、「高速化設定を無効」にした所、なぜだか当方には理由が分からないのですが、表示が改善され、全く問題なく表示されるようになっておりました。というわけで、敢えて「高速化設定を有効」にしたまま、上記のページリンクを表示させておきたいと思います。

初心者故に何となく問題が切り分けられつつあるのに自分で対応できず、申し訳ありません。


   
(@Tanemoto Endou)
Eminent Member
結合: 6年前
投稿: 22
Topic starter  

何度も自演リプライ申し訳ないっす。ちなみに、敢えて高速化設定を有効、にした後にAMPキャッシュを削除し忘れておりましたので、それを削除し、現在は不具合が出ている状況、を再現できております。

 


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17220
 

https://rpgcritic.com/cover035/

全く同じ内容で、こちらの環境でテストさせていただければと思うので、よろしければ上記の記事のソースコードを以下の方法でいただくことはできますでしょうか。
https://wp-cocoon.com/notepad-pw/


   
(@Tanemoto Endou)
Eminent Member
結合: 6年前
投稿: 22
Topic starter  

わいひらさん、ご返信ありがとうございます。

URLはこちらです。

https://notepad.pw/share/e76ft11h


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17220
 

僕のテスト環境で同じコンテンツをいれて、AMPページで表示してみた限りでは問題なく表示されているようです。
不具合の再現方法がわからないので、ちょっと以下のトラブルシューティングに書かれていることぐらいしか僕にもわからないかもしれません。
https://wp-cocoon.com/faq-css-trouble/

よろしければ「全てのプラグインを停止した状態」で動作確認をしていただけますでしょうか。
それでも改善しない場合は、それに加えて「親テーマのみを有効にした状態」にしても動作確認いただければと思います。

あと、よろしければ環境情報もいただいてよろしいでしょうか。
https://wp-cocoon.com/theme-report/


   
endou reacted
(@Tanemoto Endou)
Eminent Member
結合: 6年前
投稿: 22
Topic starter  

わいひらさん、ご対応ありがとうございます。

その後ご指摘の点を幾つか試してみたんですが、プラグイン全停止ではやはり改善されず、一方、子テーマから親テーマへの変更で症状が改善されました。

以上のような理由から、私の子テーマ上の設定に今回の不具合の原因がある、ことがはっきり致しました。

しかしながら、その後、自力で症状を改善しようと模索してみたものの、問題点の特定にまでは至りませんでした(ちなみに、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
----------------------------------------------


   
(@akira)
Famed Member Registered
結合: 7年前
投稿: 1657
 

HTML 縮小化と CSS 縮小化の無効化は可能でしょうか?

通常ページも何か変です。

https://validator.w3.org/nu/?doc=https%3A%2F%2Frpgcritic.com%2Fcover035%2F

※ Stray end tag head. などが出ている。


   
わいひら and endou reacted
(@Tanemoto Endou)
Eminent Member
結合: 6年前
投稿: 22
Topic starter  

Akiraさん、返信ありがとうございます。

一旦、高速化設定を無効化しました。もしご検証頂ければ幸いです。


   
(@akira)
Famed Member Registered
結合: 7年前
投稿: 1657
 

おそらく原因は 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

   
わいひら and endou reacted
(@endou)
Active Member Registered
結合: 4年前
投稿: 11
 

Akiraさん、ご検証ありがとうございます。

ご指摘の通り、tmp-user/head-insert.php がBOMになっておりました。ですんで、そこに関しては最新の子テーマの同名ファイルで上書きいたしました。

一方、子テーマの style.css と amp.css は、私の確認した限りでは、BOMアリにはなっていなかったようであります。

で、上記の2つを確認した後、当該のAMPページに付きまして、再度高速化設定を有効化してから表示を確認してみたんですが、やはり表示の崩れは解消されませんでした。

せっかく細部を見て頂いたのにすいません。とはいえ、ひとまずBOMがあること自体に一切気付いていなかったので、不具合を一つ取り除いていただいたことに感謝致します。

いずれにしても、私の子テーマが問題であることには変わりませんので、なんかお騒がせしてしまって申し訳ない、といった感じです。

あと、Akiraさんには以前にもお世話になった記憶があったので、いいねをするためにフォーラムに登録しました。ですんで、なんかスレッドの途中から名前が微妙に変わっているんですが、わたしはこのトピックを立てたEndouです。


   
(@akira)
Famed Member Registered
結合: 7年前
投稿: 1657
 

通常ページは、正常になりました。

一方、AMP ページはまだ BOM があるのですが、親テーマの amp.css に BOM が混じっていました。申し訳ないです。私の確認不足でした。

ただ、親テーマにすれば正常になるとのことですので、原因は BOM ではなかったということ。

他にある原因を探すために、再度 HTML と CSS の縮小化を有効にして頂けるでしょうか。有効にした後は、Cocoon 設定 → キャッシュ削除より「AMPキャッシュの削除」が必要です。


   
endou and わいひら reacted
(@endou)
Active Member Registered
結合: 4年前
投稿: 11
 

Akiraさん、返答が遅れて大変申し訳ありません。ちょっと仕事に出ておりました。前回の自分のコメント時に一言申し添えておくべきでした、重ねてお詫び致します。

HTML と CSS の縮小化、を再度有効に致しました。何度もご苦労おかけしますが、ご検証頂ければ幸いです。

 


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17220
 
投稿者:: @Tanemoto Endou

----------------------------------------------
子テーマ名: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
(@endou)
Active Member Registered
結合: 4年前
投稿: 11
 

わいひらさん、返信ありがとうございます。

おっしゃるとおり、子テーマは全くカスタマイズしてないんで、設定のバックアップ後にftpソフトで全てのファイルを最新のヴァージョンで上書きしてみたんですが、症状は改善されませんでした。

あとは私のwordpressそのものとか、htaccesとかに問題があるんですかねえ、素人なのでその辺が判別できずすみません。

直近のことで言えば、三週間ほど前にレンタルサーバーをこちらのサイトでもおすすめされているカラフルボックスに引っ越したんですが、もしかしたらその際の手順などが影響しているのかも知れません。

何にしても、当方の特殊環境・設定による不具合であることに疑いはないので、そこまでの切り分けの手助けをして頂いたわいひらさんとAkiraさんには非常に感謝している所です。


   
(@akira)
Famed Member Registered
結合: 7年前
投稿: 1657
 

私の環境で不具合を再現できました。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

   
わいひら and endou reacted
(@endou)
Active Member Registered
結合: 4年前
投稿: 11
 

あちゃあ、そうだったんですか。間違った解釈してしまいすみません。

とりあえず、これ以上素人が口出ししてもどうにもならなそうなので様子を見ときます ? 。


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17220
 

僕のテスト環境で、以下の条件で動作確認してみたんですけど、なぜか再現されない…。

  • 旧エディターにそのままコピペ
  • 「HTML の縮小」を有効
  • 「画像の拡大効果」で「AMP Lightbox」か「AMPギャラリー」を選ぶ

なにか他に条件とかが必要なんですかね ? 


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17220
 
投稿者:: @endou

あちゃあ、そうだったんですか。間違った解釈してしまいすみません。

いずれにせよCocoonの不具合だと思います。

不具合が再現でき次第、修正を試みてみます。とりあえずいろいろ設定を変更してみて、不具合再現を試みてみようと思います。


   
endou reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17220
 
投稿者:: @endou

とりあえず、これ以上素人が口出ししてもどうにもならなそうなので様子を見ときます ? 。

よろしければ高速化設定から、「HTML の縮小」を無効にして、キャッシュの削除メニューから「AMPキャッシュの削除」を行って、問題が改善されるかどうかを確認してみていただいてよろしいでしょうか。


   
(@endou)
Active Member Registered
結合: 4年前
投稿: 11
 

わいひらさん、ご指摘の通り「HTML の縮小」を無効にして、キャッシュの削除メニューから「AMPキャッシュの削除」を行うと、不具合は解消されました。

再度、「HTML の縮小」を有効にすると、不具合が再現される状態です。


   
わいひら reacted
(@akira)
Famed Member Registered
結合: 7年前
投稿: 1657
 

ごめんなさい。私では解決できそうにありません。

原因になりそうな箇所が分からないですし、わいひらさんの環境で再現できない理由も分からない…。

ちなみに、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

   
わいひら and endou reacted
ろこ
(@lococo)
Prominent Member Registered
結合: 7年前
投稿: 830
 

とりあえず#post-35398の手順通りに確認してみただけですが、「HTMLの縮小」有効化によって改行がなくなり、amp.php#L536amp.php#L562にある次のコード赤字部分

$pattern = '{<a href="[^"]+?/wp-content/uploads.+?"><amp-img(.+?)></a>}i';

が不具合の原因となっているようです。

 

この正規表現では改行以外のすべてが含まれてしまうため、次に

"><amp-img(.+?)></a>

となる記述がマッチするまでの全てのHTMLを処理します。

(マッチしない場合は処理されず、不具合は生じないはず。)

 

なので、

僕のテスト環境で、以下の条件で動作確認してみたんですけど、なぜか再現されない…。(#post-35449

となるのは、コピペしたHTML以降にAMP化された画像タグがないからではないでしょうか?

画像タグがない場合はコピペ以降に画像タグを入れ、再度チェックしてみてください。


   
Akira, わいひら, pono and 1 people reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17220
 

不具合が再現されない条件として「画像拡大効果」が「Spotlight(軽量・高機能ギャラリー)」というのも原因ぽいです。

「a class="spotlight" 」がついているので、以下の正規表現にマッチしないっぽい。

$pattern = '{<a href="[^"]+?/wp-content/uploads.+?"><amp-img(.+?)></a>}i';
投稿者:: @lococo

となるのは、コピペしたHTML以降にAMP化された画像タグがないからではないでしょうか?

画像タグがない場合はコピペ以降に画像タグを入れ、再度チェックしてみてください。

ちょっと試してみたのですが、まだ再現されないので、後でもうちょっと探ってみます。
不具合に関しては、その赤字部分が問題で間違いなさそうです。


   
endou and pono reacted
ろこ
(@lococo)
Prominent Member Registered
結合: 7年前
投稿: 830
 
"><amp-img(.+?)></a>

ついでに、こちらの正規表現も同様の理由で修正した方がよさそうです。


   
わいひら, endou and pono reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17220
 
投稿者:: @lococo
"><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
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17220
 

ようやく不具合を再現できました。

Cocoon設定の「本文」タブで、「外部・内部リンクの開き方」をデフォルト以外にしていると不具合が再現できないようです。

とりあえず、前回の返信の修正で、不具合は改善されたように思います。

あとは、以下の部分をもっと不具合の出にくい記述に変更しておこうと思います。

"><amp-img(.+?)></a>

   
Akira and endou reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17220
 

一応、不具合状態のスクリーンショットの補足。


   
endou reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17220
 

あと「"><amp-img(.+?)></a>」の部分の正規表現もなるべく不具合が出にくいものに修正できたかと思います(多分)。

Akiraさんとロコさんのおかげで、問題部分にたどり着くことができました。
ありがとうございます!


   
endou reacted
(@endou)
Active Member Registered
結合: 4年前
投稿: 11
 

わいひらさん、分析とご対応ありがとうございます。

ただ、早速FTPソフトで開発版をアップロードした所、当方の環境では表示が改善されませんでした(なんかスイマセン)。

一応、該当ページは不具合が出た状態のまま公開してあります。わいひらさんが不具合状態のスクリーンショットとして提示されているのと同様の状況です。


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17220
 

AMPキャッシュの削除は行われましたか?

それでも改善されない場合は、同じ設定で動作確認したいと思います。
以下の設定状態はどのようになっていますか?

  1. 「AMP」タブの「画像の拡大効果」
  2. 「画像」タブの「画像拡大効果」
  3. 「本文」タブの「内部リンクの開き方」

動作確認のため、上まで戻るのが大変なのでもう一度リンクだけ貼っておきます。

https://rpgcritic.com/cover035/

https://rpgcritic.com/cover035/?amp=1


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17220
 

一度こちらの最新版(2.2.0.1)でもう一度上書きアップデートしてから試してみていただけると幸いです。
https://github.com/yhira/cocoon


   
endou reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17220
 

親テーマのバージョンを確認してみたところ、まだバージョンが古いままです。
前回修正ファイルを提示した時点で、2.2.0だったはずなので、少なくともそれになっていないと改善されないと思います。
https://rpgcritic.com/wp-content/themes/cocoon-master/style.css


   
endou reacted
(@akira)
Famed Member Registered
結合: 7年前
投稿: 1657
 

私の環境では、改善を確認できました。ありがとうございます。

This post was modified 4年前 by Akira

   
わいひら and endou reacted
(@endou)
Active Member Registered
結合: 4年前
投稿: 11
 

わいひらさん、すいません、完全に私のミスでした。

winrarでunzipしたらcocoon masterの中にもう一個cocoon masterが入ってまして、そのままアップロードしてしまい、要はマスターのフォルダ直下にもう一個マスターのフォルダ置いてました。マジで愚かすぎて申し訳ないっす。

というわけで、当方の環境でもようやくampページが正常表示されるようになりました。何度も謝罪ばかりですが、ここまでの展開の中で議論をミスリードするような書き込みを幾度かしてしまいましたことを、少し反省しております。

そして、解決に関わって頂いたAkiraさん、ロコさん、わいひらさんに深く感謝します。一週間に渡っての分析とご対応、どうもありがとうございました。


   
わいひら reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17220
 

ご確認ありがとうございます!
この不具合を修正できたのも、報告していただいたendouさんはもとより、Akiraさん、ロコさんのおかげです。感謝申し上げます!


   
endou reacted
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

タイトルとURLをコピーしました