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

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

インスタグラム大好き、SHIN(shin.7life)です。

インスタグラムのフィードをワードプレスに表示させるプラグインの設定方法と、インスタグラムのアップデートによるフィードが表示されないエラーを改善すべくアクションして解決したのでシェアしちゃいます。

インスタグラムをワードプレスに表示させるって?

PCでは、サイドバーに表示

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

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

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

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

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

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

Instagram Feedインストール

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

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

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

Instagram Feedの設定

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

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

パスワード忘れちゃった貴方へ

「Access Token」and「User ID」を取得

SHIN
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です。焦らず、順番通りにクリックして入力あるのみ!

インスタグラムをワードプレスに表示させよう

『3.Display Your Feed 』をクリック

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

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

コードの貼り方

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

えっ、カスタマイズって?!

自分好みにカスタマイズする方法

SHIN

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

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

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

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

『2. Customize』をクリック

レイアウト設定

SHIN

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

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

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

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

写真・プロフィール表示設定

SHIN

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が、背景色を選択できます。

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

テキストボタンの表示・各設定

SHIN

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

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

Instagram Feedが表示されない場合

インスタグラムの仕様変更(アップデート)が行われると、急にInstagram Feedが表示されないという現象が起こったりします。僕自身、何度も表示されなくなりまして、何やってダメな時はInstagram Feedの表示を外していました。諦めきれず、ずっと色々と改善方法を探していました。

で、遂に・・・

この記事を書く前に、あることを実行したら改善したのでシェアしちゃいます。

SHIN

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

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

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

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

\ SNSでシェアしよう! /

QOL未来創造|ワクワクする未来、つくろうの注目記事を受け取ろう

この記事が気に入ったら
いいね!しよう

QOL未来創造|ワクワクする未来、つくろうの人気記事をお届けします。

  • 気に入ったらブックマーク! このエントリーをはてなブックマークに追加
  • フォローしよう!

プロフィール紹介 プロフィール一覧

SHIN

SHIN

ワクワクする未来を実現させるプロ
(Instagram : shin.7life)

自分では選択することすらできない絶望的な運命、環境、状況から抜け出し、人生の主導権を自分で握り自分で人生をデザインして楽しく生きています。20代半ばに、海外から帰国した時は破天荒に「家も仕事もお金もない&極めつけに身分証はパスポートのみ」スーツケース1つから、復活しましたw自己啓発、心理学、ビジネスマーケティング、ファッション、旅行(非日常の世界)、写真や動画が大好きです。スタイリングでお困りの方は、ご相談ください^^

海外旅行、国内は頻繁にフラフラしています。とにかく逆境に強くて地獄に落ちてから勝負する奴です!凄くツイてる、よく寝て、よく食べ、よく笑って何でもネタにします。善くも悪くも子供みたいに無邪気な大人です。なぜなのか?に異常な関心があり、心理学や成功法則、ビジネスマーケティングを専門家から学んでいます。

ビジョン「人生を変える=ワクワクする未来、つくろう。」を現実させるには考え方次第、自分次第。
僕とあなたのQOL未来創造に繋がる"きっかけ"を情報発信できるようメディアを運営していきます!