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

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

【再】一部ツイッターの埋め込みが外部サ...
 
共有:
通知
すべてクリア

[解決済] 【再】一部ツイッターの埋め込みが外部サイトのブログカードに判定されてしまう

20 投稿
4 ユーザー
12 Reactions
4,838 表示
(@shthsh)
Eminent Member Registered
結合: 7年前
投稿: 42
Topic starter  

わいひら様

 

いつも大変お世話になっております。

先日下記トピックでツイッター埋め込みの不具合について質問させていただきましたが、また別サイトで同じ現象に見舞われましたのでご報告致します。

(時間が経過していますので別トピックを立てさせていただきました)

https://wp-cocoon.com/community/bugs/%E4%B8%80%E9%83%A8%E3%83%84%E3%82%A4%E3%83%83%E3%82%BF%E3%83%BC%E3%81%AE%E5%9F%8B%E3%82%81%E8%BE%BC%E3%81%BF%E3%81%8C%E5%A4%96%E9%83%A8%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AE%E3%83%96%E3%83%AD%E3%82%B0/

 

前述の通り、今回の不具合は前回質問させていただいたサイトとは別のサイトなのですが、また一部のツイッターの埋め込みが外部リンクのブログカードとして判定されてしまう現象が発生しました。

該当ページの画像、URLを添付しておきます。

http://ur0.link/OmUE

(※都合につき恐縮ですが有効期限一週間の短縮URLで掲載させていただきます)

 

今回の上記サイトも、cocoon実装当初は特に問題ありませんでしたが、時間が経ってから改めて記事を見直すと問題が発生していた、という感じです。

1サイトだけなら固有の事情があるのかと思うのですが、細かい設定が違う別サイトでも発生していましたので…何か解決策等ありましたら幸いです。

 

お手すきの際にご確認のほど、よろしくお願い致します。

 

----------------------------------------------
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-child-master
使用スキンURL:
Wordpressバージョン:4.9.8
PHPバージョン:7.0.30
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.110 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
言語:ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名:Cocoon
バージョン:1.4.5
カテゴリ数:12
タグ数:0
ユーザー数:2
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:0.0.4
----------------------------------------------
利用中のプラグイン:
AddQuicktag 2.5.3
AdSense Integration WP QUADS 1.8.2
Akismet Anti-Spam 4.1
Contact Form 7 5.0.5
Easy Watermark 0.7.0
EWWW Image Optimizer 4.5.1
Google XML Sitemaps 4.0.9
Jetpack by WordPress.com 6.7
No Self Pings 1.1.2
PS Auto Sitemap 1.1.9
Regenerate Thumbnails 3.0.2
Search Regex 1.4.16
TinyMCE Advanced 4.8.0
WebSub/PubSubHubbub 3.0.1
WP Multibyte Patch 2.8.1
YouTube Adds Pro 2.4.9
----------------------------------------------


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

お疲れ様です。Cocoon使用者の一般ピーポーですが、どうしても気になる?ってか不明点が多々ありまして。

 

実際にWordPressの記事:エディタにかいた文字列がどんなものか、今もですが

前回も不明です。

 

前回はどんな感じかも不明ですが、今見た感じでしたら

ツイッターの引用が連呼状態。これは前回とおなじでしょうか? ※前回、詳細な情報が分からないので、不明なままお伺いしてます。

 

なぜ

『合わせて読みたい』

のカスタマイズがされているのか?ですが、その辺、機能を駆使されたのか?何かしらしたかどうか?

 

Twitterの引用の重ねわざで、どこか狂ってしまった可能性として。ブログカードになってしまった部分の段落に、段落を加えてみるとどうかなるか?など試せばどうなるか?

 

あと何をためされたのか

平気だったけどその間に何か状況の変化;プラグイン・テーマ・wpの更新、どのに原因があるか。

 

不明点がたくさんあります。ご自身も同じ状況だとおもいます。それ以上に何をおこなったのか、コチラはもっと不明でもあるので、イロイロ試す必要がある気もします。

前回を見ると色んな人がチェックされたようですが、そのようにならないんですよね。って事で

 

  • プラグインの影響なのか?
  • 書きかた:ツイッターURLの段落連呼でTwitter側の引用がおかしくなったのか?
  • 他、そうなるサイトの共通点とか

なにかありますか?


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

同じ投稿内容でテストしようと思うので、よろしければ以下の方法で、記事のソースコードをいただいてよろしいでしょうか。
https://wp-cocoon.com/notepad-pw/


   
(@shthsh)
Eminent Member Registered
結合: 7年前
投稿: 42
Topic starter  

