LoginSignup
1

More than 3 years have passed since last update.

ギャラリー写真をsortできる「Robo Gallery」メリット・無料版有料版の比較・エラー対処法【追記あり】

Last updated at Posted at 2020-04-11

Robo Galleryとは

写真のギャラリーが実装できるWordPressプラグインの一つ。

  • 無料版

  • 有料版(無料版の機能制限が無くなる)

があります。

基本操作方法

無料版の機能紹介となりますが、
こちらのサイト様がわかりやすくまとめてくださっています。
ご参照してみてください。
https://websvr.org/matome/wordpress-robo-gallery/

Robo Galleryのメリット

複数のギャラリーに同じ設定を適応できる

clone Galleryという項目で、
設定を引き継ぎたいギャラリーを選択すると反映されます。
複数のギャラリーの設定を同時に変更する場合にも便利です。
スクリーンショット 2020-04-11 17.52.59.png

写真を絞り込むことができる

下のデモページでご確認できますが、こんなことが簡単に実装できます。
https://robosoft.co/demo/gallery/push-effect-demo/

実装方法ですが、
このように項目ごとにギャラリーを作成します。
ネストさせるのがポイントです。
Robo Gallery ‹ LANAI — WordPress.png

そして、親になるギャラリーのURLをクリックします。
Edit Gallery ‹ LANAI — WordPress.png

すると、子ギャラリーに入れた写真も、
全部表示された状態で表示されます。
メニューは各ギャラリーの名前が反映されます。
https   lanai-kobe com test-lanai gallery mauntain .png

メニューを選択すると、
各ギャラリーに登録した写真のみ絞り込まれます。
この動作が見ていて心地いいです。
https   lanai-kobe com test-lanai gallery mauntain  (1).png

無料版、有料版の違い

無料版の機能制限

設定できるギャラリー数が3つまで

サムネイルサイズの設定(Size Options)が、解像度450のしか設定できない。

つまり、スマホ時のサイズ設定しかできず、
タブレット・デスクトップ時もこの設定が継承されます。

メニューの消去ができない

その他、細かい設定ができないようになっています。
テーマに設置するCSSで、
強制的に変更もある程度できます。

有料版のオススメ機能

タグをメニューとして使える

無料版は、設定したギャラリー(カテゴリー)ごとでしかメニューが使用できません。
有料版だと、メニューがカテゴリー以外に、タグも選択することができます。
写真のように、タグを入力するだけで、
メニューとして表示されるようになります。
Edit Gallery ‹ テストサイト — WordPress (1).png

写真の順番が自由に変更できる

無料版だと「Category」だけですが、
有料版だと日付ごとなど色々選べるようになります。
Edit Gallery ‹ テストサイト — WordPress (2).png

設定できるギャラリーの制限がない

4つ以上設定できるので、気楽に作成できます。

メニューなど、デザインのカスタマイズがしやすい。

めっちゃ細かく設定する場合、
テーマのCSSで、無理やり設定した方が良いですが、
自由度が上がるので、手間が軽減できます。

有料版の買い方

1.公式サイトで購入

ROBO GALLERY公式サイト(英語)
https://robosoft.co/robogallery/#pricing
↑値段が3プランあります。
どれも買い切りで、

  • 使用するサイト数

  • サポート/アップデート期間

で、値段が変わります。

一番安い「ROBO GALLERY PRO」は、
1サイト、6ヶ月サポート/アップデートになっています。
アップデート期間に制限があるのが気になりますが、
普通に使用するには多分問題はないはず。
(買って日が浅いので、どういう影響が出るか分からないので、
 何か分かり次第追記します。)

お値段は$30(約3300円)です。
買い切りなので、試し買いしやすいと思いました。
支払いは、クレジットカードかPayPalで簡単に購入できました。
(領収書のご質問があったので追記します。
 領収書になるか分かりませんが、
 英語で「Payment received」という支払い確認メールが、
 2Checkout Supportから届きます。)

2.マイページからkeyをダウンロード

購入すると、登録したメールアドレスにパスワードが届きます。
それを使って、RoboSoftのマイページにログイン
https://robosoft.co/clients/index.php
そこから、Robo Gallery Pro > Download filesから、
Robo Gallery Keyをダウンロードします。
Purchases.png
そうすると、
robo_gallery_key.zip
という名前のファイルがダウンロードされます。

3.WordPressの「プラグインの追加」にアップロード

さっきゲットした「robo_gallery_key.zip」を
WordPressの「プラグインの追加」でアップロードします。
プラグインを追加 ‹ テストサイト — WordPress.png

プラグインに「Robo Gallery」とは別に、
「Robo Gallery key」が追加されました。
これで、有料版が使えるようになります。
プラグイン ‹ テストサイト — WordPress.png

Robo Gallery エラー対処法

自分が実装する時につまづいたことを載せておきます。

テーマはどのphpが反映される?

Edit Gallery ‹ LANAI — WordPress.png
このパーマリンクを使用する場合、single.phpが反映されます。
記事と分けたい場合、
記事の方をカテゴリーなどで条件分岐した方がいいです。

Loadingアニメーションだけ出て、写真が全く出ない。

エラーメッセージ.png
jQueryが競合しているので、
Robo Gallery > settings > Compatibility Settings の
jQuery Version を
デフォルト → Alternative[ページにjQueryバージョンの競合がある場合]
にチェックして保存してください。
(これ地味に解決に時間がかかった。。)
Settings Robo Gallery ‹ テストサイト — WordPress.png

