えじの自由帳

今の自分を書きためるブログ

Wordpress

WordPressでInstagramのギャラリーページを作る方法

2014/09/04

wp-insta

はじめに

このブログで使っている写真は旅先などでiPhoneでぱちりとしたものが多いわけですが、保存先にはFlickrとInstagramを利用しています。

Flickrはブログで使う写真をすべて、Instagramはその中でも綺麗に撮れたモノをアップロードしています。

今回、試しにInstagramのギャラリーページを作ってみました。

http://sakueji.com/gallery/

今回はこれの作り方を紹介したいと思います。

使うプラグイン

使うプラグインはAlpine PhotoTile for Instagramです。

インストール

WordPressのプラグイン追加画面で「Alpine PhotoTile for Instagram」と入力して検索すればヒットします。

あとはプラグインの設定をしていきます。

Instagram側の設定

Instagram Developerへの登録

  1. http://instagram.com/developer/にアクセス
  2. 「アプリケーションの管理」をクリックします
  3. 各種情報の入力
  • Your Website:自分のサイトのURLを入力
  • Phone Number:電話番号を入力(かかってくることはないらしいので適当でも大丈夫かと)
  • What do you want to build with the API?:「A plugin for my WordPress website.」と書いておけばOK

入力し終わったらSign upをクリックして登録してください。

アプリケーションの登録

再びhttp://instagram.com/developer/にアクセスし、Register Your Applicationを選びます。

スクリーンショット_2014-02-19_0_19_07-3

すると、アプリケーション管理という画面が出るので、「新しいアプリを登録」を押すと以下のような画面があらわれます。

スクリーンショット 2014-02-19 13.46.26

Application Name:ブログの名前

Description:「A plugin for my WordPress website.」と書いておけばOK

Website:ブログのURL

OAuth redirect_uri:WordPressの管理画面からAlpine PhotoTile for Instagramの設定を開き、Add Instagram Userタブから下を見ていくと出てくるので、これをコピペします。

スクリーンショット_2014-02-19_13_49_15-4

Client IDとClient Secretの登録

アプリケーションの登録が終われば、以下のような画面が出ます。

このページに書いてある、Client IDClient Secretを使います。

スクリーンショット_2014-02-19_13_55_12-2

Alpine PhotoTile for Instagramの設定の、Add Instagram Userタブを開きます。

スクリーンショット 2014-02-19 14.00.24

このフォームに先ほどのページのClient IDClient Secretを入力してAdd and Authorize New Userをクリックすれば完了です。

ギャラリーページを作る

Alpine PhotoTile for Instagramの設定から、Shortcode Generatorタブを開きます。

スクリーンショット 2014-02-19 14.15.20

おすすめの設定は以下の通りです。

  • Image Links:Use Lightbox
  • Style:Wall
  • Photo per row:3
  • Number of Photos:30

「Add slight image shadow.」
「Add white image border.」
「Highlight when hovering.」
「Add slight curve to corners.」の4つはお好みでチェックを入れるのが良いと思います。

設定が終わったらGenerate Shortcodeを押して、出てきたショートコードを固定ページに貼り付ければギャラリーページのできあがりです!

 Wordpress