【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」ボタンをクリックすると登録されているサムネイル画像が再構築されます。

関連記事

魚時会館おさかな亭様WEBサイトの制作

藤枝市にある『魚時会館おさかな亭へ』様のWEBサイトの制作いたしました。魚時会館おさかな亭様は、藤枝駅より徒歩3分。昭和8年創業の老舗魚屋の目利きによる上質な海鮮料理、和食など静岡名物や料理を提供しおります。静岡県藤枝市で宴会・出前・法事・仕出し弁当のことなら魚時会館おさかな...続きを読む

2018.09.04WEBサイト制作

【JavaScript】チェックボックスとラジオボタンのデザインをカスタマイズする『iCheck』

フォームなどで使われるチェックボックスとラジオボタンのデザイン。「jQuery」と「Zepto」を使いチェックボックスとラジオボタンのデザインをカスタマイズするライブラリ『iCheck』をご紹介します。 実装イメージ 『iCheck』はいくつかのスキンデータも用意され...続きを読む

2015.02.10HTMLコーディング

【WP】WordPressへのログインセキュリティを高める『Login LockDown』

WordPressの管理画面には「ユーザー名」と「パスワード」を使用してログインをしますが、ブルートフォースアタックなど外部から不正なログインが行われるリスクも存在します。 ブルートフォースアタックとは、辞書ツールや単語帳を使いあらゆる文字の組み合わせてパスワードと合う...続きを読む

2015.02.20WordPress

【HTML】Internet Explorer 対応したBootstrapの選び方

Webサイトの制作を相談をいただく際に、「Internet Explorer に対応したい」という要望をうかがうことがあります。主要ブラウザの日本国内のシェアを調べてみると、最新バージョンの「Internet Explorer 11」で約7%、「Internet Explorer...続きを読む

2021.02.05BootstrapHTMLコーディング

【デザイン】アイディアに溢れたウェディングポートレート

ユーモア、クリエイティブ、アートさまざまなアイディアに彩られたウェディングポートレートをまとめてみました。 matt shumate Photographer 主にウェディングなどの写真を撮影されているフォトグラファーの「matt shumate」氏のポートレートより...続きを読む

2015.02.15インスピレーション