インスタグラムをワードプレスに表示する「Instagram Feed」プラグインの設定と表示されない改善策

PCで観覧した時は、右側のサイドバーでインスタグラムのフィードを表示させています。インスタグラムを更新すると自動的にアップデートされるので便利です。

ちなみにワードプレスでは、外観→ウィジェット→サイドバーでテキスト（任意のテキスト）を追加させて、タイトルをInstagram（shin.7life)にして本文は[instagram-feed]と入力して表示させています。プラグイン「Instagram Feed」を使うことで、美しく魅せることができます。

icon-instagram もっと絶景をみてみるをクリックすると、インスタグラムに飛べるようになっています。表示が消えていたらインスタがアップデートして、バグって外したんだなと思ってくださいｗ

スマホで観覧した時は、下までスクロールするとインスタグラムのフィードを表示させています。表示する枚数や並べ方、’Load More’ Button（もっと表示させる）やら’Follow’ Button（自分自身のインスタアカウントへのリンク）などはテキストやボタンの色も設定可能。

インスタグラムをワードプレスに表示するイメージがリアルに想像できたかと思うので、実際にサクッと設定してみちゃいましょ！専門用語とか使わず、誰でもできるように解説するので安心してください。では、Instagram Feedをインストール開始します！

ワードプレスのプラグイン→新規追加→黄色のマーカー部分の検索窓に【 Instagram Feed 】と入力するとInstagram フィードというのが表示されます。

すでに僕は追加しちゃっているので、今すぐ更新と表示されていますがインストール前であれば【今すぐインストール】と表示されているのでクリックするとインストールできますよ。

ただし、インストールしただけでは使えません。必ずインストールした後に同じ場所に表示される【有効化】のボタンを忘れずにクリックしましょう！次に、設定しちゃいましょ。

まずインストールして無事に有効化まで完了すると、ワードプレスの画面に Instagram Feed が出現します。この画面になったら、Instagram｜Log in and get my Access Token and User IDと書いてある紺色のボタンをクリックしてください。

Instagramアカウントの認証が開始されます、ユーザーネームとパスワードを入れてログインしてください。えーー！！パスワード忘れちゃったという人は、インスタグラムのパスワードをリセットしましょう。３分以内に新しいパスワードに変更できるので関連記事を参照ください。

Instagram｜Log in and get my Access Token and User IDと書いてある紺色のボタンをクリックしてユーザーネームとパスワードを入力してログインすると、画面に「Access Token」と「User ID」が表示されます。「Use This Token」ボタンが表示されている場合は、クリックして設定を保存してくださいね。

表示された「User ID」を「Show Photos From：」の●User ID(s)の横にある空欄にコピペしてください。ここまで完了したら、スクロールした左下にある「変更を保存」をクリックして、ひとまずOKです。焦らず、順番通りにクリックして入力あるのみ！

インスタグラムをワードプレスに表示させることのできる「Instagram Feed」をクリックして、3.Display Your Feed タブをクリックすると黄色のハイライトに表示されているコード

[instagram-feed] をコピペしましょう。あとは、コードを貼るだけ！

このメディアでは、サイドバーに貼っているので参考になるように画像で解説すると、コードの貼り方は該当箇所にコピペするだけです！他にも固定ページや投稿記事などにも貼れちゃいますので、自分好みにカスタマイズするのがオススメです。

えっ、カスタマイズって？！

自分好みにカスタマイズする場合の設定ページは、ワードプレスのInstagram Feedをクリックしてから「2. Customize」から設定が可能です。

まずは、基本的なインスタグラム写真の配列（縦×横）や表示する総枚数の設定をしましょう！

僕と同じように、パッと見の美しさにこだわりたいなら写真と写真の余白部分の調整もできちゃいます。設定を調整→変更を保存をクリックしてから、PC・スマホでどんな感じで表示されているのか確認してみてください。WPのデザインテーマにもよるので、正解はコレってないので。

怖がらなくて大丈夫、何度やっても問題ないので焦らず落ち着いてやってみましょうね＾＾

さてさて、パッと見でわかりやすいように写真に解説入れて纏めてみました。全体の設定では、インスタグラムをワードプレスに表示させる時の写真の幅、高さ、表示する際の背景の色を設定することができます。（参照写真は、僕自身の設定）

その次に、レイアウト設定ですが表示させたい画像の総枚数、横列に何枚の写真を並べるのか、さらには写真と写真の空白である余白の設定をして変更を保存をクリックして、実際に確認してみましょう。変更を保存をクリックしないと反映されないので、ご注意ください。

あの・・・・反映されませんって方は、サイトTOPページが開いている状態でPCのキーボード【F5】を押してみてリロードしてみてください。どうでしょうか？

大丈夫そう？では、次に進みますよ。

Photosの項目では、表示順序や表示する画像サイズを選択できますよ。新しい順で表示させる（Newest to oldest）かランダム(Random)を選べます。僕は、新しい順で表示させています。

さらに表示させる画像サイズですけど、基本的に「Auto-detect」でいいんじゃないでしょうか。他には、Thumbnail（150×150）Medium(306×306）Full Size（640×640）で設定が可能です。表示させたい場所や用途によって自分好みに設定しましょう！

Photo Hover StyleとCarouselですが、instagram feedをアップデートさせたinstagram feed Proで設定が可能な項目のようです。今のところ、僕はアップグレードしていないです。

Headerの部分で何ができるかというと、インスタグラムのプロフィール情報の表示・非表示の設定ができます。凄いですよね。Show the Headerは、プロフィールのヘッダーを表示させちゃうか選択できます。イメージできなければ、まずはやってみましょう！

あとShow Bio Textっていうのが、インスタのプロフィールの文章（概要文）の表示・非表示選択。Header Text Colorが、背景色を選択できます。

設定・変更したら、必ず変更を更新をクリック！次で、ラストのレイアウト設定です。

さてさて、仕上げに大事なボタンの設定をしましょう！ワードプレスでさらに’Load More’ Button（もっと写真を表示させる）、ワードプレスからインスタグラムにリンクを飛ばせる’Follow’ Button（自分自身のインスタアカウントへのリンク）の表示・非表示設定。

あと、ボタンの文言（テキスト）やカラーもカスタム可能なので自分好みにカスタムしよう♪

まずは、インスタグラムのパスワードをリセットする→Instagram Feed→Instagram｜Log in and get my Access Token and User IDと書いてある紺色のボタンをクリックする。

Instagramアカウントの認証で、ユーザーネームと新パスワードを入れてログインするだけ！！何カ月も悩んでいたのに・・・ワードプレス上の画面では設定変更なしで、改善されました。

あなたの周りの友人で困っている人がいたら、この記事を教えてあげて助けてあげてください。シェア大歓迎ですし、今後の励みになります。最後までお読み頂き、ありがとうございます。

では、また(๑•̀ㅂ•́)و✧