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カスタマイズ依頼

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

共有:
通知
すべてクリア

[解決済] TwitterとInstagramを埋め込むとブログカードとして扱われてしまう

17 投稿
4 ユーザー
4 Reactions
3,482 表示
(@クッキー)
Active Member
結合: 5年前
投稿: 5
トピックスターター  

いつもお世話になっております。
今回は、TwitterとInstagramの埋め込みエラーについて質問させていただきます。

TwitterとInstagramの埋め込みたい投稿のURLを貼り付け、埋め込むとブログカードに変換されてしまうことがあります。(添付画像)

URLを貼り付け、埋め込むと下記のようなHTMLに変換され、ブログカード用のURLとして認識されてしまいます。
<figure class="wp-block-embed-twitter wp-block-embed is-type-rich is-provider-twitter">

[ツイッターURL]

</figure>

ツイッターやインスタグラムのURLをブログカードとして認識されないようにすることは可能でしょうか。よろしくお願いいたします。

[対象の記事]
https://tamu-home.com/korea-information2
https://tamu-home.com/yokohama-cafe

----------------------------------------------
サイト名:TAMU HOME
サイトURL: https://tamu-home.com
ホームURL: https://tamu-home.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
スキン:/wp-content/themes/cocoon-master/skins/skin-ganchan13/style.css
Wordpressバージョン:5.2.3
PHPバージョン:7.2.17
ブラウザ:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/76.0.3809.100 Chrome/76.0.3809.100 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
言語:ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名:Cocoon
バージョン:1.9.8
カテゴリ数:18
タグ数:0
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.0.8
----------------------------------------------
Gutenberg:1
AMP:0
PWA:0
Auto Post Thumbnail:0
ホームイメージ:/wp-content/uploads/2019/08/TAMU-HOME-2.png
----------------------------------------------
ブラウザキャッシュ有効化:0
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:0
WEBフォントLazy Load:0
JavaScript(フッター):1
----------------------------------------------
利用中のプラグイン:
AddQuicktag 2.5.3
AdSense Invalid Click Protector 1.2.3
Advanced Ads 1.14.10
Akismet Anti-Spam 4.1.2
All In One SEO Pack 3.2.9
Autoptimize 2.5.1
Category Order and Taxonomy Terms Order 1.5.7
Contact Form 7 5.1.4
EWWW Image Optimizer 5.0.0
Google XML Sitemaps 4.1.0
Instagram Feed 1.12.2
Lazy Load 0.6.1
Login rebuilder 2.6.3
Rinker 1.5.1
Table of Contents Plus 1601
TablePress 1.9.2
----------------------------------------------


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

現在どのようにTwitterやinstagramが埋め込まれているのか、以下の方法でソースコードをアップしていただいてよろしいでしょうか。
https://wp-cocoon.com/notepad-pw/


   
(@クッキー)
Active Member
結合: 5年前
投稿: 5
トピックスターター  

ご回答ありがとうございます。
URLはこちらです。
https://notepad.pw/share/pbeqfe8e
https://notepad.pw/share/pbeqfe8e

なお、貼付け時にはこちらの添付ファイルのビジュアルエディタのブロックを使用して貼り付けています。
以前まではこちらのやり方で正しく表示されていました。

よろしくお願いいたします。


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

僕の環境で試してみたのですが、普通にInstagramは、Instagram埋め込みとして表示されるようです。

1度、全てのプラグインを無効にして試すとどうなりますか?


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

ちなみに、ブロックエディター上では添付画像のように埋め込み形式で表示されていますか?


   
(@クッキー)
Active Member
結合: 5年前
投稿: 5
トピックスターター  

返信ありがとうございます!
いろいろ検証していたので返信が遅くなってしまいました。

全てのプラグインの無効化を試してみましたが、変化はありませんでした。
念の為キャッシュもクリアしてみましたが、こちらも変化はなしです。

そして、前の返信でnotepad.pwのリンクを同じもの貼ってしまっていました。
すみません...インスタがブログカードになるものは正しくはこちらです。
https://notepad.pw/share/3408jlhl

> ちなみに、ブロックエディター上では添付画像のように埋め込み形式で表示されていますか?

はい、ブロックエディター上では正しく表示されています。
プレビュー上や記事を更新するとブログカードになってしまうようです。
不思議な点は、試しに新しく投稿を追加し、そこに同じツイートやインスタグラムの投稿を埋め込んでみたところ、そこでは正常に表示されました。
しかし、問題の起きている記事内では何回か挿入し直しましたが、ブログカードとして表示されてしまいます...。

