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

関連記事

【WP】WordPressの本文抜粋・本文の一部を取得する

WordPressで投稿された記事の本文の一部「抜粋」を取得するために、テンプレートタグthe_excerpt()とget_the_excerpt()があります。the_excerpt()とget_the_excerpt()は、投稿時に抜粋欄へ入力があればその内容が表示され、抜粋...続きを読む

2018.12.04HTMLコーディングWordPress

【デザイン】フード&ドリンクのメニューデザインまとめ

先日、レストランの店舗様のWEBサイトやメニュー表、名刺などのデザインワークスを手掛けさせていただくことになりました。 今日は、フードやドリンクのメニューデザインで参考になったデザインワークスのまとめです。 Discover YOUR WAY Cafe - Patra...続きを読む

2015.02.15インスピレーション

美容室グランディール様WEBサイト制作

富士宮市にある『美容室グランディール』様のWEBサイトを制作いたしました。グランディール様の店内のイメージであるナチュラルで癒される空間をWEBサイト上でも感じていただけるようにデザインをいたしました。 [gallery link="file" columns="4...続きを読む

2015.02.14WEBサイト制作美容室

ネイルサロンBrillez(ブリレ)様ロゴ制作

ネイルサロン『Brillez(ブリレ)』様のロゴを制作いたしました。Brillez(ブリレ)はフランス語で輝くの意味があります。 お客様のご要望で、店内はランドマークとなるシャンデリアあり、高級感のある大人の女性の雰囲気なので、ロゴも店内の雰囲気に合わせてデザインをして...続きを読む

2015.01.14ロゴ制作

美容室グランディール様紹介カード制作

富士宮市にある『美容室グランディール』様の紹介カードを制作いたしました。お店を紹介するショップカードとしての機能と、お客様が親族・ご友人の方などに紹介いただける紹介カードの2つの機能があるカードです。光沢をつけて高級感のあるデザインにいたしました。 クライア...続きを読む

2015.02.18名刺・カード制作美容室