WordPress初心者です。Smash Balloon Social Photo Feed（Instagram Feed）というプラグインを使って、サイドバーにインスタグラムをタイムラインのようにギャラリー表示しようとしました。
テーマはCocoonを使っています。PC表示はタイムライン表示およびギャラリー表示などのカスタマイズはできるのですが、スマホなどのレスポンシブデザインだと「＠」のようなマーク？が表示され、画像が表示されません。（リンクしか表示されない）
ネット検索で解決方法を探しました。しかし、残念ながら詳細に記載されている記事はなかったので、自分で解決方法を考えました。今回はプラグインでサイドバーに簡単にインスタグラムをギャラリー表示にする方法について紹介したいと思います。
CocoonでSmash Balloon Social Photo Feedは難しい
CocoonでプラグインのSmash Balloon Social Photo Feedを使って、サイドバーにインスタグラムをタイムラインのように埋め込み、ギャラリー表示にしてレスポンシブデザインに対応させるのは難しいです。
検索で見つけた解決方法は以下の通りです。
- キャッシュを削除する
- 高速化のJavaScript縮小化のチェックを外す
- カスタムで％表示をpx表示にする
- head-insert.php → にコードを入れる
はい。初心者ながら一生懸命調べて全部試してみました。
ダメです。無理です。
サイドバーにインスタグラムのショートコードを入れると、スマホの画面だと
こんな感じのマークが出ます。
代替えプラグインでSocial Gallery and Widgetを使用
変わりに使える別のプラグインを探して片っ端から試してみました。私のようなWordPress初心者でも簡単に使えるCocoonにも対応しているプラグインは
Social Gallery and Widget
です。
このプラグインを使えば、Cocoonテーマでもサイドバーに簡単にタイムラインで投稿した画像が更新され、ギャラリー表示することができます。
Social Gallery and Widgetの使い方
インストールから設定方法、使い方について説明します。
①WordPressの左メニューから【プラグイン】→【新規追加】→【Social Gallery and Widget】
と検索をします。
そうすると、以下の画像のようにプラグインが表示されるので【インストール】します。
インストールしたら【有効化】します。
②自分のインスタグラムのアカウントを認証させる
【Social Gallery and Widget】→【Dashboard】を見ます。
【＋Connect an Instagram Account】をクリックします。
③Allowをクリック
自分のインスタグラムを認証させます。
④以下の画面になればOK
You are logged in as 自分のアカウント名
となればOKです。
※以下の画像のような感じです
⑤ウィジェットでサイドバーにインスタグラムを埋め込む
【外観】→【ウィジェット】と進むと
【Social Gallery and Widget】と表示されているものがあるので選択します。
サイドバーに追加します。
※以下の画像のような感じです。
⑥設定方法
好きなタイトル名を入力します。
Number of photosは表示する画像の数です。とりあえず6にしました
⑦完成です。
スマホの画面でギャラリー表示されているのを確認。
ちゃんとできています。
無料版は細かい設定はできない
誰でもできるくらいすごく簡単なのですが、無料版は細かい設定ができません。
ギャラリーは3カラム表示になります。
ただ優れているところは、若干の時間差はありますがインスタに画像を投稿すると新しいものから順番にNumber of photosで設定した画像の数だけ表示されます。
一応、タイムライン表示？なのかなーと思います。
申し訳ありませんが、私にはこれが限界でした。
しかし細かい設定がほぼないため、誰でも簡単に使えます。
もし、これでよろしかったら試してみてください。
