【WP】標準ギャラリーをGalleriffic対応にするプラグイン『Photospace』

wp-photospace-gallery

『Photospace』は、jQueryのサムネイル付のスライドショーギャラリーを実装できる「Galleriffic」を、WordPressの標準ギャラリーのショートコードに対応させることができるプラグインです。

WordPressでは標準ギャラリーのショートコードの出力に関して、functions.phpなどにカスタマイズしたコードを記述して拡張することができますが、カスタム用のコードやJSファイルをセットするのも手間ですので、『Photospace』はプラグインですぐに導入できるのが魅力的です!

『Photospace』ダウンロード

プラグインのダウンロードとギャラリーのデモはこちらからできます。

『Photospace』インストール

『Photospace』プラグインをダウンロードして、プラグインをインストール後、有効化するとメニューに「Photospace Gallery Options」が追加されます。

Photospace-options-img

設定するオプションは、主に「Galleriffic」のオプションとリンクしていますね。

設定名 補足説明
Show download link 画像のダウンロードリンクを表示するか
Show controls (play slide show / Next Prev image links) コントロールパネルを表示するか(プレイボタンや前へ、次へのリンクを表示するか)
Show controls (play slide show / Next Prev image links) コントロールパネルを表示するか(プレイボタンや前へ、次へのリンクを表示するか)
Use paging サムネイルの数が多いときに[1][2][3]・・・のページングリンクを表示するか
Enable history クリックした画像を記憶しておくか
Show Title / Caption / Desc under image 画像のタイトル、キャプション、番号を表示するか
Try to clear current theme image css / formatting 既存テーマのスタイル、フォーマットをクリアしてみてもいいか
Show background colours for layout testing ブロックごと背景色をつけて表示するか ※レイアウトを確認するときのテスト用
Auto play slide show オートプレイを実行するか
Hide thumbnails サムネイル画像を表示するか
Slide delay in milliseconds 画像がスライドする待ち時間 ※ミリ秒単位、オートプレイを実行するときに合わせて使用できそうです。
Page button size ページングや前へ、次へのリンクボタンの大きさ
Thumbnail Width サムネイル画像の横幅
Thumbnail Height サムネイル画像の縦幅
Main image width メイン画像の横幅
Main image height メイン画像の縦幅
Crop thumnails サムネイル画像はトリミングをするか
Number of thumbnails 一度に表示することができるサムネイル画像の枚数、ページングの基準値にもなります。
Thumbnail column width サムネイルエリアの横幅
Thumbnail margin サムネイル画像のマージン
Gallery width (at least Thumbnail column + Main image width) ギャラリーエリアの横幅
Play text プレイボタンのテキスト
Pause text 一時停止ボタンのテキスト
Previous text 前へボタンのテキスト
Next text 次へボタンのテキスト
Download link text ダウンロードボタンのテキスト

投稿でギャラリーを作成してみると

wp-photospace-gallery-screenshot-01

このように、「Galleriffic」が反映された形でギャラリーが表示されます。

ギャラリー用の画像生成について

「Photospace Gallery Options」の設定では、ギャラリー用に作成をするサムネイル、メイン画像が専用に存在します。プラグイン導入後であれば、画像をアップロードしたときに生成されますが、すでにアップロード済みの画像をギャラリーに用いた場合に画像が表示されなかったり、正しい位置に配置されない場合があります。

そのような画像サイズの問題を改善するために、別途サムネイルデータを最新の設定で作成するプラグインが必要になります。

「Photospace Gallery Options」でも案内がされていたプラグインです。『 AJAX thumbnail rebuild 』または『 Regenerate Thumbnails 』です。

Images that are already on the server will not change size until you regenerate the thumbnails. Use AJAX thumbnail rebuild or Regenerate Thumbnails

「Photospace Gallery Options」のページ内のリンク先からダウンロードができます。

『 AJAX thumbnail rebuild 』

『 AJAX thumbnail rebuild 』プラグインをダウンロードして、プラグインをインストール後、有効化すると「ツール」メニュー内に「 Rebuild Thumbnail 」が追加されます。

wp-photospace-gallery-screenshot-02

設定画面を見てみると『 Photospace 』用のサムネイルの項目(photospace_thumbnails、photospace_full、post-thumbnail)があります。これらがチェックされた状態で、「Rebuild all Thumbnail」ボタンをクリックすると登録されているサムネイル画像が再構築されます。

関連記事

【JavaScript】グラフなどの描画をサポートするライブラリまとめ

折線グラフ、棒グラフ、円グラフやレーダーチャートなどを画像を使わずに描画をするJavaScriptライブラリをまとめてみました。 Chart 6種類のグラフを作成できるJavaScriptライブラリです。描画にはHTML5のcanvasを使用しています。 Dem...続きを読む

2015.03.02HTMLコーディング

【WP】標準ギャラリーをスライド式にするプラグイン『WordPress Canvas Gallery』

『WordPress Canvas Gallery』は、WordPressの標準ギャラリーをスライド式のギャラリーに対応させることができるプラグインです。 『WordPress Canvas Gallery』ダウンロード プラグインは「wordpress.org」のプ...続きを読む

2015.02.18WordPress

焼津おんぱく2018 「No30.焼津のスポットを歩き巡る インスタ映えする写真の撮り方講座」

カメラマンとして、焼津おんぱく2018 「No30.焼津のスポットを歩き巡る インスタ映えする写真の撮り方講座」のプログラムの案内人をしました。 風が強く、雲が少し多い日でしたが、天気にも恵まれ、タイミングにもめぐまれ、参加者さんみんなに楽しんでいただき、焼津の魅力を再発見...続きを読む

2018.02.14フォトギャラリー焼津

【デザイン】バレンタインカードにぴったりなデザインワークスまとめ

今日は、バレンタインにちなんだカードのデザインワークスをまとめみました。ツールのキットやハウツーが掲載されており実際にカードを作るときの参考にもなります。 Hearts a Flutter ツールキットを組み合わせて制作されたカードです。ハートやリボンの組み合わせがか...続きを読む

2015.02.15インスピレーション

公式サイトをリニューアルオープンいたしました

デザインスタジオ・エフの公式WEBサイトをより見やすく、より探しやすくを目指してリニューアルをしました。 制作事例やブログ、私たちのサービスについてご案内いたします。 今後とも引き続きご愛顧のほど、よろしくお願い申し上げます。 ...続きを読む

2015.02.06