わいひら様

 

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

ソースコードURLを作成しましたので添付します。

http://ur0.link/OnBn

(一度公開すると削除できないとのことなので、こちらも期限付きの短縮URLで失礼致します)

 

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

 


   
(@shthsh)
Eminent Member Registered
結合: 7年前
投稿: 42
Topic starter  

かうたっく様

 

お世話になっております。

 

>実際にWordPressの記事:エディタにかいた文字列がどんなものか、今もですが前回も不明です。

「エディタに書いた文字列」というのは具体的にどの部分になりますでしょうか?

実際の記事URLとソースコードを今回添付させていただきました。

 

>前回はどんな感じかも不明ですが、今見た感じでしたらツイッターの引用が連呼状態。これは前回とおなじでしょうか? ※前回、詳細な情報が分からないので、不明なままお伺いしてます。

 

前回も今回も、複数のツイッター投稿を連続で埋め込み引用しております。

基本的にツイッター埋め込みは連投することが多いですが、個数は毎回違います。

また連投しても全く問題のないものがほとんどで、今回のような現象が起こるのは稀です。

 

>なぜ

>『合わせて読みたい』

>のカスタマイズがされているのか?ですが、その辺、機能を駆使されたのか?何かしらしたかどうか?

 

こちらはWEB上で公開されているコードを参考に、『外観>テーマの編集』からcocoon子テーマのCSSを上書きしております。

※下記サイトのコードをコピペしております。

https://s41t0h.jp/cocoon-blogcard/

 

>Twitterの引用の重ねわざで、どこか狂ってしまった可能性として。ブログカードになってしまった部分の段落に、段落を加えてみるとどうかなるか?など試せばどうなるか?

 

段落は加えても削除しても、問題解決しておりません。

また前回投稿させていただきましたように、一度問題が発生したツイッター投稿では同じ埋め込み直したり別の記事に丸々同じ内容をコピペしても直りません。

そもそも段落を加えずに投稿した状態で当初は問題がなく表示されているところ、ある日改めて見てみると現象が発生していますので、段落起因ではない別のトリガーがあるのかと推測しています。

 

>あと何をためされたのか

>平気だったけどその間に何か状況の変化;プラグイン・テーマ・wpの更新、どのに原因があるか。

 

こちらはいつ事象が発生していたのかわからないのですが…記事を投稿してから問題を確認するまでかなり時間が空いていますので、その間にプラグインやテーマ、WPの更新は全て行っていると思います。

 

その他共通点等は…正直推測が付きません。

ただ基本的には色々サイトを運営する中でほぼ同様の設定(導入プラグイン等)にしていまして、cocoon以外では同じプラグインを導入していても今回のような事象が起きているサイトがありませんので、cocoonと何かしらのプラグインや設定等が干渉しているかとは思います(ただしプラグインに関しては前回時点で全停止しても変わりませんでした)。

 

以上、よろしくお願い致します。


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

>実際にWordPressの記事:エディタにかいた文字列がどんなものか、今もですが前回も不明です。

「エディタに書いた文字列」というのは具体的にどの部分になりますでしょうか?

実際の記事URLとソースコードを今回添付させていただきました。

はじめの時点ではHTMLがありませんでした。

こちらでみれるのは展開されたHTMLです。それでは、どのように書いている不明と言うことでした。

 

クラシックエディタを使ってCSSを追加した状態で、テスト干渉で確認してもキチンと表示されたし、連続Twitter部分のみ記事に書いても問題ない状態です。

特に書きかたも変な所がないようにも思います。

 

cocoonと何かしらのプラグインや設定等が干渉しているかとは思います(ただしプラグインに関しては前回時点で全停止しても変わりませんでした)。

上記どおり同じようにならないんですよね。Cocoonブログカードの外部リンクも有効にしてるのですが。

プラグインとCocoonの干渉のほか、プラグイン同士とCocoonの干渉(どちらか1つであれば干渉しない)などもあったり、一時的に出たけどそれ以降は何の問題もないなど…それだけでなくほか、色んな場合があると思います。

なのでプラグインのない状況+カスタマイズが無い状況でご確認いただく(親テーマ状態での意味)のが王道かなっと思ったり。

 

あとはエックスサーバーの高速化が3つありますが、以下の設定をチェックしてOFFになっている状況で再度確認する以外には思い当たりません。

  • キャッシュの削除を行ったり
  • mod‗pagespeed(おそらくOFF)を停止したり
  • ブラウザのキャッシュをOFFの状況

 


   
わいひら reacted
草村
(@kusamura_mono)
Reputable Member Registered
結合: 6年前
投稿: 174
 

問題のブログで

  • 外部ブログカードをオフにしてみる
  • テーマをCocoon以外にしてみる

は試されましたか?

個人的な印象としてはWordPressが置換出来ずに取りこぼしたURLをCocoonがブログカードに置換しているだけで、Cocoonが悪さをしている感じがしないんですよね…。


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

僕の環境では、問題なく表示されているようです(添付画像)。
かといって、URLの記載方法も問題ないようです。
一番怪しいのは、Jetpackプラグインなんですよね。
以前Jetpackには、埋め込み機能があったので。
なので、もう一度以下のことを試してみていただいてよいでしょうか。

  1. Jetpackを無効にする(面倒かもですが)
  2. 該当投稿のビジュアルエディターで埋め込み表示されているか確認
  3. 公開ページの表示状態を確認する
  4. ブログカードで表示される場合は投稿を再ポストで確認する
  5. まだブログ数表示される場合は、同じ投稿内容でテスト的に新しく投稿してみて不具合が再現されるか確認する(確認後は削除)

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

まずは、問題の切り分けとして草村さんが書かれた「外部ブログカードの無効」は最初に試していただければと思います。


   
(@shthsh)
Eminent Member Registered
結合: 7年前
投稿: 42
Topic starter  

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

 

わいひら様 >

ご教示頂きました手順のテストを行いましたので結果をまとめて記載します。

 

1.外部ブログカードを無効化

→問題部分のツイッターのみ、埋め込み表示ではなくURL直書きの文字列として表示されました

 

2.Jetpackの無効化

→記事編集画面のビジュアルエディタ上ではJetpackの有効・無効化に関わらず問題のツイッターも正常に埋め込みとして表示されていました。

しかし実際の投稿ページではやはり埋め込みにはならず、この時点では外部ブログカードを無効化しているためURL文字列で表示されていました。

※この時点でいったん外部ブログカードをONに戻してみました

 

3.同投稿内で一度全て切り取り、再貼り付け後に更新

→状況は変わらずでした。

 

4.全く同内容で別記事として再投稿

→既存の記事のソースコードを全コピペ、新規投稿作成にて貼り付けすると正常に表示されました。

※現在は削除済みです

 

上記内容を総合すると、草村様の仰るようにWordPressでたまたまうまくツイッター埋め込みとして処理できなかったものがcocoonの外部ブログカード機能で処理されているような状況でしょうか。

そうなるとcocoon側としては外部ブログカードをOFFにするしか対応がないですか…?

OFFにしていればうまく表示されないときも最悪はただURLの記述になるだけなので今より見た目は違和感なくマシですし。

 

ただ今回の投稿記事も、前回フォーラムで報告させていただいた投稿記事も、元々は全て正常に埋め込み表示されていたものがあるとき気がつけば正常に表示されずURL表記になっているようなので…

完全にランダム?WordPressの気分?で表示できる・できないが変わると使いづらいですね…。

cocoon単体の問題では無さそうなので根本的解決は中々難しいかもしれませんが、外部ブログカードの表示も素敵な機能だと思いますので、埋め込みを埋め込みとしてしっかり制御できたら一番良いのですが。


   
(@shthsh)
Eminent Member Registered
結合: 7年前
投稿: 42
Topic starter  

外部ブログカードを停止状態にした投稿のキャプチャも添付しておきます。


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

1.外部ブログカードを無効化
→問題部分のツイッターのみ、埋め込み表示ではなくURL直書きの文字列として表示されました

2.Jetpackの無効化
→記事編集画面のビジュアルエディタ上ではJetpackの有効・無効化に関わらず問題のツイッターも正常に埋め込みとして表示されていました。

これらを見る限りでは、僕も草村さんと同様の推測になってしまいます。

「WordPress Twitter embed 表示されない」等で不具合を検索してみると、以下のようなものがヒットしました。
https://hyperts.net/wordpress-oembed-problem/
shthshさんの環境でも、TinyMCE Advancedを利用されているようなので、このプラグインとJetpackを無効にして投稿の更新をしてみて確認していただけますでしょうか。
全てのプラグインを無効にしてもダメだったみたいなので、この違うのかもしれませんが一応。


   
(@shthsh)
Eminent Member Registered
結合: 7年前
投稿: 42
Topic starter  

わいひら様

 

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

こちら確認が遅くなりまして申し訳ございません。

 

ご指示いただきましたJetpackとTinyMCEを停止して確認してみましたが、変わらずでした…。

何が原因かは不明ですが、やはりWordPress側で一部のツイッター埋め込みが正常に処理できなくなることがあって、それをcocoonが拾ってしまうとブログカードになってしまう…ということのようです。

最初から埋め込みできないならまだしも、最初は正常に埋め込みできているものがあるとき正常に機能しなくなる…という状況のせいで対処に困る感じですね…(しかもビジュアルエディタ上では正常に埋め込み表示されているのが余計に???状態で)。

 

根本的な対策はないのかもしれないのですが、cocoon側でブログカードの表示方法(URLの記述方法)を変更するなど、万一埋め込みが機能しない場合にもURLをブログカードとして拾わないように今後対応できそうであればご検討いただけますと幸いです。


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

どういう条件で、WordPressが埋め込み化できないかなどの、詳細な再現方法がわからないと、対応は難しいと思います。
自分の環境で不具合が再現できるものなら、トライ&エラーしながら改善することは可能かもしれませんが、推測ではちょっと対応できないと思います。


   
草村
(@kusamura_mono)
Reputable Member Registered
結合: 6年前
投稿: 174
 

お疲れ様です。

個人的にこの件の謎が気になっていて結局私も原因はよくわからないのですが、
WordPressが置換出来なかったURLを埋め込みツイートに置換出来る(かもしれない)コードを作成しました。

解説など長くなったのでブログで公開させていただきました。
不具合が再現出来ないので実際に上手く動作するかは不明です。
なので、もし試してみてもいいよって感じでしたらご確認ください。
https://web.monogusa-note.com/wordpress-twitter-replace

などと、コードを考えている途中で埋め込みがデータベースにキャッシュされている事がわかりました。
https://moriawase.net/blogcard-cache-delete

テスト環境で試した所、エディターと投稿でキャッシュが別に保存されているようでした。
もしかするとキャッシュを削除すればまたツイートを取得してくれるかもしれません。
ただ、なぜ途中でツイートが置換されなくなったのかは不明なので関係ないかもしれません。
※もしデータベースから削除される場合は他の大事なデータを消失しないよう慎重に行ってください。

長くなりましたが参考になれば幸いです。


   
(@shthsh)
Eminent Member Registered
結合: 7年前
投稿: 42
Topic starter  

草村様

 

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

さっそくコードを子テーマのfunctions.phpに張り付けたところ、埋め込みに置換されて表示されました!ありがとうございます!

スマホだとURL直書きと埋め込みコードのサイズ違いも無いですし、直書きで埋め込み処理に失敗してURLの文字列になっているだけよりも断然見栄えが良くなりました。

本当にありがとうございます。


   
わいひら and 草村 reacted
草村
(@kusamura_mono)
Reputable Member Registered
結合: 6年前
投稿: 174
 

こちらこそお試しくださりありがとうございました!

サイズの件ですがPCから見ると幅が少し違うようですね。
WordPressが出力する埋め込みの方は幅が指定されているみたいなのでコードの修正をしておきました。
↓が修正箇所になります。URLに引数を追加しています。

$json_url = 'https://publish.twitter.com/oembed?maxwidth=550&dnt=true&url='. urlencode($url);

これで多分幅が揃うかと思います。

根本的な原因がわからないままなのは気になる所ですが上手く動作したようでよかったです!


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

草村さんありがとうございます!
僕だったら、思いつかない方法です。
埋め込みデータもキャッシュ化されているとは知りませんでした。

それにしても、草村さんのサイトのカスタマイズ綺麗ですごく参考になります。
olを使ったタイムラインの表現方法とか、目から鱗です。


   
草村 reacted
(@shthsh)
Eminent Member Registered
結合: 7年前
投稿: 42
Topic starter  

草村様

修正版のコードを使ったところPC版の幅も綺麗に揃いました!

本当にありがとうございました!


   
わいひら and 草村 reacted
草村
(@kusamura_mono)
Reputable Member Registered
結合: 6年前
投稿: 174
 

わいひらさん>
リストのタイムラインは自分で装飾したので嬉しいです(*^^*)
お褒めの言葉をありがとうございます!

shthshさん>
修正後のコードでもちゃんと機能したようでよかったです!
今後また修正等あれば修正履歴に詳細を残しておきます。

お疲れ様でした!


   
わいひら reacted
共有:

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

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

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

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

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

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

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

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