【たぶん解決】Foo Gallery がプレビューでは LightBox 表示できているのにログアウトして確認すると表示されない

気がつくとiPadとChromeでFooGalleryが機能していない…

いつものFireFoxでなく、他ブラウザでも確認しようと Chromeを立ち上げて色々見ると、FooGalleryを使ったギャラリーページでサムネイルをクリックしてもLightBox表示されません。 Chromeだけじゃなく iPad で見ても駄目です。

LightBox表示というのは、下図のようなポップアップで左右遷移できる画像表示ですね。

これがなされず、真っ黒な画面に画像がポンと置いてあるページに飛んでしまいます。

色々ググってみても解法が出ず。
先日、プラグイン開発元からFooGalleryのアップデートで「プラグインでAutoptimizeを使ってる人は、キャッシュをクリアしてね」とアナウンスがあり、もちろんそれには対応済みです。

FooGalleryのサポートページを見てみると、未解決トピックで同様の問い合わせがちらほらとありましたが、ここで提案されている Javaスクリプト設定での「“try-catch wrapping” optionをON」「設定の除外スクリプトにFooGalleryのスクリプトを追記」など、開発元が提案している方法は私の環境でもうまくいきません。

思い切ってJavaスクリプト設定自体をOFFにもしてみましたが改善せず。

一度 Autoptimize を「停止」>「削除」して、FTPで Autoptimize のキャッシュフォルダも削除したのち、再度ダウンロード&インストールもしましたが駄目でした。

でもこうして開発元が提案しているからには、これで解決した案件が多々あったということです。 ということは…

・環境依存の不具合でケースバイケース(テーマやプラグインとの相性)
・それもキャッシュ系プラグイン(自分の場合はAutoptimize)が怪しい

という感じのようです。 そこで「要はこの Autoptimize が臭いんだな」と、このプラグインその物をOFFにしてみましたが…改善しません。

これで八方塞がりに。

FooGallery を諦めて、RoboGallery という他のプラグインを入れてもみたのですが、こちらはもう、何も表示されず全くお話にならない始末。 完全に自分のサイトの何かがおかしい。 レスポンシブルなLightBoxギャラリー系が全然使えないということなると、かなり困ります。

実はブラウザ関係なく駄目だった…からの解決

何とか解決しようと決意を新たにしたところで、偶然また新しいことに気づきます。

たまたま、WordPress にログインしていない状態(ダッシュボードやカスタムメニューが出ない状態)で、FireFox でサイトを見ていたら FooGallery が機能していません。 「FireFox なら大丈夫」という前提が崩れます。 そう、ブラウザの問題ではなく、WordPressにログインしてるかどうかが問題。 つまるところ「プレビュー時以外は全部駄目」ということです。

そうとなれば、ググるキーワードも変わってきます。

自分と非常に似たケース(FooGallery以外で)をいくつか発見。 その原因の多くは「Javaスクリプトの連結」でした。 これがなされているとプラグインのスクリプトが読まれずにページが描画されてしまい、正しく機能しないというのです。

そこで今さらですが ChromeでF12を押してエラー確認をしてみると、出てます出てますエラーが。 ばっちりと「FooGallery が見つからないよ」とエラーが出ています…。(言い訳:ログインしたFireFoxの方でエラー確認した時に問題なかったので、こっちではチェックしてなかった)


これ見たときは、自己嫌悪でがっくり来ました。 もっと早くこっちで見ておけば…。

これは大抵、テーマのデフォルト機能に「Javaスクリプトの連結」が入っていたり、あるいはそれこそ Autoptimize のようなキャッシュ系のプラグインで連結をする設定にしたことが直接原因らしいです。

でも、私の使っているテーマ「STORK」にはそういう設定は無いですし、Autoptimize を使ってはいるもののJavaスクリプト系の設定はOFFにしてます。 ていうかそもそも Autoptimize自体のOFFも試していていますが改善していません。

また八方塞がりかなと思いつつも、駄目もとで多くのページで「Javaスクリプトを連結させない方法として書かれている

wp-config.php に下記を追記する
define(‘CONCATENATE_SCRIPTS’, false );

を試してみたところ…

なんと上手くいったではないですか。

Chromeのコンソールでチェックしてもエラー表示は出てませんし、ばっちりFooGalleryが機能するようになっています…。 直って良かったんですがもうわけわかんない。 きもちわるいです。

(私と同様の症状で上記の方法を試す人は、なにぶん wp-confing.php というWordPressの根幹ファイルをいじる作業ですので自己責任で)


原因を推測

「何となくおまじないを wp-config.php に書いたら直った」では本当に気持ち悪いので、推測でもいいから自分を納得させるために考えてみました。

  1. define(‘CONCATENATE_SCRIPTS’, false ); を書き足して改善したということは、少なくともJavaスクリプトはページ描画時に連結された状態だった。
  2. 1の要因は Autoptimize しか考えられないが、連結設定は今回の作業以降はOFFにしておりそれで改善もしてない。
  3. Autoptimize 自体をOFFにしても改善していない。
  4. とはいえ Auroptimize 以外に Javaスクリプトを連結させ得るプラグインは無い。

こうなると…以下の3つの仮定を信じるしか、私には道が残されていません。

  1. 原因は Autoptimize (多分)
  2. Autoptimize のJavaスクリプト連結OFFの設定変更がキャッシュクリア&更新でも反映されてない。
  3. Autoptimize 自体をOFFにしてもWordpressはキャッシュを読んでしまう。

上記のうち3は、FTPで Autoptimize のキャッシュフォルダを削除して試せば検証できますが、今せっかく静かに動いてくれているのを藪ヘビしたくないというか…。
ていうか実のところ、先ほど試そうとして今の状態でとりあえず Autoptimize をOFFにしてみたら、何故かエラーが滅茶苦茶出てきて意味が全然わからずお手上げで、これ以上深入りしたくないのです。orz

ともあれ、自分の中では推測でそういう風につじつまを合わせましたということで。 もっと詳しい方で検証される方がいましたら幸いです。

以上、顛末でした。

 

おまけ(余談)

直ったので、油断してJavaスクリプトの遅延読み込みプラグイン「Asynchronous Javascript」を入れたら、iPad でのFooGalleryがまた上記同様の病状に。 また、Chromeも10回に1回の割合で発症するようになりました…。 あわてて「無効」にして「削除」して直しました。 GoogleさんのPage Speed Insightsの点数を少しでも上げようと思ったのですが(現状SP:80 PC:88)欲張ってはいけませんね…。

 

よく読まれている記事