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

# Robo Galleryとは

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

- 無料版

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

があります。


## 基本操作方法

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


## Robo Galleryのメリット

### 複数のギャラリーに同じ設定を適応できる
clone Galleryという項目で、
設定を引き継ぎたいギャラリーを選択すると反映されます。
複数のギャラリーの設定を同時に変更する場合にも便利です。
![スクリーンショット 2020-04-11 17.52.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/616900/ffafb387-f0d0-62be-88a2-13897d0f2cd3.png)

### 写真を絞り込むことができる
下のデモページでご確認できますが、こんなことが簡単に実装できます。
[https://robosoft.co/demo/gallery/push-effect-demo/](https://robosoft.co/demo/gallery/push-effect-demo/)

実装方法ですが、
このように項目ごとにギャラリーを作成します。
ネストさせるのがポイントです。
![Robo Gallery ‹ LANAI — WordPress.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/616900/325a0e4e-6ced-43e6-919b-d4f1472b6e0c.png)

そして、親になるギャラリーのURLをクリックします。
![Edit Gallery ‹ LANAI — WordPress.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/616900/f371a1a3-91a4-45e5-a18b-052eff623466.png)

すると、子ギャラリーに入れた写真も、
全部表示された状態で表示されます。
メニューは各ギャラリーの名前が反映されます。
![https   lanai-kobe com test-lanai gallery mauntain .png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/616900/ba549525-1fca-327b-12ae-a83193aae481.png)

メニューを選択すると、
各ギャラリーに登録した写真のみ絞り込まれます。
この動作が見ていて心地いいです。
![https   lanai-kobe com test-lanai gallery mauntain  (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/616900/ebaf9267-83b9-3009-a090-82512587b5f6.png)


# 無料版、有料版の違い

## 無料版の機能制限

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

### サムネイルサイズの設定（Size Options）が、解像度450のしか設定できない。
つまり、スマホ時のサイズ設定しかできず、
タブレット・デスクトップ時もこの設定が継承されます。

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

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


## 有料版のオススメ機能

### タグをメニューとして使える
無料版は、設定したギャラリー（カテゴリー）ごとでしかメニューが使用できません。
有料版だと、メニューがカテゴリー以外に、タグも選択することができます。
写真のように、タグを入力するだけで、
メニューとして表示されるようになります。
![Edit Gallery ‹ テストサイト — WordPress (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/616900/69d11cd4-cdf3-d548-aa96-7f5c7350b3ab.png)

### 写真の順番が自由に変更できる
無料版だと「Category」だけですが、
有料版だと日付ごとなど色々選べるようになります。
![Edit Gallery ‹ テストサイト — WordPress (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/616900/435ee057-d47f-1577-983a-c83d515d5fce.png)


### 設定できるギャラリーの制限がない
4つ以上設定できるので、気楽に作成できます。

### メニューなど、デザインのカスタマイズがしやすい。
めっちゃ細かく設定する場合、
テーマのCSSで、無理やり設定した方が良いですが、
自由度が上がるので、手間が軽減できます。

# 有料版の買い方

## 1.公式サイトで購入
ROBO GALLERY公式サイト（英語）
[https://robosoft.co/robogallery/#pricing](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](https://robosoft.co/clients/index.php)
そこから、Robo Gallery Pro > Download filesから、
Robo Gallery Keyをダウンロードします。
![Purchases.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/616900/eb8b1767-8b21-6ea5-02bd-2c0371c2bbe7.png)
そうすると、
robo_gallery_key.zip
という名前のファイルがダウンロードされます。

## 3.WordPressの「プラグインの追加」にアップロード
さっきゲットした「robo_gallery_key.zip」を
WordPressの「プラグインの追加」でアップロードします。
![プラグインを追加 ‹ テストサイト — WordPress.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/616900/9421151f-43c2-be9b-c314-2271944fb948.png)

プラグインに「Robo Gallery」とは別に、
「Robo Gallery key」が追加されました。
これで、有料版が使えるようになります。
![プラグイン ‹ テストサイト — WordPress.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/616900/17af2a4b-eee3-f282-eb6c-741c406b6229.png)

# Robo Gallery エラー対処法
自分が実装する時につまづいたことを載せておきます。

## テーマはどのphpが反映される？
![Edit Gallery ‹ LANAI — WordPress.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/616900/34906eeb-c436-cb08-6765-6ec9e6311ebe.png)
このパーマリンクを使用する場合、**single.php**が反映されます。
記事と分けたい場合、
記事の方をカテゴリーなどで条件分岐した方がいいです。

## Loadingアニメーションだけ出て、写真が全く出ない。
![エラーメッセージ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/616900/603aaddd-3c5a-11c5-10af-8213672ca495.png)
jQueryが競合しているので、
Robo Gallery > settings > Compatibility Settings の
jQuery Version を
**デフォルト　→ Alternative[ページにjQueryバージョンの競合がある場合]**
にチェックして保存してください。
（これ地味に解決に時間がかかった。。）
![Settings Robo Gallery ‹ テストサイト — WordPress.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/616900/5724efba-0bbd-7fa4-c134-3fba1d8c2aa8.png)


## ギャラリー写真の変更が反映されない 【2020.04.15追記】
解決できず、もだえ苦しんでましたが、
ようやく解決したので、まとめ直しました！！！

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

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


サムネイルの順番は、
Thumbs Options > Order Byで、強制的に制御することができます。
「Date」にすると、強制的に日付順になります。
ここを「Category↓」に直してください。
（ちなみに「Category↑」にすると、逆順になります。）
![Edit Gallery ‹ 七五三・お宮参り・家族写真・プロフィール写真の出張撮影｜神戸・西宮・芦屋・宝塚・尼崎・大阪｜NUU PHOTO — WordPress (23).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/616900/34bffaf4-c6c4-8632-e95f-22ef91e44f39.png)


### 2.Robo Galleryのキャッシュを無効にする
Cache > Enableになっていたら、反映されないので、
一旦、Disableを選択して保存しましょう。
![Edit Gallery ‹ テストサイト — WordPress.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/616900/a6b1d1ed-79ea-8830-e06c-bdd7c7598c19.png)

### 3.Robo Galleryのキャッシュのクリア時間を変更する
1.で解決しない！場合に試してください。

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

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

- ①  Cache > Enableの下に、こんな記述があるのでクリック。
![Edit Gallery ‹ 七五三参り・お宮参り・家族写真・プロフィール撮影・出張撮影｜神戸・西宮・芦屋・宝塚・尼崎・大阪｜NUU PHOTO — WordPress (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/616900/7ea96088-0a86-cb8c-3a3c-7416e5594c91.png)

↓

- ②  この部分を変更し、時間を置いてから再トライしてください。
![Settings Robo Gallery ‹ 七五三参り・お宮参り・家族写真・プロフィール撮影・出張撮影｜神戸・西宮・芦屋・宝塚・尼崎・大阪｜NUU PHOTO — WordPress (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/616900/383bb98f-2ef7-34bb-262c-c76d050a83bc.png)

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

参考サイト：
[https://wordpress.org/support/topic/gallery-no-longer-updates/](https://wordpress.org/support/topic/gallery-no-longer-updates/)

### 5.アップロードする画像の最大サイズを縮小する 
1.2.3.の方法だけではダメだった。。。
ので追記します。

**修正が反映されていない部分**が、
**「新たにアップロードされた画像」**でした。
![gallery_mauntain.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/616900/959e8ddc-1cd3-bf1a-8d79-e3fe08f50116.png)
ポップアップ画像がFULLサイズ（最大サイズ）になります。
そのため、

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

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

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


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

**「ギャラリーを編集」で、
サムネイル画像が一部グレーになったときの対処法です。**
1つのギャラリーに、
画像を約40枚以上入れると起こりました。。

- ①「ギャラリーを編集」でサムネイル画像が一部グレーになる
![Edit Gallery ‹ 七五三・お宮参り・家族写真・プロフィール写真の出張撮影｜神戸・西宮・芦屋・宝塚・尼崎・大阪｜NUU PHOTO — WordPress (20).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/616900/e5160fcb-b530-bd90-cc5d-1a50a2fec1ac.png)

- ②「ギャラリーに追加」の画面に切り替え、数秒〜1分ほど待つ
![Edit Gallery ‹ 七五三・お宮参り・家族写真・プロフィール写真の出張撮影｜神戸・西宮・芦屋・宝塚・尼崎・大阪｜NUU PHOTO — WordPress (19).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/616900/325dcd41-24a7-b104-d315-7cf9e4c0edc4.png)

- ③「ギャラリーを編集」の画面に戻る
すると、サムネイル画像すべて読み込まれていました！
![Edit Gallery ‹ 七五三・お宮参り・家族写真・プロフィール写真の出張撮影｜神戸・西宮・芦屋・宝塚・尼崎・大阪｜NUU PHOTO — WordPress (21).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/616900/51b67ed5-6014-0f67-aeec-cbbda946e4c6.png)



## 写真をsortした状態でリンクさせたい。
お客様の要望で、実装を試みました。

まず、写真の通り、
親ギャラリーページでメニューをクリックしても、
**sortした際、URLが変更されません。**
![スクリーンショット-2020-04-11-18.39.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/616900/2657ed74-b931-894d-4947-92369c7ea11d.png)
![スクリーンショット-2020-04-11-18.39.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/616900/ba14eb77-eb57-c544-9650-1ebf45a34d62.png)
↓
それなら、
「子ギャラリーに直接リンクさせたらいいじゃん！」
と思い、やったところ、、、
![スクリーンショット-2020-04-11-19.00.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/616900/25841755-5e22-486c-522e-d020ce462126.png)
他のギャラリーがメニューから消えてしまいました。。。
↓
次に、このメニューはdata-filterで制御されていることに気づいたので、
「URLとjQueryのtriggerの合わせ技で、
　data-filterを制御したらいいのでは！」
とあれこれやってみたのですが、うまくいかず。
↓
↓
結局、Robo Galleryのメニュー機能は使わず、
以下のように直リンクさせる仕組みに変更しました。

- WordPress管理画面。
ギャラリー構造をスクショのように変更。
![Robo Gallery Sorting ‹ テストサイト — WordPress (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/616900/852a8f49-a07c-f190-0169-b2b1ba18915c.png)
- 親ページ。
子ギャラリーへのリンクは、テーマ内のphpに直接書き込みました。
![スクリーンショット-2020-04-11-19.16.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/616900/b11f1933-0194-6a8b-268d-0fe62cf5b26d.png)

- 子ページ。
![スクリーンショット-2020-04-11-19.15.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/616900/37d5f1f6-1084-8555-cb56-81fb343d46e3.png)


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