レスポンシブ対応 WordPressのギャラリーを美しく表示するプラグイン

WordPressの標準のテーマにあるギャラリーは、サムネイルを並べて表示し画像ファイルにリンクするだけですのであまり見栄えが良いとはいえません。WordPressのギャラリーを美しく表示するプラグインを探してみたところ良いプラグインがありましたので紹介します。

Responsive Lightbox

20160128_02Responsive Lightbox by dFactoryは、レスポンシブ対応のlightboxプラグインです。設定から6種類のLightbox(SwipeBox, prettyPhoto, FancyBox, Nivo Lightbox, Image Lightbox, Tos “R” Us)を選択でき簡単に表示の仕方を変更できます。さらにプラグインをインストールするだけでギャラリーや画像へのリンク、YouTube, Vimeoの動画ページヘのリンクを自動でlightboxで表示しますのでコードを書き換えたりする手間は要りません。当サイトにもResponsive Lightboxのプラグインを使用していていますてのでサムネイルをクリックするとSwipeBoxのlightboxで表示してくれます。

Fotorama

20160128_03Fotoramaは、シンプルでかつ美しくギャラリーを表示できるプラグインです。プラグインをインストールすると[gallery ids="1,2,3"]のギャラリーのショートコードを美しく表示できます。こちらのプラグインは設定画面がなくギャラリーのショートコードにパラメータを追加することで設定が出来ます。パラメータは以下のとおりです。

[gallery ids="1,2,3" fotorama="false"]fotoramaのプラグインを使用しません。
[gallery ids="1,2,3" nav="thumbs"]ナビゲーションをサムネイルで表示します。
[gallery ids="1,2,3" allowfullscreen="true"]フルスクリーンモードを使用します。
[gallery ids="1,2,3" fit="cover"]画像の表示形式を設定します。contain, cover, scaledown, none
[gallery ids="1,2,3" transition="crossfade"]エフェクトを設定します。slide, crossfade
[gallery ids="1,2,3" hash="true"]画像をクリックした場合URLを変更します。
[gallery ids="1,2,3" loop="true"]ループする場合に設定します。
[gallery ids="1,2,3" autoplay="3000"]オートプレイをする場合に設定します。ms単位で数値を設定します。
[gallery ids="1,2,3" shuffle="true"]画像がシャッフルされて表示されます。
[gallery ids="1,2,3" keyboard="true"]キーボードで操作できるようにする場合に設定します。
[gallery ids="1,2,3" arrows="true" click="true" swipe="true"]矢印、クリック、スワイプでの動作設定をします。
[gallery ids="1,2,3" navposition="top"]ナビゲーションを画像の上に表示する場合に設定します。