WordPressでの画像貼り付けを効率化する方法 【Flickr利用,Lightbox 2】

  • 投稿 : 2012-03-22
  • 更新 : 2016-03-19

Flickrと Lightbox 2の組み合わせ

・無料で画像を外部における
・Flickr画像のOnly You (Private)が貼り付け可能
・ブログを書くときにFlickrのアップロードから貼り付けまで一連動作が可能
・すでにアップロードされているFlickr画像の貼り付けが可能
・クリックすると画像がその場で大きくなる

BloggerとPicasaの組み合わせでできることを、WordpressとFlickrの組み合わせで実現できます。格安のレンタルサーバーでWordpressを利用してる場合は、画像は外部のサービスにおいた方がよいのではないか?と思います。


使用するプラグイン

WordPressは3.1.1で確認しました。
・WP Lightbox 2 v2.0
http://wordpress.org/extend/plugins/wp-lightbox-2/
・Flickr Manager v2.3
http://www.fwaggle.org/blog/internet/update-wordpress-plugins-profit

Flickr Managerの作者はTrent Gardnerのようですが現在配布されていないので,V2.3の改良版を配布している上記のURLから入手しました。

情報元
デジカメ写真からブログ投稿までの俺的最強の流れ2010 – [Mu]ムジログ

※WP Lightbox 2 v2.1にすると連動?しないようでうまく動作しません。

Flickr Managerの設定

Flickr Managerの設定で、「Authenticate」ボタンを押して、Flickr側で承認します。
失敗してもやり直しができます。


実際の使い方

記事編集画面で、Add Flickr photoボタンを押下すると、Flickr Managerが立ち上がります。
既存のFlickr画像を貼り付ける場合は「My Photos」タブ、画像をFlickrにアップロードするところからする場合は、「Flickr Upload」タグを選択します。

「My Photos」で画像一覧から貼り付けたい画像を選択して、画像サイズなどを選択します。「Javascript Viewer」にチェックを入れると、クリックしたときに画像が拡大表示(Lightbox 2の機能)されます。

アプリの認証の解除は、以下のURLから可能
http://www.flickr.com/services/auth/list.gne


Flickr ManagerのアップロードをOnly You (Private)に

プラグインをのままだとPublicでアップロードされます。Only You (Private)に変更したいのですが、設定するところがないので、ソースに直に書きました。

FlickrManager.phpの function upload_panel()の部分
if(isset($_POST['photoDesc']) && !empty($_POST['photoDesc'])) $params = array_merge($params,array('description' => $_POST['photoDesc']));

$params = array_merge($params,array('is_public' => 0)); //この行を追加
    
                $rsp = $this->upload($params);

その他

Picasa用のプラグインも探してみたが、非公開(限定リンク)の画像を貼り付けられるものを見つけられなかったこともあり採用しなかった。

フォト蔵も検討したが、サムネイル画像を生成しないようなのでブログには向かないということで不採用。

Flickr利用,Lightboxでほかのプラグインの組み合わせでも実現可能かもしれないが、確実にできそうな情報が見つけることができなかったのでほかはあまり試していない。試してみた中で比較的、私の要望を満たすものがこの記事のものだった。しかし、ほかにおすすめがあれば教えてください。


WordPress3.4対応

Flickr Managerのスクリプトが一部読み込まれないようです。
header.phpに以下を以下を追加すれば動作しました。
<link rel="stylesheet" href="<?php bloginfo( 'url' ); ?>/wp-content/plugins/wordpress-flickr-manager/css/lightbox.css" type="text/css" />
<script type='text/javascript' src='<?php bloginfo( 'url' ); ?>/wp-content/plugins/wordpress-flickr-manager/js/jquery.lightbox.js?ver=3.3.2'></script>
<script type='text/javascript' src='<?php bloginfo( 'url' ); ?>/wp-content/plugins/wordpress-flickr-manager/js/wfm-lightbox.php?ver=3.3.2'></script>

【ブログ内で関連ある記事】

Flickrの画像をローカルHDDにバックアップ(一括ダウンロード)ツール Fotobounce
スポンサーリンク