[PR] WordPress苦手主婦のためのWordPress専門コミュニティ「MasterPress®︎」詳細はこちら

Cocoonテーマで「Smash Balloon Social Photo Feed」が使えないときの対処法

WordPressのサイドバーにインスタグラムを埋め込みたいという方、多いですよね。

その場合、プラグインを使ってインスタグラムの埋め込みをするかと思います。

で、WordPressテーマ「Cocoon(コクーン)」に関しては、中々、インスタグラムの埋め込みをするプラグイン選びが難しいことが分かりました!

どういうことかと言うと「Smash Balloon Social Photo Feed」というプラグインを使用し、WordPressテーマ 「Cocoon(コクーン)」にインスタを埋め込みするのは、どんなに頑張っても、うまくいかないのです!!

パソコンの表示は綺麗なんだけど、なぜかスマホの隠れメニューの表示がこのようになってしまうということです^^;

今回は、WordPressテーマ「Cocoon」でも綺麗にインスタグラムを表示させる方法をお伝えします。

ちなみに、WordPressテーマ「Cocoon」は、無料で使えるのに機能性が優れ過ぎているため、「Smash Balloon Social Photo Feed」を導入したばかりの時に、全くインスタの表示が出てこないことがあります。

そのときは、左のメニューから【Cocoon設定】→【高速化】をクリック

高速化設定のところから、「JavaScript縮小化」のチェックを外す。

ネットで解決法を探して試してみた結果・・・

WordPressテーマ「Cocoon」で、インスタを埋め込みするのに「Smash Balloon Social Photo Feed」を使ったけどうまくいかないので、色々と調べてみました!!

そしたら、このプラグイン「Social Gallery and Widget」が良いということでインストールしてみたんです。

ちなみに、「Social Gallery and Widget」は誰でも利用できるくらいに超簡単です。ですが、無料版で利用すると、見た目のカスタマイズはできません。

結論、こちらのプラグインを入れると、このような感じでインスタグラムの埋め込みをすることができるのですが、見た目がイマイチだったし、スマホメニューも表示されなかったです。

もし、こんな感じの表示でもよければ、「Social Gallery and Widget」は使えますが、わたしは、オススメしません。

WordPressテーマ「Cocoon」でインスタグラムがうまく表示できないときの対処法

では、わたしなりにどうしたら綺麗に見えるか考えた結果このような結論に至りました。

「Smash Balloon Social Photo Feed」のプラグインをそのまま使用するのがいい!!

とは言え、そうなると、スマホの隠れメニューに変なの出てくるんですよね^^;

これですね↓

これをどうにかできたら良いのです。

では、どうしたら良いのかですが、スマホ表示とパソコン表示を別々にすることで解決できるのではないかと思います。

では、その設定方法をやっていきましょう(^O^)/

WordPressダッシュボードからウィジェットを開く

まずは「ウィジェット設定」に移動します。

WordPressの左メニュー→【外観】→【ウィジェット】

ウィジェットに移動すると、設置しているウィジェットが表示されます。

おそらく現状【instagram-feed】の設置は、テキストウィジェットに入れているかと思います。

テキストウィジェットを【[C]テキスト(PC用)】に変更

このテキストウィジェットを【[C]テキスト(PC用)】に変えます。

こうすると、サイドバーのインスタグラムの表示は、パソコンのみになりました。

この時、前に設置していた方のテキストウィジェットは削除するようにしてください。

スマホ用【[C]テキスト(モバイル用)】を追加

次に、スマホ表示に関してですが、【[C]テキスト(モバイル用)】を見つけて、フッターモバイル用というところに移動させます。

インスタフィードのショートコードを入れたら【保存】で完了です。

実際の画面で確認

実際の画面を確認すると、スマホの隠れメニューでは、インスタが非表示になりました。

そして、フッターの方でインスタが表示されました♪

このようにしたら、WordPressテーマ「Cocoon」でもインスタグラムが綺麗に表示されると思います。

もしかしたら、インスタグラムの表示が上記の画像のように、グリッド表示されずに、一つ一つの画像になってしまう方がいるかもしれません。

その場合は、「Smash Balloon Social Photo Feed」の設定に問題がありますので、以下の設定を変更してください。

WordPressの左のメニューから【Instagram Feed】→【設定】をクリック。

カスタマイズのタブに切り替え。

モバイルレイアウトの無効化にチェック。

これで表示が変わるかと思います。

まとめ

今回は、WordPressテーマ「Cocoon」でも綺麗にインスタグラムを表示させる方法をお伝えしました。

おさらいすると、やることは「Smash Balloon Social Photo Feed」のウィジェット表示をPCとスマホで変えることです。

色々、他のプラグインを導入をしてみたんですが、最終的にこの方法が一番良いのかなぁという結論に至りました。

ですので、今、WordPressテーマ「Cocoon」を使っていて、インスタグラムを表示させたいと思っていた方は、難しいことはないので、やってみてください♪


ブログアフィリエイトの基礎知識を分かりやすく丁寧に丸っと公開中!!

メルマガに登録すると、シークレットサイト「Escape from Zero」にご招待します。このシークレットサイトでは、ブログアフィリエイトの基礎を順序立てて解説しております。
メルマガの登録は無料!配信解除はいつでもOK! 登録はこちら↓


ABOUT US
ゆかアフィリエイター兼WordPress専門家
ご訪問ありがとうございます! ゆかブログの管理人でアフィリエイター兼WordPress専門家のゆかです。福岡で3人の子供を育てながら、お家でのんびりとブログを書いて生活しています。
ブログを書く以外のお仕事は、パソコンが苦手な女性起業家さんのワードプレスブログ運営をサポートしたり、代行でワードプレスの立ち上げをしています。 ●WordPressコミュニティ『MasterPress』運営
SEO検定2級
●チャンネル登録1万人超え!WordPressブログ構築専門YouTubeチャンネル「ゆかチャンネル

ゆかブログでは、WordPress作成方法・ブログ記事の書き方・アフィリエイトの方法など、パソコン苦手な初心者さんの『困った!!』を解決しています。
詳しいプロフィールはこちら>>