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

TechAcademy

2017年4月25日 10:42

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

人気記事トップ10

人気記事ランキングをもっと見る

企画広告も役立つ情報バッチリ! Sponsored

ClickHouse Cloudが実現した広告運用SaaS「ATOM」のデータ基盤革新、パフォーマンスを向上しながら、運用負荷とコストを削減 11月11日 6:20 AIで開発が加速する時代、品質保証はどう変わる? Tricentisが示すAIエージェント活用の実像 11月9日 6:45 悪用までの猶予が「1分」に迫るフロンティアAI時代に開発と本番を貫く脆弱性管理が必要 10月29日 8:30 欧州CRA対応とSBOM運用。AI生成コードのOSS混入問題の対策とは ――スニペット単位で検出する「FossID」「Insignary Clarity」によるSBOM運用 9月16日 6:40 PostgreSQLからTiDBへ、稼働中SaaSで進める段階的DB移行の実践と再設計への展望 9月7日 6:30 機能安全開発におけるGoogleTestの活用を支援!「Parasoft C/C++test CT」で実現する効率化&AI連携 4月14日 6:30 【CNDW2025】Grafanaが明かす「オブザーバビリティの哲学」ー最小限の労力で実用的なインサイトを得るには 1月23日 6:30 【CNDW2025】プロダクト急増に備える基盤刷新 ーウェルスナビがECSからEKSへの移行で得た知見とは 1月15日 6:30 【CNDW2025】250環境を5人で運用、構築時間は30分に ーKINTOテクノロジーズが語るインフラ基盤組織の作り方 2025年12月18日 6:30 新たな自動化で熱視線! AIエージェントの「推論能力」を支える2つのコンポーネントとは? 2025年11月28日 6:30