ギャラリーやスライドショー向けのプラグインと言えば「NextGEN Gallery」がイチオシでした。@web_shufuです。しかし、最近アップデートのたびに不具合が発生しているので、他のプラグインを物色したら、「Grand Flagallery – Photo Gallery Plugin」が結構イイのでご紹介。
かなりキレイなスライドショー
冒頭の画像は「Grand Flagallery」によって表示されるスライドショーのデモページのキャプチャーです。
シンプルながら洗練されたデザインです。
「FS」ボタンでフルスクリーモードのON/OFFを切り替えます。(デフォルトではOFF)
「SL」ボタンは時間の経過に伴う自動スライドのON/OFFを切り替えます。(デフォルトではON)
ブラウザの幅を変化させるとわかりますが、一応レスポンシブ対応です。(あまりに幅が広いデバイスでは余白が少々目立ちます。)
こちらのデモページによればスライドショーにBGMも設定できるようです。慣れると凄いのが作れそうです。
インストール・ギャラリー名設定
「Grand Flagallery」は、Wordpress管理画面左サイドバーの「プラグイン」⇒「新規追加」からインストール、有効化します。
すると左サイドバーに「FlAGallery」が現れるのでクリック。さらに「Manage Gallery」をクリックすると以下の画面になります。
ギャラリー名を適宜決めて「New gallery」に入力後、「Add gallery」を押すとギャラリー名の設定は完了です。
ギャラリー用写真・画像のUp load
続いて「Upload Images」をクリックすると以下の画面になります。
左上の「Choose Gallery」で今作ったギャラリー名を選び、「Add Files」をクリックしてアップロードするファイルを選び、「Start Upload」でアップロード。
ギャリー用写真・画像の確認
「Add Files」「Start Upload」ボタンの少し下を見ると「Gallery Overview」ランがあって、そこに今画像をアップロードしたギャラリーがあります。これをクリックしてください。
すると、画面の真ん中辺りからギャラリー用にアップロードした画像の一覧が出ます。
スライドショー・ギャラリーの埋め込み
Grand Flagalleryプラグインをインストールすると、個別投稿や固定ページの編集画面に「FlAGallery」ボタンが現れます。
ギャラリーを表示したい場所でこのボタンを押すと、以下のように埋め込むギャラリー名を選択する画面になるので、適宜選んで「insert」を押します。
すると、
[flagallery gid=数字]
というショートコードが埋め込まれ、かなり洗練つつも、シンプルなスラードショー・ギャラリーが完成します。
動画・音楽等さまざまなメディアギャラリーが作れる
ここまで、画像スラーダー形式のギャラリーを作る話ばかりしてきましたが、「Grand Flagallery」では、動画や音楽メディアのギャラリーも作れます。
メディアファイルを多用するサイトを運営されている方にはとてもお勧めです。
高速化のためにjavascriptを操作するプラグインとは相性が悪い
このようにとても魅力的な「Grand Flagallery」ですが、弱点もあります。
「Grand Flagallery」はjavascriptを操作するプラグインとコンフリクトを起こすようなのです。
当サイトでは高速化のためにjavascriptを操作するプラグインを使っています。
- 【Wordpress高速化日記】レンダリングブロックjavascript/cssを排除するプラグイン3つ
- JavaScriptの読み込みをフッターで行うWordpressプラグイン、JavaScript to FooterとHead Cleaner
「Grand Flagallery」を導入したら、本来スライドショーが表示されるべき場所は真っ白になってしまいました。
javascriptを操作するプラグインを全て停止したら、スライドショーはきちんと表示されました。
「Grand Flagallery」はjavascriptを操作するプラグインと相性が悪いようです。