私はツイッターをやったこともないし、自分のサイトに埋め込んだこともないので、間違っているかもしれないのですが・・

サイトのソースコードを拝見しますと、埋め込みコードの最後の方のJavaScriptのコードが見当たらないみたいです。

ツイッターのコードの場所を貼り直したなどの理由で、JavaScriptのコードが抜けちゃったというような可能性はございませんか？

JavaScriptのコードを後ろに付けて、ローカルのテストサイトに貼り付けてみたら、ちゃんと表示されました。

参考にさせていただいたサイト

特定のツイートを記事に埋め込む方法とカスタマイズ

JavaScriptのコードがここにうまく貼れないので、上記のサイトを参考にしてください。

JavaScriptのコード

これ使えばいいのか・・

leafytreeさま

　ご連絡ありがとうございます。感謝します。

　ご指摘のありましたコードの件、初心者なので正確なお答えになっているか分かりませんが、投稿画面を確認する限り、JavaScriptのコードはあるようです。写真を添付します。にもかかわらず、最初の投稿に添付したような引用画面のような表示なってしまっています。

　なお、もう一つファイルを添付しましたように、当該ブログ記事の最後の方では「ＨＴＭＬの入力画面」ではなく、「ツイッターのＵＲＬを貼りつける入力画面」を利用して埋め込みを試みましたが、同様に引用画面のような表示になってしまいます。

　ちなみに、投稿画面の段階ではちゃんとツイッターのフォーマットで表示されるのですが、プレビューや、公開された記事では、引用画面のような表示となってしまいます。

　どうしたなのでしょう。。

すみません、ファイルを２つ添付できないようでしたので、二つ目のキャプチャを添付します。

すみません。今、出先なので、確認出来ないのですが、カスタムhtmlのブロックで貼り付けると、どうでしょう？

leafytreeさま

　ご連絡ありがとうございます。

　初心者なので理解が悪くてすみません。先ほど添付した形が「カスタムhtmlのブロック」ということではないのでしょうか。もういちど貼りつけますね。こちらの方法でもうまく表示されません。

@amy さん

すみません、出先だったので、よく確認していませんでした。

先に試したときは、ブロックエディターではなかったので、ブロックエディターでも試してみますね。

Amyさん、こんにちは。

投稿者:: @amy

投稿画面を確認する限り、JavaScriptのコードはあるようです。写真を添付します。

僕の環境でおっしゃっているページを確認し、ページのソースから該当のscriptコードを検索してもヒットしません。少なくとも最終的な完成ページには出力されていないようです。

1. 投稿の編集画面（のソースエディタ）でちゃんと出力されているか
2. プレビューしたときはどうなるか

の２点を確認してみてください。ここで差異がある場合、WordPressがJavaScriptのコードをなんらか制御しているパターンだと思います。

※プレビュー上でソースを見るには、ブラウザ上で右クリック→「ページのソースを表示」などをクリックしてみてください。もしくは[Ctrl] + [U]でもOK。

ブロックエディターのツイッター埋め込みのブロックで

 https://twitter.com/yuka_kuwahata/status/1213025176092315648?ref_src=twsrc%5Etfw 

を貼り付けたら、正常に表示されました。

でも、Amyさんも同じようにやっているんですよね？

URLの後ろの方が画像にないので、ちょっとわかりませんけども。

もう少し試してみます。

あれ？よく見るとURLが前の方でも違いますよね？

Aｍｙさんの画像は、また別のツイッター記事でしょうか？

私と同じURLだと、どうなりますでしょうか？

カスタムHTMLブロックに貼り付けてみたのですが、私のテスト環境では、ちゃんと表示されてしまうんですよね。

ちなみに、AmyさんのHTMLブロック？に貼り付けた画像をみると、JavaScriptのタグが上にもありますよね？

もう一度、ツイッターから埋め込みコードを取得し直してカスタムHTMLブロックに貼り付けて、試してみてもいいのかもしれません。

Amyさんは、テキストエディタは、何をお使いですか？

僕の環境でも、Twitter埋め込みブロックを利用して試してみましたが、普通に表示されます。

今回のこととは関係ないかもしれませんが、親テーマのみで利用されているようです。
サイト運営をする上では、子テーマの利用を推奨いたします。

