急に動かなくなったLight-Boxプラグインへの応急措置

      2015/12/21

Jqueryの読み込みのON/OFF設定

昨日、珍しく写真中心のエントリーをあげてみて、表示確認を行ったところ「なんじゃ、これ?」という状況に気づきました。画像の詳細表示を綺麗にポップアップするLight-Box系のプラグインwp-jquery-lightboxが機能していない。画像をクリックするとアップロードしたバカでかい写真がそのまんまビローンと表示される。サイズが大きいから表示もモサモサしてイラつく。

アップロードする前に適度なサイズにリサイズしておけ…という突っ込みはごもっとも。だけど、そんなことをしなくてもLight-Boxは閲覧者が見やすい程度、かつ詳細と言ってよい程度の大きさで上手く表現してくれる。その機能にずっと甘えてきたのだもの。梯子を外されても困ってしまう。

さて、何が起こったのだろう?急場をしのいでとりあえず動けば細かいことはどーでもいい(真面目に原因追及する根気もやる気もない)、ということで状況確認と応急措置をしてみました。

状況確認

ここ最近このBlogは引っ越しを含めてあれやこれや思いつきで、使用環境というか設定というかがあれこれ変わっています。とりあえず、ここら辺が怪しいんじゃないの、という部分をつついてみることにしました。

  1. 表示を早くしたいのでWP Super Cacheプラグインを有効にした
  2. テーマを新しいものに変更した

レンタルサーバを変更したことやドメイン関連であれこれしたことは多分関係がない。あったとしてもどうしようもないし、Blog上の表示効果用のプラグインの挙動に影響があるとはとても思えない。移行データだけでなく、新規に新サーバ移行後のエントリでも同様に起こっている以上、バックアップやリストアの問題でもない。せいぜいWordPressの上で起こっていることだ。

WP Super Cacheプラグインとの相互干渉を疑う

そこでまず、プラグイン間で何かしら干渉しあっていることを疑った。その中でも名指しでWP Super Cacheプラグインを疑ったのには理由がある。このプラグインは表示を早くするために動的な画面生成ではなく静的なキャッシュを生成する。記事そのものは更新をかけない限りその方が閲覧者に都合が良いだろうと思って導入した。

でも、このWP Super Cacheプラグインは凄く癖がある。初期設定のままではスマートフォン用の別画面を自動生成してくれるWPTouchプラグインなどが動作しなくなってしまう。これはお互いのプラグインの提供者も認識していて、対応手順を纏めている(Configuring cache plugins for WPtouch : WPtouch)し、関連の記事もよく見かけます。

そこでプラグイン公式をそれぞれ見たり、関連しそうな検索をかけてみたものの全く見当たらない。どうもこれは筋が違うっぽい。

テーマとの相互干渉を疑う

WordPressのテーマはざっくり言って、HTMLとCSSのテンプレートのことです。それをあてはめることによって見栄えをガラッと簡単に変えることが出来る。ただ、単純に見栄えを変えるだけではなく、動作というか機能を追加し更に使用環境を快適にするという部分に踏み込んでいる高度なテーマも多くあります。ボタン一つクリックしてインストールするだけで、中身がどうなっているかに頭を悩まさず難なくそういった機能を導入できるのだから便利になったものです。

ただ、この頭を悩まさずのところが問題で、楽ちんな分ブラックボックスがあります。正確には全てのソースは見ることも弄ることも出来るのでオープンで公明正大なのですが、面倒なことを忌避する自分の心がブラックボックスを作っているのですが…。

そういった残念な自省はさておき、Light-BoxというとjQueryなどのJavaScriptライブラリを使用して動作しています。これがプラグインとテーマ双方で別々にライブラリを組み込んでいてぶつかっているんじゃないか、と疑いました。そこまではすぐたどり着いたもののテーマやプラグインの中身を確認して、動作検証しつつ問題回避のために中身を弄るというのは気が重い。試行錯誤した結果ロールバック出来なくなって、バックアップからリストアするのも面倒だし、そもそも管理者ページが開けない状況に陥ったりしたら厄介なことになる。

そこで応急処置を試み、何とか期待した動作をするようになりました。

FancyBox for WordPressプラグインの導入で応急措置

FancyboxはjQueryのプラグインでLight-Boxとよく似た機能を持っており、これはそのWordpress用のプラグインです。大事なのはFancyboxに変えたということではなく、このWordpress用プラグイン(Fancybox for WordPress)の設定項目です。

Jqueryの読み込みのON/OFF設定

iQueryの読み込みのON/OFF設定

設定画面のToroubleshootingにjQueryが既に読み込まれている場合、このプラグイン自信はjQueryを個別に読み込まないという項目があります。これをONにすることで、Fancyboxが動くようになります。(逆に言えばインストールした既定状態では動かない)他にも沢山のLight-Boxや類似機能のプラグインがあるものの、この機能がついているものが見当たりませんでした。同じ機能があれば、別にこのプラグインに固執する理由は無いのですが…。

適宜覚書-Fragmentsは、筆者が興味をもった様々な情報やネタを筆者が忘れても後で思い出せるよう覚書として公開するBlogです。Google Chrome拡張、Facebook、Google、Twitter、Windows、各種Webアプリなどを扱うことが多いです。この覚書が、もし何かお役立ちになれば幸いです。

 - WordPress, プラグイン