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

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



目次

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

1.アカウント登録

①ワードプレスにログインし、管理画面のメニューから「Instagram Feed」をクリックします。
②メニュー「Instagram Feed」の下にある「設定」をクリックします。
③「ソースを追加」ボタンをクリックします。


④「Select Account Type」を Businessを選択し、「Connect An Instagram Account」の「Login with Facebook」ボタンをクリックします


⑤下のような画面が表示されたら、「Yes,it is my domain」ボタンをクリックします。


⑥自分のアカウントが表示されますので、チェックをして「追加」ボタンをクリックします。


⑦下記画像のように、アカウントが表示されていたら登録完了です。



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


2.詳細設定


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


更新頻度の設定

これは、インスタグラムの最新情報をどのくらいの頻度でこちらのページに表示させるかを設定します。

管理画面メニュー「Instagram Feeds」→「設定」をクリックします。
Feedsタブをクリックして、キャッシュの設定をします。
「30分ごと」が一番短いサイクルの更新になるので、「30分ごと」を設定します。



カスタマイズ設定

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

レイアウト設定

管理画面の「Instagram Feeds」をクリックします。
下記のような画面が表示されるので、操作のペンマークをクリックします。


「フィールドレイアウト」をクリックします


投稿数を設定します。最初に表示する画像の枚数です。
・投稿数
 デスクトップ(パソコンから見たときの数)
 モバイル(スマホやタブレット等で見たときの数)

表示する横の枚数を設定します。
・列
 デスクトップ
 タブレット
 モバイル


配色を設定します。
・配色
 テーマから継承
 ライトカラー(背景色が白)
 ダークカラー(背景色が黒)
 カスタム(背景色、LoadMoreボタン色、followボタン色を指定)

・ヘッダー
 ヘッダーサイズ(大・中・小から選択)
 カスタムアバター(インスタグラムのプロフィール写真ではないものを表示したい場合設定)
 テキスト(ユーザー名や自己紹介分のフォントカラーを設定)
 自己紹介を表示(ユーザー名の下に、自己紹介分を表示する場合に設定します。)

・投稿
 画像と動画(自動検出のままにしてください)

・もっと見るボタン
 有効(非表示にしたい場合は、ボタンをオフにしてください)
 テキスト (ボタンに表示される文字)
 色(ボタンの背景、ホバー、テキストの色を背屮します。

・フォローボタン
 有効(非表示にしたい場合は、ボタンをオフにしてください)
 テキスト (ボタンに表示される文字)
 色(ボタンの背景、ホバー、テキストの色を背屮します。
 
・ライトBOX 通常版は設定不可
 



3.表示設定


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

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

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


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

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


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

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