テンプレートURL：/wp-content/themes/cocoon-master
スタイルシートURL：/wp-content/themes/cocoon-master

試しに子テーマを有効化して表示させてみるとどうなりますか？
https://wp-cocoon.com/theme-install/
※テーマ変更で変わるかどうかの確認もあります。

@mirumi

みるみさま

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

1. 投稿の編集画面（のソースエディタ）でちゃんと出力されているか
2. プレビューしたときはどうなるか

１．→初心者なのでとんちんかんなことを言っていたらすみません。「投稿の編集画面（のソースエディタ）」というのは、添付の画面のことでしょうか。scriptコードは、ちゃんと記載されているようです。

２．→「ＨＴＭＬ」のすぐ右側の「プレビュー」をクリックすると、ツイッターのフォーマットでちゃんと表示されます。ただ、画面右上の「プレビュー」をクリックすると、やはり引用画面のような表示になってしまいます。

「WordPressがJavaScriptのコードをなんらか制御しているパターン」なのでしょうか。この場合、対処法はあるものなのでしょうか。

みるみさんがソースエディタと言っているのは、たぶんコードエディタのことだと思います。

@leafytree

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

ややこしくてすみません。添付したツイッターの埋め込みブロックは、また別のＵＲＬです。当該ブログ記事の下の方にも、別のツイッター投稿を埋め込もうとしたのですが、こちらも同じようにうまく表示されないのです。

＞私と同じURLだと、どうなりますでしょうか？

→やはりダメなのです。

＞もう一度、ツイッターから埋め込みコードを取得し直してカスタムHTMLブロックに貼り付けて、試してみてもいいのかもしれません。

→貼り直して更新してみましたが、やはりダメでした

＞Amyさんは、テキストエディタは、何をお使いですか？

→すみません、テキストエディタというのは何のことでしょう。秀丸とかのことでしょうか。普段はウィンドウズの「メモ帳」を使っています。答えになっているでしょうか。。

今回貼り付けたコードは、一旦、メモ帳に保存したりしていますか？

leafytreeさま

みるみさま

　大変失礼しました。ソースエディタ、コードエディタにも出力されているようです。

@leafytreeさま

いえ、ツイッターでコピーをし、そのままWordPressに貼りつけていました。いったん保存した方がよいのでしょうか。

@yhiraさま

子テーマを使用しているつもりでしたが、有効化されていなかったのでしょうか。。。

@amy さん

いいえ、直接貼り付けているのでしたら、それで大丈夫かと思います。

コードディタにもスクリプトタグがありますね。

うーん、ちょっと難しい・・・

@yhiraさま

いまいちど子テーマの「有効化」をクリックしてみましたが、それでもツイッター投稿はうまく表示されていません。

子テーマが有効化されたようですね。

いままでは、親テーマをお使いになっていたようです。

わいひらさんになにか考えがあるようですので、この状態のまま、アドバイスをお待ちになるのが良いかと思います。

@leafytreeさま

ご連絡ありがとうございます。

これまで、子テーマが有効化されていなかったということでしょうか。何も支障がないといいのですが。

最初の投稿で触れましたが、かんたんリンクの掲載を増やすにつれてツイッターの表示がおかしくなったので、素人意見ではあるものの、客観的には、このかんたんリンクとの関係に原因があると思っています。

同じ環境で、かんたんリンクを２つから３つに増やしたところで表示がおかしくなりましたので。

ただ、かんたんリンクがゼロか１つかで不具合の有無が異なるのであれば分かりやすいものの、２つなら良くて３つだとダメというのが、よくわからないところです。

あきらめた方がよさそうですね。。

@amy さん

子テーマを推奨する理由は、ユーザーがカスタマイズした部分が、親テーマのアップデートによって、リセットされてしまうのを避けるということだと思います。

せっかくカスタマイズしたのに、保存もされずにリセットされたら、困りますよね。

かんたんリンクは、私も使っていますが、いままで特に問題が生じたことはないんです。

今回は、どうかわかりませんが・・

かんたんリンクとの因果関係も含めて、わいひらさんの意見を聞くのが一番かと思います。

