こんにちは！フォトグラファー&Web制作のじゅんぺい（@junpei_sugiyama）です！
今回は、
WordPressでインスタグラムのタイムラインってどうやって表示させるの？
といった方に対する記事となります。
WordPress以外でインスタグラムのタイムラインを表示させようとすると非常に大変なのですが、WordPressではプラグインを使えば簡単に表示させることが出来ます。
今回はその便利なプラグイン、Smash Balloon Instagram Feedの使い方をご紹介します。
目次
Smash Balloon Instagram Feed（旧 Instagram Feed）の使い方
Smash Balloon Instagram Feedは、以前「Instagram Feed」という名前でした。
なので「インスタグラム タイムライン」で検索してヒットする Instagram Feed の記事はこの Smash Balloon Instagram Feed の事だと思って下さい。
プラグインをインストール～有効化
まずはプラグインをインストールしましょう。
管理画面左のプラグイン→新規追加で「Smash Balloon Instagram Feed」と検索し、インストール→有効化クリックまで進めます。
すると管理画面左のメニューに追加されたのが分かります。
ここの名前は以前の名前「Instagram Feed」だから少しややこしいですね。。。
ここのSettingsから設定をしていきます。
インスタグラムのアカウントと連携する（紐付ける）
連携するというと難しく聞こえるかも知れませんが、簡単に出来ます。
まずは先ほどのSettingsをクリックして設定画面を表示します。
すると次のような画面が表示されるので、一番目立つ青いボタンをクリックします。
そしてPresonalかBusinessを選択する画面が表示されるので、通常はPersonal、インスタグラムがビジネスアカウントであればBusinessを選択しConnectをクリックします（ここではPersonalで進めていきます）
次はインスタグラムのログイン画面に切り替わるので、ログインします。
ここは許可するをクリック
そしてWordPressの画面に戻り、次の画面が表示されるので青いボタンをクリックします。
そして次のようにアカウントが表示されれば完了です。
タイムラインを表示させる
タイムラインを表示させたいページにショートコードを貼るだけです。
ショートコードは先ほどまで見ていた画面を少し下にスクロールするとあります。
これをHOMEとタイトルを付けたトップページに貼ってみます。
するとトップページではこのように表示されます。
カスタマイズ
このままでもいいと思いますが、色々とカスタマイズすることも出来ます。
まずは設定画面のCustomizeのタブを選択します（無料版で出来る事だけ紹介します）
General
Generalでは3つの項目を変更出来ます。
- Width of Feed：フィードの幅（％ or px）
- Height of Feed：フィードの高さ（％ or px）
- Background Color：フィードの背景色
Layout
Layoutでは5つの項目を変更出来ますが、一番最初の赤枠部分に関しては有料版のみ変更可能となります。
- Layout Type：レイアウトの種類を変更（有料版のみ）
- Number of Photos：写真の表示枚数
- Number of Columns：横一列の表示枚数
- Padding around Images：写真の間隔（％ or px）
- Disable mobile layout：PCと同じ表示にする
※例えば Number of Photos を10にして Number of Columns を3にすると、最後の列が1枚表示なってしまうので注意して下さい。
またデフォルトでは画面幅に応じて2列、1列と表示数が自動で変化しますが、Disable mobile layout にチェックを入れるとスマホでもPCと同じように表示されます（以下はデフォルトの状態です）
Photos
Photosでは2つの項目を変更出来ます。
- Sort Photos By：写真の並び順（新しい順 or ランダム）
- Image Resolution：写真サイズを変更
Header
Headerでは5つの項目を変更出来ます。
- Show Feed Header：ヘッダーを表示するかどうか
- Header Size：ヘッダーのサイズを変更
- Show Bio Text：アカウント名の下に表示される文章（ビジネスアカウントのみ）
- Use Custom Avatar：ヘッダーのアバターを変更（ビジネスアカウントのみ）
- Header Text Color：ヘッダーのテキストカラーを変更
Show Bio Text と Use Custom Avatarはビジネスアカウントのみですが、各種項目を以下のように変更した時はこうなります。
アバターは正方形でないと潰れてしまいますね・・・（imgタグにobject-fit: cover;を設定すれば直りますが）
テンプレートファイルにショートコードを貼る
先ほどは管理画面から固定ページに直接ショートコードを貼りましたが、オリジナルテーマで作成する場合はテンプレートファイルに貼る事が多いと思います。
その場合のコードは以下のようになります。
<?php echo do_shortcode('[instagram-feed]'); ?>これはContact Form 7のショートコードを貼る時と同じですね。
テンプレートファイルはPHPファイルなので、上記のようにしないといけません。
以上です。
インスタグラムのタイムラインはWordPress以外だとめっちゃ難しいので、いずれ記事にまとめたいと思います。
