HCDコンサルティング(旧・中川勉社会保険労務士事務所FPウェブシュフ)のブログ

【WordPressプラグイン】シンプルなギャラリー・スライドショーが簡単に作れる「Grand Flagallery」

2013-11-04_1412
ギャラリーやスライドショー向けのプラグインと言えば「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」をクリックすると以下の画面になります。
2013-11-04_1234
ギャラリー名を適宜決めて「New gallery」に入力後、「Add gallery」を押すとギャラリー名の設定は完了です。

ギャラリー用写真・画像のUp load

続いて「Upload Images」をクリックすると以下の画面になります。
2013-11-04_1301
左上の「Choose Gallery」で今作ったギャラリー名を選び、「Add Files」をクリックしてアップロードするファイルを選び、「Start Upload」でアップロード。

ギャリー用写真・画像の確認

「Add Files」「Start Upload」ボタンの少し下を見ると「Gallery Overview」ランがあって、そこに今画像をアップロードしたギャラリーがあります。これをクリックしてください。
2013-11-04_1358

すると、画面の真ん中辺りからギャラリー用にアップロードした画像の一覧が出ます。
2013-11-04_1359

スライドショー・ギャラリーの埋め込み

Grand Flagalleryプラグインをインストールすると、個別投稿や固定ページの編集画面に「FlAGallery」ボタンが現れます。

2013-11-04_1337

ギャラリーを表示したい場所でこのボタンを押すと、以下のように埋め込むギャラリー名を選択する画面になるので、適宜選んで「insert」を押します。
2013-11-04_1338

すると、

[flagallery gid=数字]

というショートコードが埋め込まれ、かなり洗練つつも、シンプルなスラードショー・ギャラリーが完成します。

動画・音楽等さまざまなメディアギャラリーが作れる

ここまで、画像スラーダー形式のギャラリーを作る話ばかりしてきましたが、「Grand Flagallery」では、動画や音楽メディアのギャラリーも作れます

メディアファイルを多用するサイトを運営されている方にはとてもお勧めです。

高速化のためにjavascriptを操作するプラグインとは相性が悪い

このようにとても魅力的な「Grand Flagallery」ですが、弱点もあります。

「Grand Flagallery」はjavascriptを操作するプラグインとコンフリクトを起こすようなのです。

当サイトでは高速化のためにjavascriptを操作するプラグインを使っています。

「Grand Flagallery」を導入したら、本来スライドショーが表示されるべき場所は真っ白になってしまいました。

javascriptを操作するプラグインを全て停止したら、スライドショーはきちんと表示されました。

「Grand Flagallery」はjavascriptを操作するプラグインと相性が悪いようです。


投稿日

カテゴリー:

投稿者:

 最終更新日:

タグ: