サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2020-02-25 22:03
Cocoonの設定からブログカードをOFFにしても、URLを記載するとブログカードとして表示されてしまいます。また、ブログカードの下によくわからない文字列が大量に付属し、なおかつブログカードで表示される内容がURLと全く関係のないものになってしまいます。
https://nipo.sndbox.jp/idea/report/attachment/pdfs
上記ページでまさにその現象が発生しております。このページは画像の詳細ページです。
利用プラグインは
- Akismet anti-spam
- All in One SEO Pack
- Contact form7
- Jetpack
- Redirection
- TablePress
- TypeSquare Webfonts for エックスサーバ
- WebSub/PubSubHubhub
- WP Multibayte patch
となります。Google ChomeとOperaのブラウザで症状を確認しました。
画像ファイルの「説明」欄にURLを書くとこの現象が発生し、URLを消すとこの現象は無くなります。
自動で作成されたブログカードでは「社外の方と～略」ですが、実際に説明欄に記載したURLは
https://nipo.sndbox.jp/idea/report
であり、全く関係のないカードが仕上がってしまっています。
ご面倒をおかけしますがご確認お願いします
2020-02-25 22:48
ちょっと不具合を再現できなかったので、同じ内容でテストしてみたいと思います。
よろしければ以下の方法で、投稿のソースコードをいただけますでしょうか。
https://wp-cocoon.com/notepad-pw/
あと、環境情報もいただければと思います。
https://wp-cocoon.com/theme-report/
Topic starter
2020-02-25 23:04
わいひさらま 返信ありがとうございます。
さて、投稿のソースは次の通りです（なおこれは画像ページです）
【代替テキスト】
報告書をPDFに出力する
【タイトル】
報告書をPDFに出力する
【キャプション】
トラブル報告書をNipoでPDFに出力したイメージです。文書番号や検印欄も設定で利用可能です。添付した画像もPDFに埋め込まれて出力されます。この例はA4縦ですが、A4横でPDF化することも可能です
【説明】
トラブル報告書をNipoでPDFに出力したイメージです。文書番号や検印欄も設定で利用可能です。添付した画像もPDFに埋め込まれて出力されます。この例はA4縦ですが、A4横でPDF化することも可能です
https://nipo.sndbox.jp/idea/report
環境情報
---------------------------------------------- サイト名：クラウド日報 Nipo サイトURL： https://nipo.sndbox.jp ホームURL： https://nipo.sndbox.jp コンテンツ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.3.2 PHPバージョン：7.3.14 ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.122 Safari/537.36 サーバーソフト：Apache サーバープロトコル：HTTP/1.1 言語：ja ---------------------------------------------- テーマ名：Cocoon バージョン：2.1.0.4 カテゴリ数：11 タグ数：8 ユーザー数：1 ---------------------------------------------- 子テーマ名：Cocoon Child バージョン：1.0.8 style.cssサイズ：827バイト functions.phpサイズ：203バイト ---------------------------------------------- Gutenberg：0 AMP：1 PWA：0 Font Awesome：5 Auto Post Thumbnail：0 Retina：1 ホームイメージ：/wp-content/uploads/2020/02/512.png ---------------------------------------------- ブラウザキャッシュ有効化：1 HTML縮小化：1 CSS縮小化：1 JavaScript縮小化：1 Lazy Load：1 WEBフォントLazy Load：1 JavaScript（フッター）：1 ---------------------------------------------- 利用中のプラグイン： Akismet Anti-Spam 4.1.3 All In One SEO Pack 3.3.5 Contact Form 7 5.1.6 Jetpack by WordPress.com 8.2.3 Redirection 4.7 TablePress 1.10 TypeSquare Webfonts for エックスサーバー 1.2.1 WebSub/PubSubHubbub 3.0.3 WP Multibyte Patch 2.8.3 ----------------------------------------------
以上がこちらの環境です。
この症状は今回、画像ページで発生しましたが、過去には通常の固定ページでも発生しました。
発生した際は、古い画像を削除したときに発生することがあったような気がします。（曖昧な記憶ですみません） 以上、よろしくお願いいたします
Topic starter
2020-02-25 23:41
返信ありがとうございます。
すみません、これは「投稿」でも「固定ページ」でもなく、「画像ページ」のため、先ほど提示したデータがソースコードになると思います。ソースコードの張り方がもしあれば、教えてください。
一応参考までに、画像ファイルを添付いたします。
以前この現象が発生したときは固定ページだったのですが、さすがにトップページでその現象を放置するわけにはいかないので即修正し、今は問題が発生していない状況のため、当時のコードは残っておりません。すみません・・・。現在問題が発生している「画像ページ」はあまりアクセスも無いはずなので、問題をあえて残したまま、今回フォーラムに投稿させていただきました。
対応が難しいですよね。すみません・・・。
もしまた同様の問題が、固定ページ、投稿ページで発生したときは改めてご連絡させていただきます。利用していた画像を削除した場合に発生しているような感じがしますが、再現を確認した訳ではありません。
2020-02-26 19:26
それとともに、こちらのページの表示もおかしいですね。
https://nipo.sndbox.jp/idea/report
こちらの項目部分のソースコードはどうなっていますか？
※該当部分の見出しの部分だけで良いです。
Topic starter
2020-02-26 23:34
返信が遅くなりました。
idea/reportのページがおかしくなっているのは今気づきました。数日前に見た時こうなっていなかったので、何かおかしいですね・・・。キャッシュクリアくらいしかしていないのですが。
さて、ソース（該当箇所）は次の通りです。お手数をおかけしますがよろしくお願いいたします
<h3>報告書をシステム化しても紙で提出がしたい！報告書の体裁を保ちつつPDFに出力できます</h3>
<div class="column-wrap column-2 column-2-3-1-2">
<div class="column-left">
報告書をPDFに変換することが可能です。
PDFに変換された報告書は一般的なA4用紙サイズで作成されます。また、向きはA4縦／A4横のいづれか好きな方を選べます。
文書番号などもシステムが自動で付番するため報告書の文書管理にも役立ちます。
また、報告書を印刷して提出する際は、検印欄を設けることで承認印などが便利にお使いいただけます。
（検印欄が不要なら枠自体を消すことも可能）
エクセルによる出力では画像を取り扱えませんが、PDFであれば報告書に添付された画像もそのまま出力されます。（例では手書きメモという画像を利用しています）
</div>
<div class="column-right">
[caption id="attachment_8909" align="alignnone" width="1478"]<img class="size-full wp-image-8909" src="https://nipo.sndbox.jp/wp-content/uploads/2020/02/pdfs.png" alt="報告書をPDFに出力する" width="1478" height="2072" /> 報告書をPDFに出力する[/caption]
<a href="https://nipo.sndbox.jp/wp-content/uploads/2020/02/sample.pdf" target="_blank">実際のPDFデータはこちらからDL</a>できます
</div>
</div>
<p style="text-align: center;"><a class="btn btn-teal btn-m" href="https://nipo.sndbox.jp/manual/guide/pdf-export">PDFについてさらに詳しく</a></p>
2020-02-27 17:55
もしくは同じ画像でも一度画像設定を行って、出力させてみるとか。
キャプションに以下のように入力されているのに、
【キャプション】
トラブル報告書をNipoでPDFに出力したイメージです。文書番号や検印欄も設定で利用可能です。添付した画像もPDFに埋め込まれて出力されます。この例はA4縦ですが、A4横でPDF化することも可能です
以下のようなコードが出力されるのは、仕組み的にもなんかおかしいんですよね。
[caption id="attachment_8909" align="alignnone" width="1478"]<img class="size-full wp-image-8909" src="https://nipo.sndbox.jp/wp-content/uploads/2020/02/pdfs.png" alt="報告書をPDFに出力する" width="1478" height="2072" /> 報告書をPDFに出力する[/caption]
2020-02-27 18:19
https://nipo.sndbox.jp/idea/report
↑ のページの HTML を検証すると、このようなエラーが出ます。
</a>:開きタグがありません。
HTML が縮小されているため、場所がよく分かりません。ただ、「もちろん大丈夫、 ちゃんとした対策があります」の下に a 閉じタグのみがあるように思えます。
この HTML エラーを修正されると、どうなるでしょうか。
This post was modified 4年前 2回 by Akira
わいひら reacted
Topic starter
2020-02-27 22:17
わいひさらま
返信ありがとうございます。クラシックエディター上は問題なく表示されています。この問題は、画像ファイルの「説明文」にある
[
トラブル報告書をNipoでPDFに出力したイメージです。文書番号や検印欄も設定で利用可能です。添付した画像もPDFに埋め込まれて出力されます。この例はA4縦ですが、A4横でPDF化することも可能です
https://nipo.sndbox.jp/idea/report
]
の、最後のURLを消すことでバグ？は解消されました。画像の説明欄にURLを入れなければ問題は発生しないようです。画像の説明文に含まれるURLを何か誤って展開してしまっているのでしょうか・・・？
画像のページでも同様に、URLを消すことで問題は解消しました（この投稿を始めるきっかけとなった現象）
https://nipo.sndbox.jp/idea/report/attachment/pdfs
Topic starter
2020-02-27 22:35
先ほど、動作確認もかねて別の画像、別のページで動作確認を行ったところ、同様のバグが発生しました。
試験ページ
https://nipo.sndbox.jp/other/shenameisalice
このページには2枚の画像を張ってみました。どちらの画像にも、画像の説明欄にURLを記載しています。
結果、「自身のWebサイト以外のURL」が説明欄にある場合正常に表示されるようです。自身のWebサイト内のURLでは、同様のバグが発生しました。
試験ページでご確認いただけます。（このページはアクセスが少ないので少しこのままにしておきます。）
Topic starter
2020-02-27 22:40
Akira さま
返信ありがとうございます。
アンカータグの閉じですが、テキストエディタからコードを確認したところ、見当たりませんでした。先ほど投稿しましたが、他のページで、他の画像を利用しても同様の問題が発生するため、タグの構文エラーの線は薄いと思います。
投稿した試験ページ
Topic starter
2020-02-27 22:55
連投すみません。試験ページのソースを貼り忘れたので添付します
// コードここから
▼画像の説明欄にサイト外URLが含まれる例
[caption id="attachment_8946" align="alignnone" width="750"]<img class="size-full wp-image-8946" src="https://nipo.sndbox.jp/wp-content/uploads/2020/02/20181106_070238000_iOS.jpg" alt="画像投稿テスト" width="750" height="1334" /> これはサイト外のリンク[/caption]
▼説明欄にサイト内URLが含まれる例
[caption id="attachment_8943" align="alignnone" width="750"]<img class="size-full wp-image-8943" src="https://nipo.sndbox.jp/wp-content/uploads/2018/06/20181106_141403000_iOS.jpg" alt="動作確認テスト" width="750" height="1334" /> 動作確認[/caption]
<h2>コンテンツの創造者に敬意を。「ふにぐみ」さんありがとうございます</h2>
// 後略
画像の画像は1枚しか添付できないようなので、とりあえずエラーが発生した方の画像を添付します
2020-02-27 23:51
の説明欄にURLを記載しています。
結果、「自身のWebサイト以外のURL」が説明欄にある場合正常に表示されるようです。自身のWebサイト内のURLでは、同様のバグが発生しました。
画像ブロック系にある『説明』欄に、外部サイトurlを置くと問題ない。ってことですか？？
※Cocoon設定にあるブログカードの設定は、外部サイトはブログカードを無効にしているってことですか？？？
それで内部はブログカードを有効化している。って事であってますか？？？
これもCocoon設定
- それであれば画像の 説明 欄の URLの前に!を置くとどうなりますか？？？
https://wp-cocoon.com/not-blogcard/
あと、通常画像にリンクをつけてるのかな？？って印象です。Akiraさんの書き込みをみて思ったんですが
リンクaタグ内にブログカードのaタグが入ったことでおかしくなってるようにも思います。
猛烈なnaname読みでちがってるかもですが、試すとどうなりますか？？？
わいひら reacted
Topic starter
2020-02-28 00:12
＞＞それであれば画像の 説明 欄の URLの前に!を置くとどうなりますか？？？
!をつけることでエラーがでなくなりました。
ありがとうございます。
バグではなく仕様という認識でよろしいのでしょうか？
何にせよ助かりました。ありがとうございます。
2020-02-28 00:43
「画像の説明欄」とは、data-image-description で出力する部分でしょうか？
何か p タグや br タグ、a タグが見えますが、これが原因のように思えます。HTML がおかしいです。その部分にタグは書けません。
というか、data-image-description って何でしょう？何かのプラグインの機能でしょうか？
あと、HTML をお書きになる際は、notepad.pw にお書きください。それと、ご質問の際は、HTML の縮小を無効にして頂けるとありがたいです。
This post was modified 4年前 2回 by Akira
わいひら reacted
2020-02-28 01:07
気になって調べたのでご報告です。
「JetPack＞設定」ページの「執筆＞メディア」にある「画像を全画面のカルーセルギャラリーで表示する」が原因かと思います。
これを有効にするとカスタムデータ属性の「data-image-description」の中に「説明」のテキストが挿入されます。改行が取り除かれていないのでURLが先頭になった場合、そのURLを拾ってしまうんだと思います。
また、内部リンクであっても外部リンク扱いになっているようで「外部ブログカード」を無効化するとブログカード化されませんでした。
結果、「自身のWebサイト以外のURL」が説明欄にある場合正常に表示されるようです。自身のWebサイト内のURLでは、同様のバグが発生しました。
上記に関しては「data-image-description」の中身が「<p>h ttp://google.co.jp</p>」(※記号はエスケープされている)が挿入されているようです。
(フォーラムの仕様でURLがリンク化されるのでわざとURLの間にスペースを入れてます)
不具合のものと同様に「テキスト＋改行の後にURL」を入力した場合は不具合が発生するのではないかと思います。
参考になれば幸いです。
This post was modified 4年前 2回 by 草村
わいひら reacted
Topic starter
2020-02-28 10:29
草村さん
ありがとうございます。確認したところ、たしかにJetpackでそのような設定になっていました。Jetpackは便利ですが使い方を気をつけないと行けないですね・・・。画像とかもWP上から画像を消してもJetpackのキャッシュにずっと残ってしまうこともあり、ちょっと利用するには慎重に設定しようと思います。
Akiraさん
ありがとうございます。私がhref属性の中にそれを指定しているわけではなく、意図せず出力されるタグに困っていました。否定演算子を入れることで解決できました。ありがとうございます。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。