現在デフォルトスキンとして「COLORS(ブルー)」を適用中。

TwitterとInstagramを埋め込むとブログカードとして扱われてしまう | Cocoonテーマに関する質問 | Cocoon フォーラム

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

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

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

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

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

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

フォーラムのTwitterアカウント(@CocoonForum)はこちら

スポンサーリンク
Share:

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


クッキー
 クッキー
(@クッキー)
ゲスト
参加: 2か月 前
投稿: 5
2019年9月30日 22:52  

いつもお世話になっております。
今回は、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)
メンバーサイト Admin
参加: 2年 前
投稿: 7100
わいひら - Facebookわいひら - Twitter
2019年9月30日 23:19  

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


クッキー
 クッキー
(@クッキー)
ゲスト
参加: 2か月 前
投稿: 5
2019年9月30日 23:46  

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

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

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


わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 7100
わいひら - Facebookわいひら - Twitter
2019年10月1日 19:27  

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

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


わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 7100
わいひら - Facebookわいひら - Twitter
2019年10月1日 19:28  

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


クッキー
 クッキー
(@クッキー)
ゲスト
参加: 2か月 前
投稿: 5
2019年10月2日 23:14  

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

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

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

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

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

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

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


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 3736
かうたっく - Facebookかうたっく - Twitterかうたっく - Google+
2019年10月3日 09:58  

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

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

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

 

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

同じ状況です。

 

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

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

 

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

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

  • キチンと表示される

 

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

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

 

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

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

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


わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 7100
わいひら - Facebookわいひら - Twitter
2019年10月3日 20:03  

不具合を再現することはできないので、ちょっとテスト的に外部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;
}); 
This post was modified 1か月 前 by わいひら

クッキー
 クッキー
(@クッキー)
ゲスト
参加: 2か月 前
投稿: 5
2019年10月4日 00:29  

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

>かうたっくさん
ありがとうございます。
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)
メンバーサイト Moderator
参加: 2年 前
投稿: 3736
かうたっく - Facebookかうたっく - Twitterかうたっく - Google+
2019年10月4日 09:53  

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

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

 

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


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 7100
わいひら - Facebookわいひら - Twitter
2019年10月4日 20:58  

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

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

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

This post was modified 1か月 前 2 times by わいひら

わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 7100
わいひら - Facebookわいひら - Twitter
2019年10月4日 21:06  

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

//ブログカード化しない外部リンクの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;
}); 

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

This post was modified 1か月 前 by わいひら

ロコ
(@lococo)
Reputable Member
参加: 2年 前
投稿: 483
2019年10月4日 23:13  

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

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

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

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

 

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


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 7100
わいひら - Facebookわいひら - Twitter
2019年10月4日 23:37  

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

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

This post was modified 1か月 前 by わいひら

かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 3736
かうたっく - Facebookかうたっく - Twitterかうたっく - Google+
2019年10月5日 11:37  

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

たしかに。

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

 

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

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

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


わいひら 件のいいね!
クッキー
 クッキー
(@クッキー)
ゲスト
参加: 2か月 前
投稿: 5
2019年10月5日 19:57  

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

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

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

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


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 7100
わいひら - Facebookわいひら - Twitter
2019年10月5日 22:55  

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


Share:
スポンサーリンク
わいひらをフォローする
おすすめサーバ

性能も兼ね備えながら安くブログ運営を開始したいのであればここ1択。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越しオプションあり(有料)
サービス運営期間:1年3ヶ月

1年以上の契約をする場合は、クーポンコード入力でさらに10%割引(※2019/12/31まで)。

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
△DBは7日分だけ無料復旧可能(ファイルは有料)
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可
サービス運営期間:16年

とにかく速い。サイトに表示スピードを求めるならココ。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DB復旧は無料(ファイルは有料)
○サーバ引っ越しツールあり
○サーバー料金をチャージ払いが可能
△新しいサービスなので運営櫪がまだ短い
サービス運営期間:1年1ヶ月

プラン変更で負荷対策が行えるので、ブログ向きのレンタルサーバーです。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
○サーバ引っ越しオプションあり(有料)
○サーバー料金をチャージ払いが可能
サービス運営期間:3年

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
サイトを続けるうちにアクセスが増えれば、プランのアップグレートで対応可能です。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越しオプションあり(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)
サービス運営期間:3年

Cocoon
  
動作中

ログイン または 登録 してください

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