Oct 20 2013

[WordPress] Head Cleaner プラグインの落とし穴

By gyoza manner On 2013/10/20 In WordPress

Version : WordPress 3.6.1, Head Cleaner 1.4.2.11

現在使用している Wordpress のテーマでは Superfish という jQuery ベースのドロップダウンリストが使われているのですが、ひょんなことからきちんと動いていないことが分かりました。原因がまったく分からずめっちゃハマったのですが、最終的には Head Cleaner プラグインの設定が原因だということが分かりました。
二度とハマらないようにまとめておきます。

Pocket

[`evernote` not found]

起こったこと

このブログは WordPress を使っていて、フリーのカッコイイテーマ「Green Chilli」を使用しています。ナビゲーションメニューには「Superfish」という jQuery ベースのドロップダウンリストが使われています。

ある日、MAMP を使ってローカルでテストしていたこのブログと公開中のブログでメニューの挙動の違いがあること気が付きました。その違いとは、

サブメニューの出現時にアニメーションがない
サブメニューが表示される領域にマウスカーソルが移動すると、親メニューに先にマウスオーバーしていなくてもメニューが表示されてしまう
サブメニューがあることを示す「>>」マークが付かない

です。

原因

とりあえず公開中のブログとローカルのテスト環境でソースコードに違いがあると思い diff を取ってみたのですが、メニューに関係しそうな部分は完全一致。まったく原因が分かりません。

Chrome のデベロッパーツールを利用して、このメニューの部分がどうなっているかを比較してみると違いがあることに気づきました。

正常動作するローカル環境

menu の class に “sf-js-enabled” が付いています。sf は Super Fish の略です。

動作がおかしい公開環境

menu の class に “sf-js-enabled” が付いていません。

どうやらこれが直接の原因のようです。しかし、両者のソースコードは何も違いがありません。う〜む。

ということは、ソースコード以外の違う部分でしかもクライアント側の HTML コードに影響を及ぼすもの…ピコーン！ぴかりんぴかりん！　それって、プラグインの違いじゃない？

WordPress を使い始めたときにいろいろなサイトの見よう見まねでオススメプラグインをいろいろと入れていたのでした。でも何を入れたか忘れていたので、久々にプラグインリストを見ると、、、「Head Cleaner」が入っています。高速化するためのプラグインですがいろいろとヘッダをいじったり記述を削除したりします。怪しげです。

試しに Head Cleaner を停止したところナビゲーションメニューが期待通りの動作をしました！　おー、ビンゴ！　アハ！　何時間もハマっていた自分が恥ずかしいっす。

対処法

さて、Head Cleaner を停止するか消してしまえば問題は解決するのですが、Head Cleaner にもお世話になっている身。苦楽を共にしてきた仲間をいきなり追い出すのも忍ばれます。設定でなんとかならんかな？と思って Head Cleaner の設定を見てみると、非常にわかりにくい、、、。僕の知識がなさすぎるのかもしれないですが、それにしてもどの項目が何に効くのかピンとこない＆今回の件にはあまり関係なさそうなものばかりに見えます。

ただ、そんな中にももしや？と思った項目が「wp_print_head_script」。<head></head> の中に書いてある script に対する設定っぽいので、「対象外」にチェックを付ければそのままスルーして残してくれるのではないかと。

結果は、これまたビンゴ！　sf-js-enabled クラスが消されることなく正常に動作しました。