Cocoonフォーラム

2018.02.102023.01.25

書き込みの前に以下の3点をご確認ください。

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

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

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

相談内容：

不具合の発生手順：

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

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

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

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

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

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

共有:

通知

すべてクリア

[解決済] ブログカードを無効にしても表示される

不具合報告

最新の投稿 : 匿名 5年前

22 投稿

5 ユーザー

4 Reactions

1,976 表示

未解決

RSS

上田進也

(@上田進也)

Active Member

結合: 5年前

投稿: 10

トピックスターター 2020年2月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

であり、全く関係のないカードが仕上がってしまっています。

ご面倒をおかけしますがご確認お願いします

わいひら

(@yhira)

Illustrious Memberサイト Admin

結合: 7年前

投稿: 17391

2020年2月25日 22:48

ちょっと不具合を再現できなかったので、同じ内容でテストしてみたいと思います。
よろしければ以下の方法で、投稿のソースコードをいただけますでしょうか。
https://wp-cocoon.com/notepad-pw/

あと、環境情報もいただければと思います。
https://wp-cocoon.com/theme-report/

上田進也

(@上田進也)

Active Member

結合: 5年前

投稿: 10

トピックスターター 2020年2月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
----------------------------------------------

以上がこちらの環境です。
この症状は今回、画像ページで発生しましたが、過去には通常の固定ページでも発生しました。
発生した際は、古い画像を削除したときに発生することがあったような気がします。（曖昧な記憶ですみません）以上、よろしくお願いいたします

わいひら

(@yhira)

Illustrious Memberサイト Admin

結合: 7年前

投稿: 17391

2020年2月25日 23:22

同じタグでないと意味がないので、こちらの方法で「ソースコード」をいただけますでしょうか。
https://wp-cocoon.com/notepad-pw/

上田進也

(@上田進也)

Active Member

結合: 5年前

投稿: 10

トピックスターター 2020年2月25日 23:41

返信ありがとうございます。

すみません、これは「投稿」でも「固定ページ」でもなく、「画像ページ」のため、先ほど提示したデータがソースコードになると思います。ソースコードの張り方がもしあれば、教えてください。

一応参考までに、画像ファイルを添付いたします。

以前この現象が発生したときは固定ページだったのですが、さすがにトップページでその現象を放置するわけにはいかないので即修正し、今は問題が発生していない状況のため、当時のコードは残っておりません。すみません・・・。現在問題が発生している「画像ページ」はあまりアクセスも無いはずなので、問題をあえて残したまま、今回フォーラムに投稿させていただきました。

対応が難しいですよね。すみません・・・。

もしまた同様の問題が、固定ページ、投稿ページで発生したときは改めてご連絡させていただきます。利用していた画像を削除した場合に発生しているような感じがしますが、再現を確認した訳ではありません。

わいひら

(@yhira)

Illustrious Memberサイト Admin

結合: 7年前

投稿: 17391

2020年2月26日 19:24

添付画像ページだったんですね失礼いたしました ?

僕の環境で同様に入力して添付ファイルページを見てみましたが、添付画像のようにおかしな表示にはならなかったです。

わいひら

(@yhira)

Illustrious Memberサイト Admin

結合: 7年前

投稿: 17391

2020年2月26日 19:26

それとともに、こちらのページの表示もおかしいですね。
https://nipo.sndbox.jp/idea/report
こちらの項目部分のソースコードはどうなっていますか？
※該当部分の見出しの部分だけで良いです。

上田進也

(@上田進也)

Active Member

結合: 5年前

投稿: 10

トピックスターター 2020年2月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>
 

わいひら

(@yhira)

Illustrious Memberサイト Admin

結合: 7年前

投稿: 17391

2020年2月27日 17:51

本来、同じ画像設定とソースコード設定で入力すると、

以下のように出力されるはずです。

わいひら

(@yhira)

Illustrious Memberサイト Admin

結合: 7年前

投稿: 17391

2020年2月27日 17:53

利用されているクラシックエディター上では、どのように表示されていますか？
通常だとこんな感じで表示されるはずだと思います。

わいひら

(@yhira)

Illustrious Memberサイト Admin

結合: 7年前

投稿: 17391

2020年2月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]

Akira

(@akira)

Famed Member Registered

結合: 7年前

投稿: 1657

2020年2月27日 18:19

https://nipo.sndbox.jp/idea/report

↑ のページの HTML を検証すると、このようなエラーが出ます。

</a>:開きタグがありません。

HTML が縮小されているため、場所がよく分かりません。ただ、「もちろん大丈夫、ちゃんとした対策があります」の下に a 閉じタグのみがあるように思えます。

この HTML エラーを修正されると、どうなるでしょうか。

この投稿は5年前 2回ずつAkiraに変更されました

わいひら reacted

上田進也

(@上田進也)

Active Member

結合: 5年前

投稿: 10

トピックスターター 2020年2月27日 22:17

わいひさらま

返信ありがとうございます。クラシックエディター上は問題なく表示されています。この問題は、画像ファイルの「説明文」にある

[

https://nipo.sndbox.jp/idea/report

]

