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

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

埋め込みインスタグラムが表示されずリン...
 
共有:
通知
すべてクリア

[解決済] 埋め込みインスタグラムが表示されずリンクになってしまう件について

21 投稿
3 ユーザー
9 Reactions
5,967 表示
(@kinakozico)
Active Member Registered
結合: 5年前
投稿: 12
トピックスターター  

わいひらさま、みなさま
いつもお世話になっております。

上記タイトルの件で相談させてください。
コクーンの仕様の問題ではないのかもしれませんが、インスタグラムの埋め込みが表示されずリンクになっています。
埋め込み表示でをさせたいのですが、どのように何のコードを入れたらよいのでしょうか?

実現したいこと
インスタグラムの埋め込みを、リンク先に飛ばすに当ブログ内に表示させたい。

お手数とは存じますがお知恵を拝借できたら有難いです。

どうぞよろしくお願いします。

----------------------------------------------
サイト名:野菜ごはんとお散歩メディア グッドモーニング チェンマイ
サイトURL: https://vegan-chiangmai.site
ホームURL: https://vegan-chiangmai.site
コンテンツ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
Wordpressバージョン:5.2.4
PHPバージョン:7.2.17
ブラウザ:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.120 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
言語:ja,en-GB;q=0.9,en-US;q=0.8,en;q=0.7
----------------------------------------------
テーマ名:Cocoon
バージョン:1.9.9.5.3
カテゴリ数:9
タグ数:2
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.0.8
----------------------------------------------
Gutenberg:1
AMP:0
PWA:0
Auto Post Thumbnail:0
ホームイメージ:/wp-content/uploads/2019/07/gm-home-ime.png
----------------------------------------------
ブラウザキャッシュ有効化:1
HTML縮小化:1
CSS縮小化:1
JavaScript縮小化:1
Lazy Load:1
WEBフォントLazy Load:1
JavaScript(フッター):1
----------------------------------------------
利用中のプラグイン:
All In One SEO Pack 3.2.10
Bogo 3.2.1
Broken Link Checker 1.11.8
Contact Form 7 5.1.4
Google XML Sitemaps 4.1.0
Smash Balloon Instagram Feed 2.1
TypeSquare Webfonts for エックスサーバー 1.2.0
WordPress Ping Optimizer 2.35.1.1.0
WP Fastest Cache 0.8.9.9
----------------------------------------------


   
たなかま
(@tanakama)
Prominent Member Registered
結合: 7年前
投稿: 600
 

こんにちは。

インスタグラムの埋め込みコードは、HTMLで入ってますでしょうか?

ブロックエディタをお使いの場合は、添付画像のようにHTMLで入れる必要があります。

 

次回からで良いのですが、不具合のあるページもご提示いただけると、回答する側として助かります。

https://vegan-chiangmai.site/sleeper-train-from-bankok


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

たなかまさま

お世話になります!ご返信ありがとうございます!
埋め込みコードはHTMLで入れております。

つい1週間ほど前まで問題なく埋め込み表示できていました。
特に何の変更もしてないのですが、今までの埋め込みコード含めて全面的にリンクを飛ぶ仕様になってしまい、困っています...

リンク先表示記入漏れ失礼しました。
複数ページに渡ってこのような症状なので、主だった2ページのリンク先と画像をいたします!

どうぞよろしくお願いします!

https://vegan-chiangmai.site/aboutus

https://vegan-chiangmai.site/sleeper-train-from-bankok

お知恵を借りたいこと)上記2ページのインスタ埋め込みを表示させたい

埋め込みコードは添付ファイルのように記入しています。


   
たなかま
(@tanakama)
Prominent Member Registered
結合: 7年前
投稿: 600
 

僕の環境だとできていますね。

なるべく環境を合わせてみました。

プラグインを順番に解除したりは試しましたでしょうか?

Wordpressバージョン:5.2.4
PHPバージョン:7.1.28
ブラウザ:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.70 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
言語:ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名:Cocoon
バージョン:1.9.9.5.3
カテゴリ数:17
タグ数:21
ユーザー数:2
----------------------------------------------
Gutenberg:1
AMP:0
PWA:0
Auto Post Thumbnail:0
ホームイメージ:/wp-content/themes/cocoon-master/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化:1
HTML縮小化:1
CSS縮小化:1
JavaScript縮小化:1
Lazy Load:1
WEBフォントLazy Load:1
JavaScript(フッター):1
----------------------------------------------
利用中のプラグイン:
Autoptimize 2.5.1
Contact Form 7 5.1.4
Google XML Sitemaps 4.1.0
Redirection 4.4.2
Share This Image 1.28
Simple 301 Redirects 1.07
tkama_heading-add-link-id 1.0.0
WordPress Importer 0.6.4
----------------------------------------------

 

追記:あと、Smash Balloon Instagram Feedというプラグインが気になりますね・・・。

 

この投稿は5年前ずつたなかまに変更されました

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

プラグインの影響ではないか。