即、解決とはいかないかもしれませんが、このフォーラムには、スキルの高い方がいらっしゃるので、いま、調べているところかもしれませんよ。

@leafytreeさま

ありがとうございます。

本当にお詳しくて優しい方が多くて心強い限りです。私もいつかブログ運営者のみなさんに恩返しができるよう、ひび努力したいと思います:)

HTML ソースを確認すると、MoshimoAffiliateEasyLink と確認できます。

この MoshimoAffiliateEasyLink のいくつかで、ID が重複しています。ID は、1 ページにつき 1 つしか使えません。

MoshimoAffiliateEasyLink で実行される JavaScript がどういうものか知りませんが、ID を目印に動いているのは想像できます。もしかすると、ID の重複により JavaScript が誤作動しているのかもしれません。

ID の重複を解消すると、どうなるでしょうか。

どの ID が重複しているかは、Markup Validation Service の検証で分かります。重複箇所には、このようなエラーが出ます。

Error　Duplicate ID xxxxxx

Amyさん

私もローカルのテストサイトにAmyさんのかんたんリンクのコードを３つ貼り付けて表示してみました。

すると、Amyさんのサイトと同じ表示になってしまいました。

Cocoon設定の「高速化」の設定で「スクリプトの設定」の「JavaScriptをフッターで読み込む」のチェックを外して「変更を保存」のボタンをクリックしてみてください。

たぶんそれで、上手く表示されるかと思います。

やはり、かんたんリンクと関係ありそうですね。

もう一度環境情報を貼っていただいてよろしいでしょうか。
加えて試しに新しい記事を作成して、Twitterの埋め込みだけを記入して動作確認すると表示されるんですよね？

あと、高速化設定の「JavaScriptをフッターで読み込む」を無効化するとどうなりますでしょうか。

@leafytree

ああ、leafytreeさんと書き込みがかぶった ? 

同じく、わいひらさんと被った。

みなさま

　ご助言ありがとうございます。これからご指摘されたとおりに幾つか試しますが、取り急ぎ、環境情報をいまいちど貼りつけます。

----------------------------------------------
サイト名：Amy’s Blog（あみぶろ）
サイトURL： https://globalkidsmedia.com
ホームURL： https://globalkidsmedia.com
コンテンツURL：/wp-content
インクルードURL：/wp-includes/
テンプレートURL：/wp-content/themes/cocoon-master
スタイルシートURL：/wp-content/themes/cocoon-master
スキン：/wp-content/themes/cocoon-master/skins/skin-colors-blue/style.css
WordPressバージョン：5.3.2
PHPバージョン：7.2.27
ブラウザ：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,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名：Cocoon
バージョン：2.1.1.3
カテゴリ数：2
タグ数：1
ユーザー数：1
----------------------------------------------
Gutenberg：1
AMP：0
PWA：0
Font Awesome：4
Auto Post Thumbnail：0
Retina：0
ホームイメージ：/wp-content/uploads/2020/01/ホームイメージ-1.jpg
----------------------------------------------
ブラウザキャッシュ有効化：0
HTML縮小化：0
CSS縮小化：0
JavaScript縮小化：0
Lazy Load：0
WEBフォントLazy Load：0
JavaScript（フッター）：1
----------------------------------------------
利用中のプラグイン：
Akismet Anti-Spam 4.1.3
All In One SEO Pack 3.3.5
Broken Link Checker 1.11.11
Contact Form 7 5.1.6
Edit Author Slug 1.6.1
EWWW Image Optimizer 5.2.2
Google XML Sitemaps 4.1.0
Regenerate Thumbnails 3.1.3
----------------------------------------------

leafytreeさま

わいひらさま

　「JavaScriptをフッターで読み込む」を無効化したら、ツイッター投稿が無事に表示されました！　本当に有り難うございます。

Akiraさま

　同様にご助言いただきまして有り難うございます。素人すぎてMarkup Validation Serviceの使い方が分かりませんでしたが、やはりＩＤの重複が原因だったのでしょうか。

みなさま

　見ず知らずの素人のために骨を折っていただきまして、本当に心より感謝いたします。

　初心者には理由がよくわかりませんが、今後のためにも、可能な範囲でご解説いただけますと非常に助かります。理由の説明が難しい場合でも、同じような不具合を再発させないため、今後気をつけるべき点をご教示いただけましたら幸いです。

