fgallery002

1年前にデジイチを購入してから暇があれば写真を撮りに行くようになりました。撮った写真は選んでFlickrにアップロードしています。

そのFlickrの写真をブログで使えればいいなと思って探していたら、今回のプラグインにたどり着きました。WordPressでブログをやっていて、写真を多用する人におすすめです。

※Flickrを使っていなければプラグインは使えませんが…

スポンサードリンク

こんな感じでFlickrの写真を表示できます

まずはどんなものが作れるのかを見てみましょう。

flickr_gallery001

Flickrにアップロードした写真をグリッド表示できます。表示する写真はPhotostreamをはじめとして、Photoset(Album)、Group、Tagsなどに対応しています。ページナビゲーションが付いているので、写真の枚数が多くても問題ありません。

プラグインの使い方

初期設定はやや面倒に感じるかもしれません。まずはプラグインをインストールするページより”Awesome Flickr Gallery”を探してインストールを行い、プラグインを有効化します。

WordPress › Awesome Flickr Gallery « WordPress Plugins

fgallery003

Awesome Flickr GalleryのDefault Settingsを開いて初期設定を行います。この設定ページの中にはFlickr User SettingsとGallery Settingsという項目があり、初回のみ設定が必要です。

Flickr User Settings

[参考] Flickr APIを使ってみよう(1.APIキーの取得) | Tech Booster

  • Flickr API Secret
    API Keyを取得したときに同時に取得

Gallery Settings

  • Max Photos Per Page
    1ページあたりに表示する写真の枚数

  • Sort order of Photos
    写真の表示する順番(撮影日付順/アップロード順/ランダム等)

  • Size of the Photos
    写真の表示サイズ

  • Custom Width
    Size of the PhotosでCustomを選んだ場合、任意のサイズを選択可

  • Photo Titles
    写真のタイトルを表示するか

  • Photo Descriptions
    写真の説明文を表示するか

  • Number of Columns
    写真を表示する列数

  • Slideshow Behavior
    写真をクリックしたときの挙動(Colorbox:モーダルダイアログに写真を表示 / Link to Flickr Photo Page:Flickrの写真ページへのリンク / 画像にリンクを付けない)

  • Background Color
    ギャラリーの背景色。黒/白/透明を選択可

  • Gallery Width
    ギャラリーの幅。10%から100%の間で設定可

  • Disable Pagination?
    ページナビゲーションを無効にするか。サイドバー等に表示する場合に使えます。

  • Add a Small Credit Note?
    プラグイン作者のクレジットを表示するか

設定を完了して、Save Changesをクリックすると初期設定は完了です。

[html][AFG_gallery][/html]

ギャラリーを表示させたい場所に上記のショートコードを埋め込んでください。ギャラリーが表示されるはずです。

いくつもギャラリーを作ってみよう

初期設定は完了したでしょうか。このプラグインではいくつもギャラリーを作ることができます。つまり、アルバムごとにギャラリーを作って、サイドバーや固定ページなど様々な場所に表示させることができるのです。

fgallery004

WordPressのダッシュボードの左側に表示されているメニューからAwesome Flickr Galleryを選んで、Add Galleryに進みます。

fgallery005

Gallery ParametersやFlickr Settingsでギャラリーの名前やFlickrのどのアルバムから写真を持ってくるかを設定します。Gallery Settingsは何も触らなければ先程設定したDefault Settingsの値が適用されます。

すべての設定項目を選んだら、Add Galleryをクリックします。

fgallery006

ページが更新され、ページの上の方に作成したギャラリーのショートコードが表示されるので、それをギャラリーを表示したい場所に埋め込んでください。

[html][AFG_gallery id=’2′][/html]

flickr_gallery002

モバイルにも対応!

fgallery001

スマートフォンからギャラリーを見るとご覧のとおり、サムネイルがディスプレイ幅にあうように縮小表示されます。

最後に

旅行ブログや写真ブログなど写真を大量に見せたいときに役に立つのではないかと思いました。

この記事をシェアする

この記事と同じカテゴリーの記事

この記事を書いた人

naremo [ナレモ]はWebサービスやアプリ、カメラ、プログラミングについて紹介するブログです。