ギャラリー写真の変更が反映されない 【2020.04.15追記】

解決できず、もだえ苦しんでましたが、
ようやく解決したので、まとめ直しました!!!

1.サムネイルの「並び変え」の設定を変更する

「写真の並び替え」が反映されないとき、
真っ先にここを確認してください!!

サムネイルの順番は、
Thumbs Options > Order Byで、強制的に制御することができます。
「Date」にすると、強制的に日付順になります。
ここを「Category↓」に直してください。
(ちなみに「Category↑」にすると、逆順になります。)
Edit Gallery ‹ 七五三・お宮参り・家族写真・プロフィール写真の出張撮影|神戸・西宮・芦屋・宝塚・尼崎・大阪|NUU PHOTO — WordPress (23).png

2.Robo Galleryのキャッシュを無効にする

Cache > Enableになっていたら、反映されないので、
一旦、Disableを選択して保存しましょう。
Edit Gallery ‹ テストサイト — WordPress.png

3.Robo Galleryのキャッシュのクリア時間を変更する

1.で解決しない!場合に試してください。

ギャラリーを短時間に何度も変更すると起こります。
「変更が反映されない!!」場合は、
この設定を見直してから、時間を置いて再トライしてください!

こちら参考にしましたm(_ _)m
(日本語で分からない場合は英語で検索するべし!)
https://wordpress.org/support/topic/gallery-no-longer-updates/

  • ① Cache > Enableの下に、こんな記述があるのでクリック。 Edit Gallery ‹ 七五三参り・お宮参り・家族写真・プロフィール撮影・出張撮影|神戸・西宮・芦屋・宝塚・尼崎・大阪|NUU PHOTO — WordPress (1).png

  • ② この部分を変更し、時間を置いてから再トライしてください。 Settings Robo Gallery ‹ 七五三参り・お宮参り・家族写真・プロフィール撮影・出張撮影|神戸・西宮・芦屋・宝塚・尼崎・大阪|NUU PHOTO — WordPress (1).png

4.画像やソースを圧縮するプラグインを、一時無効化する

ギャラリーの変更時だけでも無効化してみてください。
後、このプラグインを複数使用している場合、
競合しやすいので、どれか一つに絞って使用されることをオススメします。

参考サイト:
https://wordpress.org/support/topic/gallery-no-longer-updates/

5.アップロードする画像の最大サイズを縮小する

1.2.3.の方法だけではダメだった。。。
ので追記します。

修正が反映されていない部分が、
「新たにアップロードされた画像」でした。
gallery_mauntain.png
ポップアップ画像がFULLサイズ(最大サイズ)になります。
そのため、

  • サイズ縮小して再アップロードする

  • Smushなど、画像圧縮プラグインを使う

を行なってみてください。

6.画像が読み込まれるまで、数秒待つ

「ギャラリーを編集」で、
サムネイル画像が一部グレーになったときの対処法です。

1つのギャラリーに、
画像を約40枚以上入れると起こりました。。

  • ①「ギャラリーを編集」でサムネイル画像が一部グレーになる
    Edit Gallery ‹ 七五三・お宮参り・家族写真・プロフィール写真の出張撮影|神戸・西宮・芦屋・宝塚・尼崎・大阪|NUU PHOTO — WordPress (20).png

  • ②「ギャラリーに追加」の画面に切り替え、数秒〜1分ほど待つ
    Edit Gallery ‹ 七五三・お宮参り・家族写真・プロフィール写真の出張撮影|神戸・西宮・芦屋・宝塚・尼崎・大阪|NUU PHOTO — WordPress (19).png

  • ③「ギャラリーを編集」の画面に戻る
    すると、サムネイル画像すべて読み込まれていました!
    Edit Gallery ‹ 七五三・お宮参り・家族写真・プロフィール写真の出張撮影|神戸・西宮・芦屋・宝塚・尼崎・大阪|NUU PHOTO — WordPress (21).png

写真をsortした状態でリンクさせたい。

お客様の要望で、実装を試みました。

まず、写真の通り、
親ギャラリーページでメニューをクリックしても、
sortした際、URLが変更されません。
スクリーンショット-2020-04-11-18.39.41.png
スクリーンショット-2020-04-11-18.39.55.png

それなら、
「子ギャラリーに直接リンクさせたらいいじゃん!」
と思い、やったところ、、、
スクリーンショット-2020-04-11-19.00.13.png
他のギャラリーがメニューから消えてしまいました。。。

次に、このメニューはdata-filterで制御されていることに気づいたので、
「URLとjQueryのtriggerの合わせ技で、
 data-filterを制御したらいいのでは!」
とあれこれやってみたのですが、うまくいかず。


結局、Robo Galleryのメニュー機能は使わず、
以下のように直リンクさせる仕組みに変更しました。

  • WordPress管理画面。 ギャラリー構造をスクショのように変更。 Robo Gallery Sorting ‹ テストサイト — WordPress (1).png
  • 親ページ。
    子ギャラリーへのリンクは、テーマ内のphpに直接書き込みました。
    スクリーンショット-2020-04-11-19.16.19.png

  • 子ページ。
    スクリーンショット-2020-04-11-19.15.32.png

以上、Robo Gallery実装レポでした!!

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
1