みなさま

　ちなみに、子テーマは無事に有効化されていますでしょうか。

　青色のスキンをずっと使用していたのですが、子テーマのことを言及されたので、あらためて子テーマの有効化ボタンをクリックしたところ、いったんスキンが真っ白（恐らくいったん初期化されたのかと）になってしまいました。その後に、あらためて有効化ボタンをおすなどしたら、元の青色に戻りました。

　これまでも子テーマを使用していたつもりでした（外観→テーマエディター→「編集するテーマを選択」を「cocoon child」にして、「cocoon child」のスタイルシートをいじろうとしたこともありました）が、何か不具合があったのでしょうか。

@amy さん

私のサイトも「JavaScriptをフッターで読み込む」は無効にしています。（かんたんリンクも使っているので）

有効にした方がより高速化されるのかと思いますが、特に支障は感じません。

かんたんリンクを３つ貼ったらツイッターの表示がおかしくなった、のであれば、最初から３つ貼ってテストしてみれば良いものを、時間がかかってしまい、恐縮です。

親テーマ、子テーマの件ですが、現在は、たぶん親テーマが有効になっている状態だと思います。

と、言うのも、カスタマイズのCSSは、親テーマのダッシュボードの「外観」→「カスタマイズ」→「追加CSS」に設定されている様子だからです。

子テーマには、カスタマイズのCSSが設定されていないので、子テーマを有効化するとサイトの外見が変わってしまう可能性があります。

既に多少カスタマイズされていらっしゃるようですので、サイトの外見を保ったまま、子テーマに移行するのは、コツが要ります。

大雑把に書くと

◆カスタマイズしたCSSの親テーマから子テーマへの引っ越し（コピペ）

◆親テーマのCocoon設定のエクスポート

◆親テーマからエクスポートしたCocoon設定を子テーマにインポート

こんなイメージです。

質問の内容が変わると、別のトピックを立てる決まりになっていますので、お手数ですが、改めてトピックを立ててくださいますようお願いいたします。

実際に試したところ、ID の重複を解消してもダメでした。ただ、ID の重複は避けるのをおすすめします。

原因は、もしもアフィリエイトの「かんたんリンク」が生成する JavaScript 。こいつが悪さをしています。

「JavaScriptをフッターで読み込む」が無効であれば、問題は起きない気はします。

一応、有効にしても Twitter を表示する方法はありました。ただ、やり方がちょっと面倒です。

子テーマは無事に有効化されていますでしょうか。

有効になっていますが、問題があります。

子テーマの style.css が読み込まれていません。もしかして、削除されてはいませんか？

外観→テーマエディター→「編集するテーマを選択」を「cocoon child」にして、「cocoon child」のスタイルシートをいじろうとしたこと

もしよろしければ、↑ と同じ画面のスクリーンショットをいただけないでしょうか。

@akira さん

環境情報やソースコードを見ると、親テーマに戻っているのではと思いましたが、いかがでしょう？

急に子テーマにすると、ちょっと問題ありそうなので・・

申し訳ありません。子テーマは有効になっていませんね。

head 内で cocoon-child-keyframes-css とあったので、子テーマが有効になっていると勘違いしました。

スクリーンショットは必要ありませんでした。

@akira さん

「ID の重複」とても勉強になります。

@akira さま

@leafytreeさま

　すみません、少しだけ外しておりました。

　ご解説ありがとうございます。子テーマがうまく反映されていませんでしたか。一部を削除してしまっている可能性があるとのこと。心配ですね。

　ご助言通り、新たなスレッドを立てたいと思います。

みなさま

　また、ツイッターの表示につきましては、詳しいことは理解できないものの、とりあえず「JavaScriptをフッターで読み込む」を無効にしたままでも大きな支障はないとのことですので、このまま様子を見たいと思います。ＩＤの重複につきましては、問題がありそうですが、とりあえずは応急措置である「JavaScriptをフッターで読み込む」の無効化で乗り切りたいと思います。本当に有り難うございました。

みなさま

　新たなスレッドを立てさせていただきました。　t.ly/7OLKA

　お手すきの時にのぞいてみていただけましたら幸いです。