って事をチェックするのが手っ取り早いですよ。

 

そうでなければ、データベースのキャッシュの影響もあるのかもしれないです。

https://siteorigin.com/clearing-oembed-cache/

Clearing oEmbed Cache(oEmbedキャッシュのクリア)

 

詳細は上記URLをフォーラム内検索したら、記憶にある範囲ですが、最低2つは出てくると思います。


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

たなかまさま
かうたっくさま

返信頂きありがとうございます!

プラグインは一度全て停止しましたが、該当箇所は表示されないのです。

一度元どおりにプラグインを復活させ
たなかまさまのアドバイス通りにSmash Balloon Instagram Feedというプラグインのみ停止させたのが今の状態です

↓下記にデータを貼ります

また、編集画面上でのプレビューではきちんと表示してくれるのに、
サイト画面上では、やはりInstagramにリンクが飛ぶ設定になってしまいます
(編集画面上のプレビューのスクショを添付いたします)

該当ページはこちらです
https://vegan-chiangmai.site/sleeper-train-from-bankok

初歩的なミスのような気もするのですが
皆目見当がつかないので、お力を貸して頂けると助かります......

----------------------------------------------
サイト名:野菜ごはんとお散歩メディア グッドモーニング チェンマイ
サイトURL: https://vegan-chiangmai.site
ホームURL: https://vegan-chiangmai.site
コンテンツ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
Wordpressバージョン:5.2.4
PHPバージョン:7.2.17
ブラウザ:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.120 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
言語:ja,en-GB;q=0.9,en-US;q=0.8,en;q=0.7
----------------------------------------------
テーマ名:Cocoon
バージョン:1.9.9.5.3
カテゴリ数:9
タグ数:2
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.0.8
----------------------------------------------
Gutenberg:1
AMP:0
PWA:0
Auto Post Thumbnail:0
ホームイメージ:/wp-content/uploads/2019/07/gm-home-ime.png
----------------------------------------------
ブラウザキャッシュ有効化:1
HTML縮小化:1
CSS縮小化:1
JavaScript縮小化:1
Lazy Load:1
WEBフォントLazy Load:1
JavaScript(フッター):1
----------------------------------------------
利用中のプラグイン:
All In One SEO Pack 3.2.10
Bogo 3.2.1
Broken Link Checker 1.11.8
Contact Form 7 5.1.4
Google XML Sitemaps 4.1.0
TypeSquare Webfonts for エックスサーバー 1.2.0
WordPress Ping Optimizer 2.35.1.1.0
WP Fastest Cache 0.8.9.9
----------------------------------------------


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

失礼しました
スクショを添付し忘れておりました!

こちらが編集画面上でのプレビューです。


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

かうたっく様のご指摘のキャッシュクリアはこちらかな...と思っているのですが
いかがでしょうか?(勘違いだったらごめんなさい)

このキャッシュクリアは試しているのですが今のところ変化はありません....


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

 

このキャッシュのことは書いてないんですよね ? 

 

データベースのキャッシュのことを書いてます。

一度、まず、前述のリンク先をチェックしてみてください・・・。データベースのバックアップをとってから試すことをお勧めします❦


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

かうたっくさま

ありがとうございます!
まずデータベースのバックアップって何だろうって状態なので
(取ったことがありませんでした汗)そこからやってみます。

その後、また質問させて頂くと思いますのでどうぞよろしくお願いします!


   
たなかま
(@tanakama)
Prominent Member Registered
結合: 7年前
投稿: 600
 

一応ですが、Xサーバーならmod_pagespeed設定が使われてないかご確認くださいませ。

https://www.xserver.ne.jp/manual/man_server_mod_pagespeed.php

僕は使ってなかったので、この機能がなくなってたのに気づかなかったのですが

同機能をすでに有効化しているサイトは、引き続きご利用いただけます。

とのことなので、ちょっと気になりました。

必要なscriptタグがないように見えましたので。

あと、インスタグラム側からコードを取得するとき、埋め込みではなく、「リンクをコピー」は試されてますでしょうか?

※不具合が出ている間は、Cocoon高速化の縮小化も外していただく必要があります。


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

エックスサーバーのようなので、サーバー側がバックアップを取ってくれてるのをうまく利用するのも手かもしれないですね。

https://www.xserver.ne.jp/manual/man_db_restore.php

 

データベースを触るのは、エックスサーバー上にあるサーバーパネルからできますよ。

以下画像なら phpmyadmin(MySQL5.7) より

https://gyazo.com/74e3a0a3b87f7b8011c76347d7b42f7a

 

データベースのログイン方法から不明でしたら、以下もどうぞ

https://bibabosi-rizumu.com/wordpress-mysql-login/

 

 

mod_pagespeedは新しいサーバーではないので、もし見当たらなければ大丈夫かも

***
回答サイド的な事ですが

mod_pagespeedをチェックする方法もついでに。

SEOチェキのHTTPヘッダ情報が参考になりますよ。 http://seocheki.net/http-header.php

