2022.01.07

MW WP Form(WordPress)でデイトピッカーが動かないときの対処法

デイトピッカーがただのテキストボックスになってしまう…！

WordPressでお問合せフォームのプラグイン「MW WP Form」で「デイトピッカー」を追加していたところ、PCで見ると起動するのに、スマホで検証するとクリックしても、ただのテキストボックスになっていてカレンダーが起動しない…

コンソールで見ても特にエラーは出ていなのに、</body>の閉じタグ直前にソースコードに記述されているデイトピッカーのhtmlが出力されていない。

しかも開発者ツールでスマホ表示で見たら表示されてる…！実機では表示されない…！

あれ…？もしかして…

これ、スマホとかPCの問題じゃなくて、WordPressにログインしてるから動いてて、ログアウト状態で動いてないってこと…？！

急ぎ、PCでシークレットモードでログアウト状態で確認したところ案の定、カレンダーは動かないし、デイトピッカーのhtml要素も出力されていない。

なるほど…！ログイン時とログアウト状態の違いを突き止めるのみです。

はい、ここまで私の謎に包まれた体験にお付き合いさせてしまいましたが、

これがわりと調べてもピタッとくる対処法が見つからず…

やっと（やっとといっても20分くらい）解決することができたので、状況の整理と対処法をまとめたいと思います。

MW WP Formのデイトピッカーって何者？

かの有名な『jQuery UI』を使用しているようです。

「MW WP Form」側で勝手に読み込まれるようです。（が、ここが落とし穴だった…）

デイトピッカーが起動しないってどういう状況…？

・オリジナルテーマの制作

・プラグインでは閉じタグ前付近で読み込まれる

・だが使用する位置でscriptが動いてる（jQuery　UIが使われている）
→これより前で読み込まれていないといけない

・jQueryUIが動くには、jQueryの読み込みが必要

・wp_head()
→自動でjQueryが読み込まれる
</head>直前

・wp_footer()
→jQuery、jQuery UI（プラグインによる出力）が順序通り読み込まれる
タグ上、自分のJSより下

と書いてみましたが、自分でもややこしいので、大まかに修正前のファイル内の記述を以下に書いてみました。

恐らく、普通に書いていると以下のようになるわけです。

<head>
<?php wp_head() ?> →管理画面のみjQueryの出力（WordPressによる自動出力）
</head>

<body>

～デイトピッカーを使っている箇所～
→ここの時点でjQuery、jQuery UIの読み込み完了しておく必要！！


<?php wp_footer() ?>　→（jQuery、jQuery UI（MWフォームのプラグインによる自動出力）
～自分で追加するJS等～
</body>

これを見ると、ログアウト状態では、デイトピッカーを使用している箇所より上でjQueryもjQuery UIも読み込まれていないのが分かります。
動くはずないですね…

デイトピッカーを動くように解決した方法

head内の上部で jQueryとjQuery UIを読み込みました。

<head>
【修正箇所①：ここにjQueryの読み込み】
【修正箇所②：ここにjQuery UIの読み込み】
<?php wp_head() ?> →管理画面のみjQueryの出力（WordPressによる自動出力）
</head>

<body>

～デイトピッカーを使っている箇所～
→ここの時点でjQuery、jQuery UIの読み込み完了しておく必要！！


<?php wp_footer() ?>　→（jQuery、jQuery UI（MWフォームのプラグインによる自動出力）
～自分で追加するJS等～
</body>

wp_head()の下にjQuery UIを読み込んだらいいじゃんって感じですが、head閉じタグ直前が推奨なので上に記述しています。

ということで、計3回もjQueryを読み込んでいますね…

これはこれで不具合の原因になりそうですが、とりあえず今のところは～（突然の髭男）大丈夫です。

ただ残った疑問が、ログイン状態でなぜ、下部でしか読み込まれていないjQuery UIがエラーなく動いていたのかという点…。

あと、なんでプラグインによる上記二つの読み込みが、使用される箇所で動くように上部で読み込まれていない…？

まなび

WordPressでは、読み込み順序は大事ですね。

なにかあったら、読み込み順を疑えといても過言ではないです。

同じ症状でお困りの方のお役に立てれば、うれしいです。