「Instagram Feed」プラグインの設定

Instagramの写真一覧をWordPressの任意の場所に表示させるプラグインです。



目次

  1. アカウント登録
  2. 詳細設定
  3. 表示設定

1.アカウント登録

①ワードプレスにログインし、管理画面のメニューから「Instagram Feed」をクリックします。
②「Connect an Instagram Account」ボタンをクリックします。

③Instagramのログイン画面が表示されますのでログインします。

④ワードプレスのプラグインでの使用を承認するか聞かれますので、「Authorize」(承認する)をクリックします。

⑤インスタグラムでの認証ができましたら、赤枠部分が表示されます。

もし、インスタグラムの写真を表示するページにワーニングやエラーがでるようでしたら、
 下記の手順にて、トークンの設定をしてください。
「Show Access Token」のチェックボックスにチェックをいれます。トークンが表示されます。
「Manually Connect an Account」ボタンをクリックすると、入力フィールドが表示されます。
表示された入力フィールドに、表示されているトークンをコピペし、「Connect This Account」ボタンをクリックします。


上記を試してもうまくいかない場合
・インスタグラムはビジネスアカウントですか?
 ビジネスアカウントでないと意図した表示ができない場合があります。
 アカウントの設定方法はこちら

プロフィールの情報が表示できない
・インスタグラムのアカウントとFacebookの連携ができていないと、プロフィール情報が表示できません。
 アカウントの設定方法はこちら


2.詳細設定


細かい設定の説明をしていきます。


更新頻度の設定

アカウント登録に下に「Check for new posts every」の項目があります。
これは、インスタグラムの最新情報をどのくらいの頻度でこちらのページに表示させるかを設定します。
最初の設定では、1時間に1回の設定になっています。
Instagramを更新したらすぐに反映させたい場合には、分単位での設定をおススメします。




※Preserve settings when plugin is removed:プラグインを削除したときの設定を保持します。プラグインを再インストールしたときに、設定を残したままにする事ができます。
特に設定を変更する必要はありません。


カスタマイズ設定

表示するInstagram画像のサイズや、レイアウト等を設定します。

表示エリアサイズ、背景色設定

 「Customize」タブをクリックします。

・Width of Feed:フィードの幅を調整します。幅を調整すると投稿写真自体も小さくなるので注意が必要です。%またはpxで調整することができます。
・Height of Feed:フィードの高さを調整します。高さを小さくすると右側にスクロールバーが表示されます。%またはpxで調整することができます。特に指定がなければ空欄でOKです。 

※Height of Feed:300pxに設定した時の表示(右側にスクロールバーが表示されます)
・Background Color:フィードの背景の色を設定します。色はカラーコードまたはカラーピッカーで設定できます。

※背景色を緑に設定した時の表示

レイアウト設定




・Number of Photos:最初に表示させる写真の数および「Load More」などの読み込みボタンを押した際に読み込まれる数を設定します。

3枚と設定した場合の例です。
最初に3枚表示されていますが、「Load More」ボタンをクリックすると6枚になります。更にクリックすると9枚になります。


・Number of Columns:カラム数を設定します。1~10まで設定することができますが、カラム数が増えると投稿写真が小さくなるので注意が必要です。
3と6を設定した場合の比較です。


画像設定

・Sort Photos By:写真の並べ方を設定します。新着順とランダムから選ぶことができます。
・Image Resolution:写真の解像度を設定します。

・Padding around Images:表示される画像一枚の余白を設定します。%またはpxで調整することができます。
・Disable mobile layout:モバイル表示の最適化を無効にする設定です。
モバイル最適化を有効にする(ON):チェックを外す
モバイル最適化を無効にする(OFF):チェックをつける
 ※無効に設定すると、モバイルでもパソコンと同じ表示になります。
Auto-detect(recommended)自動検出(推奨)プラグインが自動的に解像度を設定します。
Thumbnail(150×150)サムネイルサイズ
Medium(306×306)中サイズ
Full size(640×640)フルサイズ
Use a Custom Image Sizeサイズをカスタマイズします。

ヘッダー



・Show the Header:ヘッダーの表示を設定します。
ヘッダーの表示を有効にする:チェックをいれる
ヘッダーの表示を無効にする:チェックを外す
↓ヘッダーはここです。
・Header Size:ヘッダーの大きさを、small、medium、largeから選ぶことができます。
・Show Bio Text:自己紹介の表示を有効します。
自己紹介の表示を有効にする:チェックを入れる
自己紹介の表示を無効にする:チェックを外す
・Header Text Color:ヘッダーのテキストの色を設定します。色はカラーコードとカラーピッカーで設定できます。

「Load More」ボタン設定


↑このボタンです

・Show the ‘Load More’ button:Load More(もっと読み込む)のボタン表示を有効にします。
 Load Moreのボタン表示を有効にする:チェックをつける
 Load Moreのボタン表示を無効にする:チェックを外す
・Button Background Color:Load More(もっと読み込む)のボタンの色を設定します。色はカラーコードとカラーピッカーで設定できます。
・Button Text Color:Load More(もっと読み込む)のボタンのテキストの色を設定します。色はカラーコードとカラーピッカーで設定できます。
・Button Text:Load More(もっと読み込む)のボタンのテキストを設定します。Load Moreの他にもっと読み込むやもっと表示させるなど、お好みで設定することができます。

「Follw」ボタン設定


↑このボタンです。


・Show the ‘Follw’ button:Follw’のボタン表示を有効にします。
Follwのボタン表示を有効にする:チェックをつける
Follwのボタン表示を無効にする:チェックを外す
・Button Background Color:Follwのボタンの色を設定します。色はカラーコードとカラーピッカーで設定できます。
・Button Text Color:Follwのボタンのテキストの色を設定します。色はカラーコードとカラーピッカーで設定できます。
・Button Text:Follwのボタンのテキストを設定します。Follwの他にフォローするなど、お好みで設定することができます。

3.表示設定


現在、TOPページに表示されていますが、投稿ページ、固定ページ、サイドバーと、任意の場所に表示することが可能です。
[ instagram-feed ]
を表示したい場所に入れます。

下の例は、固定ページとサイドバーに表示する方法です。

①固定ページに表示する方法


固定ページに
[ instagram-feed ]
を設定します。
設定した固定ページは、トップページに表示されているのと同じInstagramを表示します。

②サイドバーに表示する方法
管理画面→外観→ウィジェットのsidebarにテキストを追加します。
テキストの内容に[ instagram-feed ]を設定し、保存します。


サイドバーにInstagramが表示されるようになります。

固定ページとサイドバーの設定をしたページ例