ガジェット通信 GetNews

見たことのないものを見に行こう
「ジャスティス・リーグ」特集サイト

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

DATE:
  • ガジェット通信 GetNewsを≫

最近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週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。

カテゴリー : デジタル・IT タグ :
TechAcademyマガジンの記事一覧をみる ▶
  • 誤字を発見した方はこちらからご連絡ください。
  • ガジェット通信編集部への情報提供はこちらから
  • 記事内の筆者見解は明示のない限りガジェット通信を代表するものではありません。