サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2020-03-01 06:36
こんにちは。初心者です。宜しくお願いいたします。
ブログ記事に、他人のツイッター投稿を埋め込んだところ、引用画面のような形で表示され、ツイッターのフォーマットで表示されません。
ひょっとすると、これはCocoonとは関係のない理由によるものかもしれませんが、何が原因か、どこに聞けばいいのか、恥ずかしながら分からなかったため、こちらに投稿させていただきました。
考えられる原因を特定し、問題を解決する方法をご助言いただけましたら幸いです。
＝＝＝
当該ブログ記事は、こちらです。
https://globalkidsmedia.com/entry/london-lionking
うまく表示されない状態のツイッター投稿のキャプチャも添付します。
環境情報は下に貼りつけました。
＝＝＝
ちなみに、いくつか関連情報を参考までに列挙します。
１）新しい投稿ページで同じツイーター投稿を埋め込むと、ちゃんとツイッターのフォーマットで表示されます（このため、当該記事のいずれかの文章や添付ファイルなどが影響している可能性があります）
２）新しい投稿ページで同じツイッター投稿を埋め込み、ちゃんと表示される状態で、当該記事のタイトルから順番に、同じ内容を最初から順番に打ち込んでいったところ、もしもアフィリエイトのかんたんリンクを使った商品紹介を１つ、２つと掲載したところまでは問題なくツイッター投稿が表示されていたのですが、３つめの商品紹介を掲載したところで、ツイッター投稿が上記の引用画面のような表示に変わってしまいました（したがって、このかんたんリンクが影響している可能性があります）。 https://af.moshimo.com/af/shop/service/easy-link-card
３）わたしはこのかんたんリンクについて、以下のサイトを参考に、少しカスタマイズしてあります。 https://small-green.com/moshimo-easy-link-btn-customize/
４）同様の不具合に関するブログ記事をネット上で見つけて読みました。その中で「Javascript」をオンにする、という指摘がありましたが、ブラウザ（Google Chrome）を確認したところ、オンになっていました。
以上、可能な範囲で現状を説明させていただきました。
初心者なりに、このかんたんリンクとの相性が原因ではないかと思っているのですが、２つの掲載は問題なくて、３つ目から問題が生じるという点で、これが原因だと合理的に説明できるのかどうか、よくわかりません。
仮にかんたんリンクが原因だとしても、今後記事を作成していく上で、商品紹介とツイッターの埋め込みが両立できないとブログ記事の表現方法に制約ができてしまうので、なんとか対処法を考えたいと思います。
長くなりましたが、助けていただけましたら幸いです。
（以下、環境情報です）
----------------------------------------------
サイト名：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.1
カテゴリ数：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
----------------------------------------------
2020-03-01 11:16
私はツイッターをやったこともないし、自分のサイトに埋め込んだこともないので、間違っているかもしれないのですが・・
サイトのソースコードを拝見しますと、埋め込みコードの最後の方のJavaScriptのコードが見当たらないみたいです。
ツイッターのコードの場所を貼り直したなどの理由で、JavaScriptのコードが抜けちゃったというような可能性はございませんか？
JavaScriptのコードを後ろに付けて、ローカルのテストサイトに貼り付けてみたら、ちゃんと表示されました。
参考にさせていただいたサイト
JavaScriptのコードがここにうまく貼れないので、上記のサイトを参考にしてください。
わいひら reacted
Topic starter
2020-03-01 16:28
ご連絡ありがとうございます。感謝します。
ご指摘のありましたコードの件、初心者なので正確なお答えになっているか分かりませんが、投稿画面を確認する限り、JavaScriptのコードはあるようです。写真を添付します。にもかかわらず、最初の投稿に添付したような引用画面のような表示なってしまっています。
なお、もう一つファイルを添付しましたように、当該ブログ記事の最後の方では「ＨＴＭＬの入力画面」ではなく、「ツイッターのＵＲＬを貼りつける入力画面」を利用して埋め込みを試みましたが、同様に引用画面のような表示になってしまいます。
ちなみに、投稿画面の段階ではちゃんとツイッターのフォーマットで表示されるのですが、プレビューや、公開された記事では、引用画面のような表示となってしまいます。
どうしたなのでしょう。。
Topic starter
2020-03-01 16:29
すみません、ファイルを２つ添付できないようでしたので、二つ目のキャプチャを添付します。
2020-03-01 16:57
すみません。今、出先なので、確認出来ないのですが、カスタムhtmlのブロックで貼り付けると、どうでしょう？
Topic starter
2020-03-01 17:07
ご連絡ありがとうございます。
初心者なので理解が悪くてすみません。先ほど添付した形が「カスタムhtmlのブロック」ということではないのでしょうか。もういちど貼りつけますね。こちらの方法でもうまく表示されません。
2020-03-01 18:27
2020-03-01 18:49
Amyさん、こんにちは。
投稿画面を確認する限り、JavaScriptのコードはあるようです。写真を添付します。
僕の環境でおっしゃっているページを確認し、ページのソースから該当のscriptコードを検索してもヒットしません。少なくとも最終的な完成ページには出力されていないようです。
- 投稿の編集画面（のソースエディタ）でちゃんと出力されているか
- プレビューしたときはどうなるか
の２点を確認してみてください。ここで差異がある場合、WordPressがJavaScriptのコードをなんらか制御しているパターンだと思います。
※プレビュー上でソースを見るには、ブラウザ上で右クリック→「ページのソースを表示」などをクリックしてみてください。もしくは[Ctrl] + [U]でもOK。
2020-03-01 18:58
ブロックエディターのツイッター埋め込みのブロックで
https://twitter.com/yuka_kuwahata/status/1213025176092315648?ref_src=twsrc%5Etfw
を貼り付けたら、正常に表示されました。
でも、Amyさんも同じようにやっているんですよね？
URLの後ろの方が画像にないので、ちょっとわかりませんけども。
もう少し試してみます。
あれ？よく見るとURLが前の方でも違いますよね？
Aｍｙさんの画像は、また別のツイッター記事でしょうか？
私と同じURLだと、どうなりますでしょうか？
わいひら reacted
2020-03-01 19:32
カスタムHTMLブロックに貼り付けてみたのですが、私のテスト環境では、ちゃんと表示されてしまうんですよね。
ちなみに、AmyさんのHTMLブロック？に貼り付けた画像をみると、JavaScriptのタグが上にもありますよね？
もう一度、ツイッターから埋め込みコードを取得し直してカスタムHTMLブロックに貼り付けて、試してみてもいいのかもしれません。
Amyさんは、テキストエディタは、何をお使いですか？
2020-03-01 19:52
今回のこととは関係ないかもしれませんが、親テーマのみで利用されているようです。
サイト運営をする上では、子テーマの利用を推奨いたします。
テンプレートURL：/wp-content/themes/cocoon-master
スタイルシートURL：/wp-content/themes/cocoon-master
試しに子テーマを有効化して表示させてみるとどうなりますか？
https://wp-cocoon.com/theme-install/
※テーマ変更で変わるかどうかの確認もあります。
Topic starter
2020-03-01 20:45
みるみさま
ご返信ありがとうございます。
- 投稿の編集画面（のソースエディタ）でちゃんと出力されているか
- プレビューしたときはどうなるか
１．→初心者なのでとんちんかんなことを言っていたらすみません。「投稿の編集画面（のソースエディタ）」というのは、添付の画面のことでしょうか。scriptコードは、ちゃんと記載されているようです。
２．→「ＨＴＭＬ」のすぐ右側の「プレビュー」をクリックすると、ツイッターのフォーマットでちゃんと表示されます。ただ、画面右上の「プレビュー」をクリックすると、やはり引用画面のような表示になってしまいます。
「WordPressがJavaScriptのコードをなんらか制御しているパターン」なのでしょうか。この場合、対処法はあるものなのでしょうか。
2020-03-01 20:58
みるみさんがソースエディタと言っているのは、たぶんコードエディタのことだと思います。
右上の丸三つのマークをクリックして「コードエディター」をクリックします。
Topic starter
2020-03-01 20:58
ご返信ありがとうございます。
ややこしくてすみません。添付したツイッターの埋め込みブロックは、また別のＵＲＬです。当該ブログ記事の下の方にも、別のツイッター投稿を埋め込もうとしたのですが、こちらも同じようにうまく表示されないのです。
＞私と同じURLだと、どうなりますでしょうか？
→やはりダメなのです。
＞もう一度、ツイッターから埋め込みコードを取得し直してカスタムHTMLブロックに貼り付けて、試してみてもいいのかもしれません。
→貼り直して更新してみましたが、やはりダメでした
＞Amyさんは、テキストエディタは、何をお使いですか？
→すみません、テキストエディタというのは何のことでしょう。秀丸とかのことでしょうか。普段はウィンドウズの「メモ帳」を使っています。答えになっているでしょうか。。
2020-03-01 21:01
今回貼り付けたコードは、一旦、メモ帳に保存したりしていますか？
Topic starter
2020-03-01 21:04
leafytreeさま
みるみさま
大変失礼しました。ソースエディタ、コードエディタにも出力されているようです。
リフィトリー reacted
Topic starter
2020-03-01 21:08
@leafytreeさま
いえ、ツイッターでコピーをし、そのままWordPressに貼りつけていました。いったん保存した方がよいのでしょうか。
Topic starter
2020-03-01 21:09
@yhiraさま
子テーマを使用しているつもりでしたが、有効化されていなかったのでしょうか。。。
Topic starter
2020-03-01 21:11
@yhiraさま
いまいちど子テーマの「有効化」をクリックしてみましたが、それでもツイッター投稿はうまく表示されていません。
2020-03-01 21:18
子テーマが有効化されたようですね。
いままでは、親テーマをお使いになっていたようです。
わいひらさんになにか考えがあるようですので、この状態のまま、アドバイスをお待ちになるのが良いかと思います。
Topic starter
2020-03-01 21:32
@leafytreeさま
ご連絡ありがとうございます。
これまで、子テーマが有効化されていなかったということでしょうか。何も支障がないといいのですが。
最初の投稿で触れましたが、かんたんリンクの掲載を増やすにつれてツイッターの表示がおかしくなったので、素人意見ではあるものの、客観的には、このかんたんリンクとの関係に原因があると思っています。
同じ環境で、かんたんリンクを２つから３つに増やしたところで表示がおかしくなりましたので。
ただ、かんたんリンクがゼロか１つかで不具合の有無が異なるのであれば分かりやすいものの、２つなら良くて３つだとダメというのが、よくわからないところです。
あきらめた方がよさそうですね。。
2020-03-01 21:41
@amy さん
子テーマを推奨する理由は、ユーザーがカスタマイズした部分が、親テーマのアップデートによって、リセットされてしまうのを避けるということだと思います。
せっかくカスタマイズしたのに、保存もされずにリセットされたら、困りますよね。
かんたんリンクは、私も使っていますが、いままで特に問題が生じたことはないんです。
今回は、どうかわかりませんが・・
かんたんリンクとの因果関係も含めて、わいひらさんの意見を聞くのが一番かと思います。
即、解決とはいかないかもしれませんが、このフォーラムには、スキルの高い方がいらっしゃるので、いま、調べているところかもしれませんよ。
Topic starter
2020-03-01 21:44
@leafytreeさま
ありがとうございます。
本当にお詳しくて優しい方が多くて心強い限りです。私もいつかブログ運営者のみなさんに恩返しができるよう、ひび努力したいと思います:)
2020-03-01 21:59
HTML ソースを確認すると、MoshimoAffiliateEasyLink と確認できます。
この MoshimoAffiliateEasyLink のいくつかで、ID が重複しています。ID は、1 ページにつき 1 つしか使えません。
MoshimoAffiliateEasyLink で実行される JavaScript がどういうものか知りませんが、ID を目印に動いているのは想像できます。もしかすると、ID の重複により JavaScript が誤作動しているのかもしれません。
ID の重複を解消すると、どうなるでしょうか。
どの ID が重複しているかは、Markup Validation Service の検証で分かります。重複箇所には、このようなエラーが出ます。
Error Duplicate ID xxxxxx
This post was modified 4年前 by Akira
2020-03-01 21:59
Amyさん
私もローカルのテストサイトにAmyさんのかんたんリンクのコードを３つ貼り付けて表示してみました。
すると、Amyさんのサイトと同じ表示になってしまいました。
Cocoon設定の「高速化」の設定で「スクリプトの設定」の「JavaScriptをフッターで読み込む」のチェックを外して「変更を保存」のボタンをクリックしてみてください。
たぶんそれで、上手く表示されるかと思います。
やはり、かんたんリンクと関係ありそうですね。
わいひら reacted
2020-03-01 21:59
もう一度環境情報を貼っていただいてよろしいでしょうか。
加えて試しに新しい記事を作成して、Twitterの埋め込みだけを記入して動作確認すると表示されるんですよね？
あと、高速化設定の「JavaScriptをフッターで読み込む」を無効化するとどうなりますでしょうか。
リフィトリー reacted
2020-03-01 22:01
同じく、わいひらさんと被った。
Topic starter
2020-03-01 22:32
みなさま
ご助言ありがとうございます。これからご指摘されたとおりに幾つか試しますが、取り急ぎ、環境情報をいまいちど貼りつけます。
----------------------------------------------
サイト名：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
----------------------------------------------
Topic starter
2020-03-01 22:39
leafytreeさま
わいひらさま
「JavaScriptをフッターで読み込む」を無効化したら、ツイッター投稿が無事に表示されました！ 本当に有り難うございます。
同様にご助言いただきまして有り難うございます。素人すぎてMarkup Validation Serviceの使い方が分かりませんでしたが、やはりＩＤの重複が原因だったのでしょうか。
みなさま
見ず知らずの素人のために骨を折っていただきまして、本当に心より感謝いたします。
初心者には理由がよくわかりませんが、今後のためにも、可能な範囲でご解説いただけますと非常に助かります。理由の説明が難しい場合でも、同じような不具合を再発させないため、今後気をつけるべき点をご教示いただけましたら幸いです。
Topic starter
2020-03-01 22:44
みなさま
ちなみに、子テーマは無事に有効化されていますでしょうか。
青色のスキンをずっと使用していたのですが、子テーマのことを言及されたので、あらためて子テーマの有効化ボタンをクリックしたところ、いったんスキンが真っ白（恐らくいったん初期化されたのかと）になってしまいました。その後に、あらためて有効化ボタンをおすなどしたら、元の青色に戻りました。
これまでも子テーマを使用していたつもりでした（外観→テーマエディター→「編集するテーマを選択」を「cocoon child」にして、「cocoon child」のスタイルシートをいじろうとしたこともありました）が、何か不具合があったのでしょうか。
2020-03-01 23:59
@amy さん
私のサイトも「JavaScriptをフッターで読み込む」は無効にしています。（かんたんリンクも使っているので）
有効にした方がより高速化されるのかと思いますが、特に支障は感じません。
かんたんリンクを３つ貼ったらツイッターの表示がおかしくなった、のであれば、最初から３つ貼ってテストしてみれば良いものを、時間がかかってしまい、恐縮です。
親テーマ、子テーマの件ですが、現在は、たぶん親テーマが有効になっている状態だと思います。
と、言うのも、カスタマイズのCSSは、親テーマのダッシュボードの「外観」→「カスタマイズ」→「追加CSS」に設定されている様子だからです。
子テーマには、カスタマイズのCSSが設定されていないので、子テーマを有効化するとサイトの外見が変わってしまう可能性があります。
既に多少カスタマイズされていらっしゃるようですので、サイトの外見を保ったまま、子テーマに移行するのは、コツが要ります。
大雑把に書くと
◆カスタマイズしたCSSの親テーマから子テーマへの引っ越し（コピペ）
◆親テーマのCocoon設定のエクスポート
◆親テーマからエクスポートしたCocoon設定を子テーマにインポート
こんなイメージです。
質問の内容が変わると、別のトピックを立てる決まりになっていますので、お手数ですが、改めてトピックを立ててくださいますようお願いいたします。
わいひら reacted
2020-03-02 00:21
実際に試したところ、ID の重複を解消してもダメでした。ただ、ID の重複は避けるのをおすすめします。
原因は、もしもアフィリエイトの「かんたんリンク」が生成する JavaScript 。こいつが悪さをしています。
「JavaScriptをフッターで読み込む」が無効であれば、問題は起きない気はします。
一応、有効にしても Twitter を表示する方法はありました。ただ、やり方がちょっと面倒です。
子テーマは無事に有効化されていますでしょうか。
有効になっていますが、問題があります。
子テーマの style.css が読み込まれていません。もしかして、削除されてはいませんか？
外観→テーマエディター→「編集するテーマを選択」を「cocoon child」にして、「cocoon child」のスタイルシートをいじろうとしたこと
もしよろしければ、↑ と同じ画面のスクリーンショットをいただけないでしょうか。
This post was modified 4年前 by Akira
わいひら reacted
2020-03-02 00:47
申し訳ありません。子テーマは有効になっていませんね。
head 内で cocoon-child-keyframes-css とあったので、子テーマが有効になっていると勘違いしました。
スクリーンショットは必要ありませんでした。
This post was modified 4年前 by Akira
Topic starter
2020-03-02 01:59
みなさま
新たなスレッドを立てさせていただきました。 t.ly/7OLKA
お手すきの時にのぞいてみていただけましたら幸いです。
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。