WordPressにFlickrの写真を読み込む！！便利な2つのプラグイン『flickrRSS』と『Flickr + Highslide』

今回はWordPressにFlickrの写真を読込むプラグイン『flickrRSS』と『Flickr + Highslide』の2つをご紹介します。当ブログでもFlickrに写真を投稿していますので、今回はそこから写真を読み込むことで表示確認をしていきたいと思います。

1つ目は『flickrRSS』です。こちらは最大20枚までflickrからサムネル写真を読込むことができ導入も非常にシンプルで分かりやすいです。

2つ目は『Flickr + Highslide』です。このプラグインを使えばFlickr写真を使ってポップアップギャラリーを作成することができます。

もし、今回の記事を機にFlickrに写真を載せたいとお考えの方がいましたらFlickrのURLを載せておきましたので、そちらよりユーザー登録ください。

Flickr
http://www.flickr.com/

flickrRSS

最初は『flickrRSS』の導入方法をご紹介します。このプラグインはFlickrのAPI KEYなどを取得することなく簡単に写真を表示することができます。

STEP01

まずプラグインをインストールします。管理画面のプラグイン新規追加から『flickrRSS』を検索し該当のプラグインをインストールしたら有効にしてください。

尚、配布サイトからダウンロードすることもできます。

flickrRSS for WordPress｜eightface.com
http://eightface.com/wordpress/flickrrss/

STEP02

プラグインを有効にしたら、管理画面の設定⇒『flickrRSS』メニューを表示します。

①：表示枚数と、表示タイプを選択します。表示タイプは【’user’, ‘favorite’, ‘set’, ‘group’, ‘public’】から選択します。
②：表示したいユーザーのIDを入れます。もし、IDが分からなければ下記のサイトで調べることが可能です。
flickr ID Checker
http://flickr-id.cohga.net/
idGettr
http://idgettr.com/
③：写真のタグを指定することで、関連した写真のみ表示することができます。
尚、複数タグを指定する場合はカンマ『,』でつなぎます。
④・⑤・⑥：⑤エリアで写真表示の指定を行います。尚、表示できる写真情報は右側の『”Item HTML” metatags:』と書かれている部分から選択できます。④・⑥ではその情報を囲む要素を指定します。
⑦：写真をキャッシュさせるかどうかを選択します。

STEP03

管理画面での設定が完了したらページに画像を読み込みます。読み込み方法は下記のソースを表示したいエリアに記述するだけになります。

<?php get_flickrRSS(); ?>

これで写真が読込まれます。確認用にブログの右メニューにFlickrエリアを設置しました。

尚、『get_flickrRSS（）』関数は引数の値で表示設定を変更することもできます。例えば下記のような値を渡すと、タグkyotoの写真が16枚表示されるようになります。

<?php get_flickrRSS(array(
    'set' => 'user', 
    'num_items' => 16,
　  'tags' => 'kyoto',
    'id' => 'ユーザーID'));
 ?>

配布サイトにはいくつかのサンプルソースが載っていますのでもし気になりましたら配布サイトよりご確認ください。

flickrRSS for WordPress｜eightface.com
http://eightface.com/wordpress/flickrrss/

以上で、『flickrRSS』の紹介を終わりたいと思います。尚、『flickrRSS』はウィジェットで使用することもできます。

Flickr + Highslide

続いて紹介するプラグインは『Flickr + Highslide』です。こちらのプラグインを使用することでFlickrを用いたポップアップ写真ギャラリーを作成することができます。

STEP01

まずFlickrのAPI KEYを取得します。ここでは米のyahooメールが必要になりますので必要事項を記入しつつ下記URLより登録してください。

FlickrのAPI Keysページ
http://www.flickr.com/services/api/misc.api_keys.html

尚、私はこちらのページを参考にしました。
Flickr Flash 連携 vol1 〜API Key作成〜｜SINAP公式ブログ
http://blog.sinap.jp/2009/06/flickr-flash-vol1-api-key.html

STEP02

準備が整ったらプラグインの新規追加で『Flickr + Highslide』と検索しインストール後にプラグインを有効化してください。プラグインを有効にしたら管理画面の設定⇒『Flickr + Highslide』メニューを表示します。

①：STEP01で取得したkeyを入力します。
②：ユーザーIDを入力します。もし、IDが分からない場合は下記サイトで調べることができます。
flickr ID Checker
http://flickr-id.cohga.net/
idGettr
http://idgettr.com/
③：表示したい画像の枚数を入力します。
④：写真のSetを指定することで、そのSetの写真のみ表示されるようになります。
⑤：13の写真表示方法からプルダウンより１つ選びます。また、後半の8つがギャラリータイプになっています。
⑥：クリック時に表示される画像サイズを選択します。
⑦：サムネイルサイズを選択します。
⑧：サムネイル表示をランダムにするかを選択します。
⑨：クリック時にタイトルを表示するかを選択します。
⑩・⑪：⑩にチェックを入れることでページ機能を使えるようにできます。ただし⑪に何枚区切りでページが変わるかを必ず記入する必要があります。

設定後に『Save changes』ボタンをクリックして完了です。

STEP04

最後に読み込みの表示確認をします。読込みたい場所に下記ソースを記述すればOKです。

<?php flickr_highslide(); ?> 

これで管理画面で設定したように写真が表示されていきます。確認用にFlickrページを作りましたので、下記ページでご確認ください。尚、ギャラリータイプは『Horizontal thumbstrip at the bottom』を使っています。

Flickr読み込み確認ページ
http://www.html5-memo.com/flickr/

以上で、『Flickr + Highslide』プラグインの紹介を終わりたいと思います。