添付にブロックエディターでの表示とプレビューでの表示のスクショを載せてみますね。

よろしくお願い致します。


   
かうたっく
(@kautakku)
Illustrious Member Moderator
結合: 7年前
投稿: 4770
 

ツイッターやインスタグラムのURLをブログカードとして認識されないようにすることは可能でしょうか。

はい、ブロックエディター上では正しく表示されています。
プレビュー上や記事を更新するとブログカードになってしまうようです。
不思議な点は、試しに新しく投稿を追加し、そこに同じツイートやインスタグラムの投稿を埋め込んでみたところ、そこでは正常に表示されました。
しかし、問題の起きている記事内では何回か挿入し直しましたが、ブログカードとして表示されてしまいます...。

ずっと前、いつからかは覚えてませんが、この症状はありましたよ。※Cocoonを使ってからの話。数ヵ月前??位だったか??

 

“試しに新しく投稿を追加し、そこに同じツイートやインスタグラムの投稿を埋め込んでみたところ、そこでは正常に表示”

同じ状況です。

 

  • わたしも正常に表示されていたけどブログカード化されてしまう状況を再現できません。
  • 親テーマを有効化しても同じ(ってか、子テーマでカスタマイズを行ってないから当たり前だけど)
  • 先方(Twitterやインスタ、またはツイート主)になにか原因があるって思ったりも?

前は表示されていたにも関わらず、知らない間にブログカード化される。

 

  • 何をどうしようにも、リンクを置いている公式ツイート・公式インスタがブログカードに。

原因が不明だから、ツイート・インスタの該当リンクを置く方法をやめて、ブログに埋め込む方法をとった結果。

  • キチンと表示される

 

(一般ユーザーのツイート・インスタではなく、記事で書いている)公式ページがそうなっているので、より多く紹介してもらいたいはずの先方の設定 の問題かどうかも不明です?

※該当公式ページ、またはツイッター・インスタ側にに問い合わすのも面倒だったんで。

 

原因を追究する手間を考えたら

  • ただリンクを置く方法ではなく
  • ブログに埋め込みツイート的な方法をとった方が早いと思います。

原因を追究していただけたら助かりますけど現状、自力対策済みなので何も問題ない状態。って感じです。


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

不具合を再現することはできないので、ちょっとテスト的に外部URLの除外機能をつけてみました。
------------------------------------------------
https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------
上記のファイルでアップデートして、その後子テーマのfunctions.phpに以下を追記するとどうなりますか?

//ブログカード化しない外部リンクのURL(もしくはURLの一部)を登録する
add_filter('exclusion_external_blog_card_urls', function ($urls){
  $urls[] = 'https://www.instagram.com/';
  $urls[] = 'https://twitter.com/';
  //$urls[] = 'https://www.yahoo.co.jp';
  return $urls;
}); 

   
(@クッキー)
Active Member
結合: 5年前
投稿: 5
トピックスターター  

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

>かうたっくさん
ありがとうございます。
URLでツイートやインスタを埋め込む方法ではなく、埋め込みコードを使って埋め込む方法も試してみたのですが、その場合ブログカードにはならないものの、引用符が付いて表示されてしまうのです...。
(引用符が付く場合と正常に表示される場合があるので、いろいろ工夫してみれば自己解決できそうな気もします)

>わいひらさん
ありがとうございます。やってみました。

テーマを最新化してfunctions.phpに該当の記載をしたところ、ブロックエディターでは正常に表示されていますが、プレビューではURLのみが表示されるようになり、記事自体が表示されなくなりました。(添付画像参照)

関係があるかはわかりませんが、twitterの埋め込みをHTML形式で編集して、URLの最後をバックスラッシュにすると、ブログカード化しなくなります。逆にインスタは最後のバックスラッシュを消すとブログカード化しなくなります。

[s=20をs=20/に変更]
<figure class="wp-block-embed-twitter wp-block-embed is-type-rich is-provider-twitter">

</figure>

[Bssc7-8lixk/をBssc7-8lixkに変更]
<figure class="wp-block-embed-instagram wp-block-embed is-type-rich is-provider-instagram">

</figure>
よろしくお願いいたします。


   
かうたっく
(@kautakku)
Illustrious Member Moderator
結合: 7年前
投稿: 4770
 

URLでツイートやインスタを埋め込む方法ではなく、埋め込みコードを使って埋め込む方法も試してみたのですが、その場合ブログカードにはならないものの、引用符が付いて表示されてしまうのです...。
(引用符が付く場合と正常に表示される場合があるので、いろいろ工夫してみれば自己解決できそうな気もします)