https://gyazo.com/96dd23bd708791feba1a1ee69d5bb609

大丈夫そう。ってわかります❦

この投稿は5年前ずつかうたっくに変更されました

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

お世話になっております。お時間いただいてありがとうございます!
知らないことばかりで、検証に時間がかかっております..

① データベースのバックアップはBackWpupというプラグインでとってみました

② Xサーバーのサーバパネルを確認しましたが、高速化カテゴリにmod_pagespeed設定というものがないので、元から使ってなかったのだと思います

③ Instagramからコードをとる時に、「埋め込み」と「リンクをコピー」を両方試したのですが、状況はかわりません。
→画像添付 上がリンクをコピー、下が埋め込み 同じインスタタグです
→該当ページ https://vegan-chiangmai.site/sleeper-train-from-bankok

④ コクーン縮小化 外しましたが変化なし

引き続き、かうんたっくさんが書いてくださったのも試します


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

お世話になります。途中経過をご報告します。

かうたっくさんに教えていただいた
https://siteorigin.com/clearing-oembed-cache/ の使い方がわからず
ググっている中で、見つけた以下3つを試しました↓

①サーバーキャッシュ設定
https://www.xserver.ne.jp/manual/man_server_cache.php

②WP-Optimize 3.0.13というプラグインを設定する

③ブログカードをリセットする方法
https://fantastech.net/wordpress-embed-content-reset

特に③で紹介されているコードを入れて削除する方法は
データベースから直接削除する方法と同じということだったので
これならわかる!とやってみたのですが、変化はありませんでした....


   
たなかま
(@tanakama)
Prominent Member Registered
結合: 7年前
投稿: 600
 

いずれにしても、

src="//www.instagram.com/embed.js"

のscriptタグがなくなっています。

そのため、高速化が怪しいように思ったので、そちらも疑ってくださいませ。

(私の方でHTMLソースの確認をするのに、縮小化を外してくださいという意味でした)

WP Fastest Cacheにも縮小化があるようですね。

scriptタグの許可・不許可もどこかにあるのかもしれません。(プラグインは全停止で試しましたよね)

プラグインを全停止して、URL末尾に?を付けるとどうでしょうか?(全停止後のキャッシュが残っていた可能性など)

 

それでも直らない場合、TwentyNineteenテーマを適用して検証するのも手です。

 

embed.jsを強引にhead内に読めばいけるのでは・・・と思いましたが根本的な解決ではないですね。


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

たなかまさま

声をかけて下さって本当にありがとうございます><
今現在

プラグインを全部停止
HTML、CSS、JavaScriptの縮小化のチェクを全部外しました

該当ページの末尾に?をつけて読み込んでみましたが
変化はないようです。

>TwentyNineteen
ですね
テーマを変更したことはないですが、やってみます!

 


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

該当ページの末尾に?をつけたものです
https://vegan-chiangmai.site/sleeper-train-from-bankok?


   
たなかま
(@tanakama)
Prominent Member Registered
結合: 7年前
投稿: 600
 

縮小化解除ありがとうございます。

根本的な解決ではないですが、やはりhead内に以下のembed.jsを読ませると上手く行きます。(添付画像)

https://notepad.pw/s21vvd80

記事内に入力したscriptタグがなくなっているのが原因ですね。

セキュリティか高速化でscriptタグを移動させたり、入力させなかったりすることがあります。

ちなみにTwentyNineteenで上手くいったからといって、Cocoonテーマに要因があるとは限りません。


   
たなかま
(@tanakama)
Prominent Member Registered
結合: 7年前
投稿: 600
 

追記。

ブラウザかサーバーにキャッシュが残っているか疑わしい場合、

?1

?2

など、?+違う番号をURL末尾につけて、確認するとラクです。(あくまで自分のやり方なだけですが・・・)


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

たなかまさま

ででででできましたーーー!表示できました!!!

本当に本当にご丁寧にたくさんアドバイスをありがとうございます!(泣)

そしてたくさん勉強させていただきました!

もし初心者で同じような症状の方がいらっしゃったらと思い、head内への行き方を残しておきます。

編集画面 → 外観 → Cocoon Child → 右端にある tmp-user → head-insert.php → <?php endif; ?>の下に教えていただいたコードを入れました!

たなかまさま
かうたっくさま

本当にありがとうございます!お二人のファンになりました><
ブログを拝見してさらに勉強させていただきますね!


   
わいひら reacted
(@kinakozico)
Active Member Registered
結合: 5年前
投稿: 12
トピックスターター  
投稿者:: たなかま

追記。

ブラウザかサーバーにキャッシュが残っているか疑わしい場合、

?1

?2

など、?+違う番号をURL末尾につけて、確認するとラクです。(あくまで自分のやり方なだけですが・・・)

追記までありがとうございます!

これも次回からやっていって、少しづつ覚えていきます。


   
わいひら reacted
共有:

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

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

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

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

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

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

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

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