インスタの写真をアップ!WordPressでInstagramの写真を表示する方法【初心者向け】

2017年4月25日(火)
TechAcademy

最近Instagramを使う人が増えていますね。よく使われる理由の一つとして写真の加工が手軽にできることが挙げられるでしょう。そして、その加工した写真をそのままWordPressの記事に埋め込むことができたら良いですよね。

今回は、WordPressの記事内にInstagramの写真や動画を埋め込みする方法を紹介していきます。

なお本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。

20160620

田島メンター!!インスタの写真をWordPressの記事に埋め込みたいって言われたんですけど、どうしたらいいですか?

20163020-2

インスタの画像ならプラグインを使えば簡単にできるよ。教えてあげるね。

20160620

お願いします〜♪

Instagram Feedとは

今回は、Instagram Feedというプラグインを使ってWordPress上に写真を表示していきます。

Instagram Feedは、InstagramのアカウントとWordPressを連携して画像を表示することができます。また、表示する画像の数やサイズも変えることができるので、カスタマイズも簡単に行えます。

実際に設定画面を見ながら解説していきます。

Instagram Feedの使い方

このプラグインは、管理画面から「プラグインを検索」してインストールもできますし、プラグイン公式サイトからダウンロードすることも可能です。

インストールがわからない場合はWordPressのプラグインをインストールする方法をご覧ください。

有効化したら、管理画面上に「Instagram Feed」という項目が追加されているはずです。クリックし開くと、いくつか項目がありますので一つずつ見ていきましょう。

スクリーンショット 2016-03-25 10.48.28

「Configure」というところでまずは、自分のInstagramのアカウントを連携していきます。

ユーザーIDとパスワードを求められるので、入力しましょう。

スクリーンショット 2016-03-25 11.02.04

連携ができたら承認ボタンをクリック。

スクリーンショット 2016-03-25 11.02.22

アカウントの連携ができるとアクセストークンとユーザーIDが付与されます。

付与されたコードをコピペして入力すると、自分のInstagramの写真を投稿することができます。

続いて、実際に投稿してみて表示を確認しましょう。

スクリーンショット 2016-03-25 11.23.03

[instagram-feed]と入力すると、先ほど連携したアカウントの画像がそのまま表示されます。

スクリーンショット 2016-03-25 11.05.07

自分の投稿にInstagramの写真を表示することができました。

デフォルトでは、横に4枚画像が並んで表示されます。もっと画像を大きく見せたいなど表示の仕方を変えたい場合は、先ほどの設定画面に戻りましょう。

スクリーンショット 2016-03-25 10.49.29

「Display Your Feed」というタブで色々とカスタマイズすることができます。

表示する写真の数や間隔など簡単に設定できるので、ぜひ活用してみてください。

Instagramの写真を表示する流れはこれで以上となります。

ぜひ、WordPressの使い方を覚えましょう!

20160620

ありがとうございました!!!やっぱり写真があると見栄えがいいですね♪

20163020-2

そうだね。新しい写真も更新してくれるから、記事を新しくしなくても新鮮に見えるね。

20160620

そうですね〜♪

[お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中の8週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。


TechAcademyマガジンは、オンラインのプログラミングスクールTechAcademyが運営する教育×ITに関するWebメディアです。トレンドや最新情報など役に立つ記事を発信しています。
https://techacademy.jp/magazine/

連載バックナンバー

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています