WordPressにインスタグラムを表示させるプラグイン「Instagaram Feed」の設定方法を紹介します。カメラ・レンズのブログをやっているものの、インスタグラムにぜんぜん力を入れていなかったので、心を入れ替えるつもりで設置を決めました笑
今回はサイドバーに表示させる方法ですが、投稿ページ・固定ページにも表示させられます。なので、インスタグラムで投稿した写真のギャラリーページを作ることも可能ですよ。
Instagaram Feedをインストール
まずはプラグインの新規追加から「Instagram Feed」をインストールして、有効化します。
アイコンが古いインスタグラムのままなのがちょっと気になりますね笑
Instagaram Feedの表示設定
目標として、Wordpressのサイドバーに「スマホアプリと同様の表示」をさせることにしました。3×3の9枚表示ですね。枚数は増やすことも可能です。
インスタグラムアカウントと連携
WordPressのメニューに「Instagarm Feed」が追加されていると思いますので、こちらを選択。
まずは1.Configureタブで、自分のインスタグラムアカウントと連携します。
「Connect an Instagram Account」ボタンをクリックすると、インスタグラムのログインページに移動します。
自分のアカウントとパスワードでログインします。
すると、自分のアイコンが表示されたと思います。
インスタグラムの表示設定
次に2.Customizeタブで表示設定をします。
Generalはとくに弄ってないと思います。
Layout
Layoutを「スマホアプリと同様の表示」に修正します。
Number of photos :9（9枚表示させる）
Number of Colum:3（3列表示させる）
Padding around Images:5px（写真の隙間のサイズ）←初期値だと思います。
Disable mobile layout: ✔
ここは✔をつけないと、スマホでの表示が1枚表示になってしまいます（インスタグラムで言うと、真ん中のタブの表示タイプですね）。
‘Load More’ Button
非表示にしました。テキストを「もっと見る」など、好きなものにも変えられます。
‘Follow’ Button
表示にしました。テキストを私は「Follow me」に変更しました。
Header
自分のアイコン部分ですね。サイトでは同じアイコンを使ってますので、私は非表示にしました。
表示設定は以上になります。つづいて、サイドバーに設置します。
サイドバーに「Instagram Feed」を設置する
設置方法は、3.Display Your Feedタブを見ると書いてあります。
上で表示設定をしたので、ショートコード「instagaram-feed」だけでOKです。（実は表示設定をショートコードで変更することもできました）
これを、ウィジェットのサイドバーに貼ればOKです。
このように表示されると思います。スマホでも同様に表示されることを確認してみてください。写真が大きく表示されてしまってる場合は、上のLayoutで「Disable mobile layout」にチェックがあるか再確認してみてください。
以上で、サイドバーに表示する方法は終了です。「Instagram Feed」プラグインには有料のPro版もあって、それだともう少し違ったことができます。
Pro版だと＃ハッシュタグ表示ができる
有料のPro版では、表示のバリエーションが増えます。ギャラリーページで使いたい場合には重宝しそうです。
また、もっと大きなPro版の特徴は「#ハッシュタグ」表示ができることですね。
どいうことかというと、自分の投稿に限らず、好きなハッシュタグのインスタグラムの写真がWordpress上に表示できます！
公式サイトのサンプルは「#wildlife」で絞って表示したギャラリーになってます。
イベントとかで「♯○○で投稿してください」というのを表示したWordpressページが作れますね。アイデア次第でいろんな活用ができそうです。インスタグラムとWordpressの連携の面白さを感じました。
おわりに
「Instagaram Feed」プラグインを使って、Wordpressのサイドバーにインスタグラムを表示させる設定方法を紹介しました。
インスタグラムの表示ができると、ブログでは紹介できなかった写真を見せれますし、ブログからのフォロワーも増えるかもしれませんね。参考になりましたら幸いです。
