サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL:
相談内容:
不具合の発生手順:
解決のために試したこと:
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え(FAQ)
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw)
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2019年7月8日 21:35
AMPページでリンクテキストのリンク範囲が広がってしまうエラーがでました
通常ページでは問題ありません
いろいろなAMPエラーのツールを使ってみたのですが、わかりませんでした
そのため、手作業でミスを探しましたが、これも見つかりませんでした
テーマの不具合とはちょっと違うかもしれませんが、もしエラーがわかれば教えていただきたいです
不具合ページ:「 https://airisu745.info/uniqlo-sports/?amp=1 」
不具合箇所:h4タグ「ブラタンクトップ スポーツ|エアリズムブラ(レーサーバック)」の本文の部分です
----------------------------------------------
サイトURL: https://airisu745.info
ホームURL: https://airisu745.info
コンテンツ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.0.33
ブラウザ: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,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名:Cocoon
バージョン:1.8.8.1
カテゴリ数:33
タグ数:154
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:0.0.4
----------------------------------------------
Gutenberg:0
AMP:1
PWA:0
Auto Post Thumbnail:0
ホームイメージ:/wp-content/uploads/2018/03/123380f84bc5ea670f070d9c6e4c9c7d.png
----------------------------------------------
ブラウザキャッシュ有効化:1
HTML縮小化:1
CSS縮小化:1
JavaScript縮小化:1
Lazy Load:0
WEBフォントLazy Load:0
JavaScript(フッター):1
----------------------------------------------
利用中のプラグイン:
Akismet Anti-Spam 4.1.2
All In One SEO Pack 3.1.1
Autoptimize 2.5.1
Broken Link Checker 1.11.8
Contact Form 7 5.1.3
EWWW Image Optimizer 4.8.1
Google XML Sitemaps 4.1.0
PS Auto Sitemap 1.1.9
Q2W3 Fixed Widget 5.1.9
Redirection 4.3.1
Search Regex 1.4.16
UpdraftPlus - Backup/Restore 1.16.15
Wordfence Security 7.3.4
WP All Export 1.2.3
WP Multibyte Patch 2.8.2
----------------------------------------------
2019年7月8日 22:41
これは、こちらのテスト環境で同じコンテンツで試してみないと何とも言えないかもしれません。
よろしければ以下の方法で、本文のソースコードをいただけますでしょうか。
https://wp-cocoon.com/notepad-pw/
2019年7月9日 04:17
次のリンクまで画像のリンクになってるので、どこか閉じタグを忘れてるんだと思います。
h ttps://airisu745.info/wp-content/uploads/2018/11/4b667a7a2afdf4788740669fdde0ad41.jpg
ブラウザで確認しても、ブラウザが正常にタグを閉じてくれるので、エディタのHTMLを確認したほうが早そうです。
その画像リンク・画像のパス直後あたりからの、pタグかaタグをチェックしてみるのが良いかも。
- それでも不明な場合はわいひらさんの案内通りで。
- 不具合箇所が分かり修正したら、AMPページを確認して
もし反映されなかった場合のみ、Cocoon設定・キャッシュ削除よりAMPキャッシュの削除を行うほうこうで❦
わいひら reacted
トピックスターター 2019年7月9日 04:27
わいひら様へ
お返事ありがとうございます
恐縮ですがテキストファイル添付でもいいでしょうか・・・
添付して送付させてください
(コピー防止に一部ワードをランダムに抜いております このテキストでもエラーは再現できました)
またコクーンの高速化(HTMLとCSS)を解除するとAMPエラーは直るようです(※キャッシュクリアで確認いたしました)
よろしくお願いいたします
トピックスターター 2019年7月9日 04:43
かうたっく様へ
アドバイスありがとうございます
閉じタグ忘れを目視でもう一度確認してみますm(_ _)m
2019年7月9日 04:51
テーマ名:Cocoonバージョン:1.8.8.1のテスト環境で確認しましたけど、問題ないんですよね。
あと目視でも、さらにカスタムHTMLウィジェットでh4タグ以下をコピペしてタグの確認しても問題ないんですよね。
- Cocoon設定の高速化は全部有効にしてます。
Autoptimizeとか停止すればどうなりますか?
それでもダメな場合は、他プラグインの影響など。
※AMPなのでAMPキャッシュ削除が毎回必要かもしれません?
わいひら reacted
トピックスターター 2019年7月9日 05:08
カウタック様へ
ありがとうございます
プラグイン確認してみます
トピックスターター 2019年7月9日 07:09
かうたっく様
報告します
Autoptimize停止では直りませんでした
ほかのプラグイン停止も、変化なしです
これから外に出てしまうので、夕方頃またいじってみます
2019年7月9日 10:01
Cocoon設定・『AMP』タブにある『画像の拡大効果』ですが、こちらのテスト環境では
- AMPギャラリー(複数画像ギャラリー表示対応)
になってたので、
- 『AMP Lightbox(単一拡大)』
に変更してキャッシュを切っても、問題なく表示されますねぇ。
現状
- HTML・CSSの圧縮が関係している。
- Cocoon設定の変更の更新から何かがオカシイ可能性も残る
- プラグインの影響は皆無
関係あるか不明ですが、テスト環境では
※旧エディタでテストを行ってない。
※クラシックブロックで、テストを行った。
この状況でAMPでは問題ない感じです。
わいひら reacted
2019年7月9日 10:22
忘れてました。31番目あたりをチェックしてもらったら
やっぱタグがオカシイみたいですよ。
https://validator.w3.org/nu/?doc=https%3A%2F%2Fairisu745.info%2Funiqlo-sports%2F%3Famp%3D1
上記はAMPですが、通常ぺージでHTMLの検証をしてチェックしてみるのが良いかもです。
HTMLコード冒頭からコピペしてチェックして見なきゃかも。私は今チェックしてませんが。
この投稿は5年前ずつかうたっくに変更されました
2019年7月9日 11:12
かうたっくさんがおっしゃっているとおり、HTML がおかしな部分があります。
私が把握した部分は、下記のとおりです(他にもあるかもしれません)。
①「▲目次トップに戻る」の部分で、li 閉じタグはあるのに開きタグがない。このエラーが複数出ているため、おそらく全ての「▲目次トップに戻る」でそうなっています。
②「(▽ユニクロ エアリズムシームレスVネックブラキャミソール)」の下の画像で、a 閉じタグが 2 つある。おそらく、おっしゃっている症状の原因はこれです。
この部分の HTML を全て修正されると、どうなるでしょうか。
それと、center タグをお使いですが、このタグは HTML5 で廃止になり非推奨となりました。ブラウザが今すぐサポートを停止してもおかしくはないため、お使いになるのはお止めになった方がいいと思います。
わいひら reacted
トピックスターター 2019年7月9日 12:19
かうたっく様
Akira様
アドバイス感謝です
また、つたないHTML・・お恥ずかしいです・・・すみません
今は出先なのでかえったらすぐ修正してみます
ありがとうございますm(_ _)m
2019年7月9日 16:50
カスタムHTMLがやっぱ修正に良さそうです。
※保存はしないで編集のみに閉じタグとか、チェックしやすそう
×印が出てる様子と、変な場所に</li>li終了タグが入ってるバージョン。
https://gyazo.com/353fda58cfac5a2e4a60a1a0a254b833
23個のエラーがあるらしいので修正、頑張ってくださいね。
わいひら reacted
トピックスターター 2019年7月9日 19:59
かうたっく様
Akira様
HTMLは「かうたっくさん」の「カスタムHTML」を使うやり方(これ便利ですね・・)でエラーはなくなりました
ですが、AMPのエラーはまだあるようです
次はサイトへの流入が一番少ない時間に全プラグイン止めてみます
2019年7月9日 21:46
該当ページの通常ページにAMPテストの表示はないですか?
Cocoon設定・管理者画面タブ に管理者メニューがあるので、AMPテスト表示を有効にしたら、誰よりも簡単にテストできるようになってます。
******
そのAMPテストの結果のURLを置いてください。
*
ほか、キャッシュが残っている場合
Cocoon設定・キャッシュ削除・AMPのキャッシュ削除をお試しください。
*********
追記
ってか、今回のリンクテキストが広がるエラー:画像リンクがリンクまで長々とリンクとして表示される件と違ってるかも。
この件はなおりましたか??
この件と全く違う。ってことであれば、新規トピックをお願いします。関連しているのであれば、以下に書き込みくださいね。
この投稿は5年前ずつかうたっくに変更されました
2019年7月9日 23:50
このページに関しては、AMP エラーは解消しています。
https://airisu745.info/uniqlo-sports/?amp=1
ただ、本題の画像より下がリンクになる問題は解決していません。
アップロードされたテキストを私のテスト環境に貼り付けたのですが、問題を再現できません。
修正したテキストを添付します
もし、HTML に問題がない場合は、私が原因を作ったのかも。わいひらさんにお願いがあります。amp-lightbox-gallery を適用するための PHP の正規表現をご確認いただけないでしょうか。
https://github.com/yhira/cocoon/blob/master/lib/amp.php#L552
airisu さんのサイトでは、「(▽エアリズムブラ レーサーバック)」の下にある amp-img タグに lightbox 属性が付いていない。また、a 開きタグは削除されていない。けれど、a 閉じタグは削除されてしまっています。
再現できないこともあって、私では原因が分かりません。何で a 閉じタグのみ削除しているんだろう。
わいひら reacted
トピックスターター 2019年7月10日 04:27
>かうたっく様
AMPテストは合格みたいです(画像を添付しました)
また、全プラグインを停止しましたが、リンクテキストが広がるところは解消できませんでした
キャッシュ削除もコクーンメニューからAMPキャッシュ削除等やってみましたが、解消していません
>Akira様
確かにAMPのソースをみると 「aタグ」の閉じタグないですね・・・
コクーンの高速化をはずすと「amp-img class="amp-lightbox amp-lightbox-gallery aligncenter size-full wp-image-17617" lightbox src=”画像リンク”」というタグ出てきて、表示が正常になります
今のところ打つ手が見つからない状況です
うーん・・・
2019年7月10日 07:47
h4タグの見出し、以下文字列から
ブラタンクトップ スポーツ|エアリズムブラ(レーサーバック)
次の見出し、以下文字列までのHTMLをコピぺして
ユニクロ スポーツ レディース 上着|おしゃれウェアおすすめ
新規投稿記事に貼り付けて、プレビューからAMPページをチェックしても同じ症状がでますか?
または、全記事のHTMLをコピペしたほうが良いかな?
あと、
別途新規記事を作成してピンクの画像(エアリズムブラ レーサーバック???)をダウンロードして再度アップロードすれば画像のパスが変わるので
アップロードしなおした画像にリンクをつけた場合、同じ症状が改善できますか?
もし万が一改善できたら、本番環境でも試してみるのも良いかもですね。
わいひら reacted
トピックスターター 2019年7月10日 08:23
〉かうたっく様
承知しました
出先なので、戻りましたらやってみます
実は他の記事でも同じようなことを見つけました、確認したら、アップしてみます
追加のcssもamp.cssに入れてるので、それも削除して試してみます
2019年7月10日 13:53
amp-lightbox-gallery を適用するための PHP の正規表現をご確認いただけないでしょうか。
https://github.com/yhira/cocoon/blob/master/lib/amp.php#L552
リンクの閉じタグが削除されてしまうとのことですが、AMP化でamp-lightbox-galleryに対応する置換ではa 閉じタグのみを空にする仕様ではないため、上記の箇所が問題ではなさそうです。
また、該当のリンクでは置換が行われていないことから、amp-lightbox-galleryの処理以前ですでに問題のリンクが閉じていない形になってしまっているようです。
コクーンの高速化をはずすと「amp-img class="amp-lightbox amp-lightbox-gallery aligncenter size-full wp-image-17617" lightbox src=”画像リンク”」というタグ出てきて、表示が正常になります
おそらく、HTMLの縮小化が原因かと。
こちらについては確認していませんが、他のリンクはきちんと置換されているので、minify_html関数と問題箇所前後の文字列の関係からリンクの閉じタグ前までがひとつの段落になってしまっているのではないかと思います。
高速化(HTMLの縮小化)を有効にしたままで解決したいのであれば、問題の箇所前後のHTMLを一度綺麗に書いた方がいいかもしれません。
空のPタグなど、不要なタグが入っているのが気になります。
トピックスターター 2019年7月10日 19:04
>ロコ様へ
アドバイスありがとうございます
もう一度整理してみたいと思いますm(_ _)m
トピックスターター 2019年7月10日 20:52
関係皆様方へ
HTMLの整理をしたところ、リンクテキスト拡大のエラーが解消しました
ありがとうございました
まだ「Akiraさん」にアドバイスいただいた「center」タグの修正と、まだ一部デザインが直っていないところもあるので、もう少し整理してみたいと思います
自分で見やすいようにスペースを多く取ってしまったことが原因だと思われます
大変ご迷惑をおかけしましたm(_ _)m
わいひら reacted
2019年7月10日 23:36
HTML が原因だったんですね。置換部分は私が書いたコードがほんの少し含まれているので、怪しく見えてしまいました。
ただ、HTML を変更されたことで、画像が拡大しなくなっています。
画像を拡大するには、画像と画像を囲む a タグのみを p タグで囲む必要があります(今は br や center などが入ってしまっています)。
わいひら reacted
トピックスターター 2019年7月11日 04:02
>Akira様
アドバイスありがとうございます
実は画像の拡大設定をしたつもりがありませんでしたが、AMP画面の場合、ほとんどが画像拡大してくれてるようですね
拡大してくれるのはうれしいです
これもWordPressの本文を整理すれば直るのでしょうか・・
2019年7月11日 07:59
ただ、HTML を変更されたことで、画像が拡大しなくなっています。
画像を拡大するには、画像と画像を囲む a タグのみを p タグで囲む必要があります(今は br や center などが入ってしまっています)。
>Akira様
これもWordPressの本文を整理すれば直るのでしょうか・・
HTMLを以下のようにしなきゃダメだけど
pタグ aタグ imgタグ /aタグ /pタグ
現状は以下。
pタグ aタグ imgタグ /aタグ brタグ centerタグ /pタグ
aタグを囲んでいるpタグ領域内に不要なタグ brタグ centerタグ 抜いてくれなきゃ、拡大しないよ ? ? ?
って、AMPの『拡大しない画像たち』が言ってるよ❦
と、Akiraさんが教えてくれてます。
Akiraさんは、そんな言いかたしてないですね(笑
わいひら reacted
トピックスターター 2019年7月11日 13:51
失礼しましたm(_ _)m
HTML不勉強で申し訳ありません
画像回り修正してみます
2019年7月11日 17:18
HTML不勉強で申し訳ありません
WordPressは簡単に始められるので、HTMLから勉強する人もいる。かもですが、それはホンの一握りですよ
分からない事は悪ではないです。なので、このようなフォーラムがあるし
謝るより、前向きに考えて頂けたら。
解決できれば前提で、分からない人のためにフォーラムがあるんですよ。
2回言ったけど、おそらくです。
でも、ひそかに応援してますね。
わいひら reacted
トピックスターター 2019年7月11日 20:06
>かうたっく様へ
>Akira様へ
この度はいろいろご迷惑をおかけしました
Akiraさんに言われたところを修正してみました
https://airisu745.info/uniqlo-sports/?amp=1
なんとか直ったと思います
今回はいろいろお世話いただき、勉強になりましたm(_ _)m
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。
(CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。