状況がわからないのですが、公開されたページであれば、ブラウザの設定によって(例えばjsを拒否してる:アクセス拒否・アドセンス拒否をしているのであれば)ただのHTMLである引用が表示されるかと思われます。

 

ただテーマ側が対応してくれるようなので、埋め込みコードをHTMLにわざわざ貼る必要はなさそうですね^^


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

先にブログカード化されてしまうのが原因かと思って、ブログカードにしないコードを仕込んでみたのですが、そのURLは「埋め込み」にしてくれないんですね…。

そしたら、カスタマイズコードは削除してください。
その後、Twitter・Instagram埋め込み以外は動作するのか、YouTube動画のURLを試しに挿入して公開ページで表示されるか確認だけしていただいてよろしいでしょうか(確認が元に戻して大丈夫です)。

例えばこういうURL。
https://www.youtube.com/watch?v=nxz-UjcoJ5k


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

ちなみに、正常に埋め込み表示される環境では、以下のカスタマイズを行ったとしても、埋め込みとして表示されるようです。

//ブログカード化しない外部リンクのURL(もしくはURLの一部)を登録する
add_filter('exclusion_external_blog_card_urls', function ($urls){
  $urls[] = 'https://www.instagram.com/';
  $urls[] = 'https://twitter.com/';
  //$urls[] = 'https://www.yahoo.co.jp';
  return $urls;
}); 

だとしたら、何かしらが原因で埋め込みの公開ページで動作していないということになるようです。
埋め込みが正常表示されないページで、何か他と変わった設定にしているということはないですか?
何か些細なことでも思いつくことがあれば、教えていただけると幸いです。


   
ろこ
(@lococo)
Prominent Member Registered
結合: 7年前
投稿: 830
 

詳しくは見ていませんが、

はい、ブロックエディター上では正しく表示されています。
プレビュー上や記事を更新するとブログカードになってしまうようです。
不思議な点は、試しに新しく投稿を追加し、そこに同じツイートやインスタグラムの投稿を埋め込んでみたところ、そこでは正常に表示されました。

とのことなので、oEmbed APIから埋め込み用HTMLがうまく取得できなかった状態でのキャッシュが残っているのかもしれません。

WordPressのoEmbed機能では、投稿記事単位で埋め込みURLベースのキャッシュが行われます。

 

あと、フィルターのpriorityはoEmbedが先、Cocoonのブログカードが後なので、ブログカードがoEmbedに影響することはないと思います。


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

oEmbedのキャッシュの削除はphpMyAdminからこんな感じでできるっぽいですね。
https://siteorigin.com/clearing-oembed-cache/

※データベースを直接いじるので、適当にやってしまうとDB内容に影響を与えてしまう恐れがあります。なのでDBバックアップは重要です。お使いのエックスサーバーなら、確か7日間はデータベース復旧が無料なので、盛大に失敗したとしても一日前に戻すことはできるとは思いますが。


   
かうたっく
(@kautakku)
Illustrious Member Moderator
結合: 7年前
投稿: 4770
 

oEmbedのキャッシュの削除はphpMyAdminからこんな感じでできるっぽいですね。
https://siteorigin.com/clearing-oembed-cache/

たしかに。

以前にも誰かが、このことを書いていたような気がします!

 

なのでDBバックアップは重要です。お使いのエックスサーバーなら、確か7日間はデータベース復旧が無料なので、盛大に失敗したとしても一日前に戻すことはできるとは思いますが。

ページ内容的には"wp_postmeta" hoge_postmetaだけ選択してバックアップをとってる方が、万が一のとき復元したい場合、データ量も少ないし良いかもですね!

エックスサーバーって、7日間は復元無料だったんですね??※知らなかった


   
わいひら reacted
(@クッキー)
Active Member
結合: 5年前
投稿: 5
トピックスターター  

ロコさん、わいひらさん、かうたっくさん
ご返信ありがとうございます

oEmbedのキャッシュの削除をやってみたところ、無事に該当のページが直りました!

エックスサーバーが7日間データベース復旧が無料だったのは私も知りませんでした。
教えていただきありがとうございます!

皆様のおかげで無事に問題を解決することができました。
本当にありがとうございました!


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

ということは、WordPressデフォルトの不具合っぽいですね。
まさか、異常キャッシュが残っているとそんなことになるとは。
ロコさん、教えていただきありがとうございます。


   
共有:

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

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

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

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

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

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

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

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