WPtouchだけではできなかったjQuery colorbox無効化

2015年9月11日Web制作, ブログWordPress, プラグイン

二つ前の記事でテーマを変えたと書きました。
レスポンシブのテーマでモバイルにも対応していますが、スマホビューはWPtouchプラグインを使用しています。

「WPtouch Proの設定ではjQuery colorbox(Lightbox系プラグイン)を無効化しているはずなのに、なんでスマホでLightboxが効くんだろう」

効いていないものだと思っていたし、自分のブログの画像はいちいちタップしないから今まで気付かなかったのです。

スマートフォン表示でLightboxは必要か

スマホで記事を読んでいるとき、記事内でリンクが貼られている画像をタップすると、どういう挙動をするのが自然でしょうか。

いくつか他のサイトやブログをスマートフォンで見てみましたが、そのまま画像にリンクしているケースが大半です。ニュースサイトなどで専用のUIを用意しているケースと、拡大プラグイン・ライブラリで表示しているケースは2割くらい。

このブログのスマホビューでは画像がコンテンツ幅100%なので、わざわざ拡大することもない。この状態でLightboxが効いてしまうと、枠に囲まれたさらに小さい画像になってしまう。拡大縮小もしにくく記事に戻りにくい。

自分のブログとはいえ、画像を誤タップしたときにちんまりLightbox窓が開いたらイライラします。だから私はWPtouchではプラグインを無効にする設定をしていたはず。

WPtouch Pro WordPressプラグイン設定

ここね、チェック外れてる。(有料だとプラグインの無効化ができる)

…だったのだけど、いやだ奥様、効いてるままざんす。
なんでなのざんす。

調べてみると スマートフォンで閲覧する時にjQuery Colorboxを無効化する (WordPress) | Zafiel のように対策を施している人はいるのですが、プラグインのjsを直接修正するんですよね。プラグインがアップデートしてjsファイルが上書きされたら、また修正しなくてはならない。

とはいえ、このプラグインの最終更新は3年前。この先アップデートも無いのかな…次のを探したほうが良いですかね…と寂しい気持ちで情報を探っていましたら

functions.phpで上書きできる!

まず「WPtouch Proでの設定でも無効化できないWordPressプラグインがある」ことを知りませんでしたからね。調べれば情報はけっこうあるものです。

WPtouch Pro 3で他のプラグインのフックを無効化する方法2つ(buslog)

互換性ツールで無効化できないプラグインは、子テーマの functions.phpから無効化できます。

おう、これでいいじゃない。

プラグインが使ってるフック、 add_action と add_filter をすべて探し出してコピーし、それぞれを、remove_action または remove_filter に変更し、子テーマの functions.php に書き加えます。

素晴らしい。情報ありがとうございます。
jQuery Colorboxの場合、必要なのはこれだけ。

ここを、WPtouchのお使いのテーマのfunctions.phpに足し、add_action→remove_actionに書き換えてやってアップロード。

写真は本文に関係ありません

ほい、できた。おつかれさまでした。

WPtouchでプラグインを個別に無効化するのはPro版の機能ということですが、これなら無料版でもできるのかな。もう検証しようがないのですが。

オマケ

設定項目にはちゃんと目を通せというお粗末な話をひとつ。

この手のライブラリは、画像をクリックしたときに拡大画像がオーバーレイで表示されるもの。見終わった後に本文へ戻るとき、どのような挙動なら自然でしょうか。

やはり、画像ウィンドウの外(背景)をクリックしたら戻るのが普通ですよね。でもこのjQuery colorboxはcloseボタンをいちいちクリックしなくてはいけなくて、面倒だなと思っていたのです本当に申し訳ないごめんなさいごめんなさい。

20150910-02

あるんだよ設定。さるのバカちん。