WordPressで不具合に2019年6月12日サイトの制作では毎回ナビゲーションをどうしようか悩みますね。使われるナビゲーションの一つが、ハンバーガークリックで上から降りて来るドロワーメニュー。jQueryのslideToggleを使い、ハンバーガークリックで上から降りてきて、×クリックで上に戻るタイプです。マークアップ時は正常に動いていたのに、Wordpress適用したら、なぜか動きがおかしくなりました。今回作るドロワーメニューとはどんなものかまずは正常なドロワーメニューをご覧ください。実装はhead内に次の2行を書くだけのシンプルな構成です。1行目でjQueryを呼び、2行目で独自jsファイルcommon.jsを読み込んでいます。src="js/common.js"></script>common.jsの内容もとてもシンプル。});});こんなシンプルなドロワーメニュー、「他に移植して動かなくなるかも」なんて心配は皆無ですね!不具合のドロワーメニューところが、Wordpressで構築したページで妙なことになりました。なったかは以下をご覧ください。不具合を再現したドロワーメニューはこちら(このサンプルページはWordpressで作ったページではありません。Wordpressで起こった不具合を、静的htmlに手入力し再現したものです)ここで確認です。・テーマのテンプレートheader.phpの内で、ちゃんと上の2行は読み込んでいる。・js、css、htmlはいずれも正常に動いているものと同じである。src="js/common.js"></script>を2回読み込んでいたのです!何故2回読み込んでいるのかわかりませんでしたが、とにかく1セットを削除してみたい。それで自分で書いたheader.phpからこの2行を削除してみると、正常に動くようになりました。src="js/common.js"></script>と書いてみました。すると、どうでしょう?ドロワーメニュー正常に動くのです!つまり、jqueryやjavascriptの重複読み込みが、今回の不具合の原因ではありませんでした。重複は無駄なので1回ずつ読み込むように修正しましょう。重複読み込みしていたのか?ほどなくして、その理由がわかりました。このWordpressテーマのfunctions.phpは他サイトからコピーして編集したものでした。1行ずつ要/不要を確認したのですが、見落としがありました。functions.phpでもjqueryとcommon.jsを書き出していたのです。ここまでわかったこと・jqueryとjsを重複読み込みしていた・重複の原因はheader.phpとfunctions.phpにそれぞれ書いていたから・しかし、重複読み込みだけなら不具合は起きないつまりおかしな動作のドロワーメニューの原因は他にあるのです。不具合のほんとうの原因もう一度Wordpressが書き出したソースに怪しい箇所が無いか1行目から見ていくと、なんだか怪しそうな1行をみつけました。/>これは怪しい!怪しすぎる...さっそく静的htmlにこの1行をコピーしてみます。src="js/common.js"></script>うわっ出た!不具合まとめ以下の5行がすべて揃ったときに不具合が起こります。検証はしていませんがtoggle,fadeToggleメソッドでも同条件で不具合が起こるかもしれません。src="js/common.js"></script>以下は問題ありません。src="js/common.js"></script>以下はドロワーメニューは正常に動きますが、重複しているので1回読み込みに修正しましょう。/>というのはWordpressまたはプラグインが書き出しているようです。Wordpressのバージョンによっても異なるようです。/>について書いてみたいと思います。