【WordPress】WPとFlickrを連携させる「FlickrEx」で「EXIF情報」を取得・表示する方法
2018/01/24
前回ポストで紹介したWPとFlickrの連携の続き。Flickrから引っ張って表示している写真に、EXIF情報を自動表示するようにもしたいと思います。
EXIF情報を自動表示させる
ブログパーツ「FlickrEx」を利用する
「FlickrEx」というブログパーツを利用します。
FlickrExについては以下を参照してください。
http://blog.drikin.com/2013/02/flickrex.html
プラグイン化してやろうかとも思いましたが、読むと、WPのheaderテンプレートに記述するだけの簡単仕様でした。
なので、説明されている通りにしてみたいと思います。
が、ちょいと注意。
http://blog.drikin.com/2013/05/flickrex-1.html
上記を読むと、GitHubに設置してあるコードを参照していたのができなくなった、ということで、jsファイルの参照先が変わっているようです。
ということで、以下のようにheaderテンプレの wp_head(); の後辺りに記述。
FLICKREX_API_KEY と FLICKREX_EXIF_JQUERY_SELECTOR も無くし、jQueryは既に読み込ませているので、純粋に FlickrEx 関係のjsファイルだけを読ませる形としました。
1 2 3 4 5 |
<script type="text/javascript"> var FLICKREX_EXIF_FORMAT = "%camera% / %Lens Model% / %Focal Length% / f/%aperture% / ISO %ISO Speed% / %Exposure% sec / %Exposure Bias% EV / WB:%Light Source%"; </script> <script src="//flickrex.drikin.com/stable/flickrex.min.js"></script> <script src="//flickrex.drikin.com/stable/exifex.min.js"></script> |
FLICKREX_EXIF_FORMAT は個人的趣味として、紹介されているデフォルトに加えて、レンズモデル(%Lens Model%)とホワイトバランス(%Light Source%)を追記しました。
※カメラ側の設定か、レンズ名は表示してくれませんでした(汗)
編集したheaderテンプレートをアップロードしてリロードすれば、写真の下にEXIF情報をテキストで表示してくれます。
CSS
スタイル関係も元サイトにある通り、 .flickr-exif クラスを用意して書けば良いだけなので、以下のようにしてみました。
1 2 3 4 |
.flickr-exif { font-size: small; color: #666; } |
うむ、シンプル。
これで、このようになってくれます。
素敵。