の、最後のURLを消すことでバグ？は解消されました。画像の説明欄にURLを入れなければ問題は発生しないようです。画像の説明文に含まれるURLを何か誤って展開してしまっているのでしょうか・・・？

画像のページでも同様に、URLを消すことで問題は解消しました（この投稿を始めるきっかけとなった現象）

https://nipo.sndbox.jp/idea/report/attachment/pdfs

上田進也

(@上田進也)

Active Member

結合: 5年前

投稿: 10

トピックスターター 2020年2月27日 22:35

先ほど、動作確認もかねて別の画像、別のページで動作確認を行ったところ、同様のバグが発生しました。

試験ページ

https://nipo.sndbox.jp/other/shenameisalice

このページには2枚の画像を張ってみました。どちらの画像にも、画像の説明欄にURLを記載しています。

結果、「自身のWebサイト以外のURL」が説明欄にある場合正常に表示されるようです。自身のWebサイト内のURLでは、同様のバグが発生しました。

試験ページでご確認いただけます。（このページはアクセスが少ないので少しこのままにしておきます。）

上田進也

(@上田進也)

Active Member

結合: 5年前

投稿: 10

トピックスターター 2020年2月27日 22:40

Akira　さま

返信ありがとうございます。

アンカータグの閉じですが、テキストエディタからコードを確認したところ、見当たりませんでした。先ほど投稿しましたが、他のページで、他の画像を利用しても同様の問題が発生するため、タグの構文エラーの線は薄いと思います。

投稿した試験ページ

https://nipo.sndbox.jp/other/shenameisalice

上田進也

(@上田進也)

Active Member

結合: 5年前

投稿: 10

トピックスターター 2020年2月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枚しか添付できないようなので、とりあえずエラーが発生した方の画像を添付します

かうたっく

(@kautakku)

Illustrious Member Moderator

結合: 7年前

投稿: 4770

2020年2月27日 23:51

投稿者:: @上田進也

の説明欄にURLを記載しています。

結果、「自身のWebサイト以外のURL」が説明欄にある場合正常に表示されるようです。自身のWebサイト内のURLでは、同様のバグが発生しました。

画像ブロック系にある『説明』欄に、外部サイトurlを置くと問題ない。ってことですか？？

※Cocoon設定にあるブログカードの設定は、外部サイトはブログカードを無効にしているってことですか？？？

それで内部はブログカードを有効化している。って事であってますか？？？
これもCocoon設定

それであれば画像の　説明　欄の　URLの前に!を置くとどうなりますか？？？

https://wp-cocoon.com/not-blogcard/

あと、通常画像にリンクをつけてるのかな？？って印象です。Akiraさんの書き込みをみて思ったんですが

リンクaタグ内にブログカードのaタグが入ったことでおかしくなってるようにも思います。

猛烈なnaname読みでちがってるかもですが、試すとどうなりますか？？？

わいひら reacted

上田進也

(@上田進也)

Active Member

結合: 5年前

投稿: 10

トピックスターター 2020年2月28日 00:12

＞＞それであれば画像の　説明　欄の　URLの前に!を置くとどうなりますか？？？

!をつけることでエラーがでなくなりました。

ありがとうございます。

バグではなく仕様という認識でよろしいのでしょうか？

何にせよ助かりました。ありがとうございます。

Akira

(@akira)

Famed Member Registered

結合: 7年前

投稿: 1657

2020年2月28日 00:43

「画像の説明欄」とは、data-image-description で出力する部分でしょうか？

何か p タグや br タグ、a タグが見えますが、これが原因のように思えます。HTML がおかしいです。その部分にタグは書けません。

というか、data-image-description って何でしょう？何かのプラグインの機能でしょうか？

あと、HTML をお書きになる際は、notepad.pw にお書きください。それと、ご質問の際は、HTML の縮小を無効にして頂けるとありがたいです。

この投稿は5年前 2回ずつAkiraに変更されました

わいひら reacted

草村

(@kusamura_mono)

Reputable Member Registered

結合: 6年前

投稿: 174

2020年2月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」を入力した場合は不具合が発生するのではないかと思います。

参考になれば幸いです。

この投稿は5年前 2回ずつ草村に変更されました

わいひら reacted

かうたっく

(@kautakku)

Illustrious Member Moderator

結合: 7年前

投稿: 4770

2020年2月28日 01:23

草村さん

仕事が早い ? ? ?

見たことないコードだったんで、てこずった部分だけど

プラグインの仕様だったのか…

ブロック機能に追加されたのか？？って思ってました。

上田進也

(@上田進也)

Active Member

結合: 5年前

投稿: 10

トピックスターター 2020年2月28日 10:29

草村さん

ありがとうございます。確認したところ、たしかにJetpackでそのような設定になっていました。Jetpackは便利ですが使い方を気をつけないと行けないですね・・・。画像とかもWP上から画像を消してもJetpackのキャッシュにずっと残ってしまうこともあり、ちょっと利用するには慎重に設定しようと思います。

Akiraさん

ありがとうございます。私がhref属性の中にそれを指定しているわけではなく、意図せず出力されるタグに困っていました。否定演算子を入れることで解決できました。ありがとうございます。