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

インスタグラム大好き、SHIN(shin.7life)です。
インスタグラムのフィードをワードプレスに表示させるプラグインの設定方法と、インスタグラムのアップデートによるフィードが表示されないエラーを改善すべくアクションして解決したのでシェアしちゃいます。
【最新2020年版】Instagram Feedが表示されないエラーの解決法↓↓↓
目次を確認してみる?
インスタグラムをワードプレスに表示させるって?
PCでは、サイドバーに表示

スマホでは、スクロールして表示

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

すでに僕は追加しちゃっているので、今すぐ更新と表示されていますがインストール前であれば【今すぐインストール】と表示されているのでクリックするとインストールできますよ。
ただし、インストールしただけでは使えません。必ずインストールした後に同じ場所に表示される【有効化】のボタンを忘れずにクリックしましょう!次に、設定しちゃいましょ。
Instagram Feedの設定

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

表示された「User ID」を「Show Photos From:」の●User ID(s)の横にある空欄にコピペしてください。ここまで完了したら、スクロールした左下にある「変更を保存」をクリックして、ひとまずOKです。焦らず、順番通りにクリックして入力あるのみ!
インスタグラムをワードプレスに表示させよう
『3.Display Your Feed 』をクリック

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

えっ、カスタマイズって?!
自分好みにカスタマイズする方法

自分好みにカスタマイズする場合の設定ページは、ワードプレスのInstagram Feedをクリックしてから「2. Customize」から設定が可能です。
まずは、基本的なインスタグラム写真の配列(縦×横)や表示する総枚数の設定をしましょう!
僕と同じように、パッと見の美しさにこだわりたいなら写真と写真の余白部分の調整もできちゃいます。設定を調整→変更を保存をクリックしてから、PC・スマホでどんな感じで表示されているのか確認してみてください。WPのデザインテーマにもよるので、正解はコレってないので。
怖がらなくて大丈夫、何度やっても問題ないので焦らず落ち着いてやってみましょうね^^
『2. Customize』をクリック
レイアウト設定

さてさて、パッと見でわかりやすいように写真に解説入れて纏めてみました。全体の設定では、インスタグラムをワードプレスに表示させる時の写真の幅、高さ、表示する際の背景の色を設定することができます。(参照写真は、僕自身の設定)
その次に、レイアウト設定ですが表示させたい画像の総枚数、横列に何枚の写真を並べるのか、さらには写真と写真の空白である余白の設定をして変更を保存をクリックして、実際に確認してみましょう。変更を保存をクリックしないと反映されないので、ご注意ください。
あの・・・・反映されませんって方は、サイト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 Feedが表示されないという現象が起こったりします。僕自身、何度も表示されなくなりまして、何やってダメな時はInstagram Feedの表示を外していました。諦めきれず、ずっと色々と改善方法を探していました。
で、遂に・・・
この記事を書く前に、あることを実行したら改善したのでシェアしちゃいます。

まずは、インスタグラムのパスワードをリセットする→Instagram Feed→Instagram|Log in and get my Access Token and User IDと書いてある紺色のボタンをクリックする。
Instagramアカウントの認証で、ユーザーネームと新パスワードを入れてログインするだけ!!何カ月も悩んでいたのに・・・ワードプレス上の画面では設定変更なしで、改善されました。
あなたの周りの友人で困っている人がいたら、この記事を教えてあげて助けてあげてください。シェア大歓迎ですし、今後の励みになります。最後までお読み頂き、ありがとうございます。
では、また(๑•̀ㅂ•́)و✧
ちなみにワードプレスでは、外観→ウィジェット→サイドバーでテキスト(任意のテキスト)を追加させて、タイトルをInstagram(shin.7life)にして本文は[instagram-feed]と入力して表示させています。プラグイン「Instagram Feed」を使うことで、美しく魅せることができます。
icon-instagram もっと絶景をみてみるをクリックすると、インスタグラムに飛べるようになっています。表示が消えていたらインスタがアップデートして、バグって外したんだなと思ってくださいw