WordPressでお問い合わせフォームを作る際に使われてきたプラグイン「MW WP Form」。予約フォームやイベント参加申し込みフォームでは、日付を選ぶ「デイトピッカー（Datepicker）」機能がよく使われます。

ところが、導入後に「入力フィールドをクリックしてもカレンダーが表示されない」というトラブルに直面することがあります。結論から言うと、原因の多くはjQuery UIが読み込まれていない、または読み込み順序が正しくないことにあり、functions.phpでjQuery UIを読み込むことで解決できます。この記事では、その原因と解決方法を解説します。

なお、MW WP Formは2023年に開発終了が発表されており、新規制作で新たに採用することはなくなりましたが、以前はContact Form 7と並んでよく使われていたプラグインです。既存サイトの保守で役立つ内容としてまとめます。

問題の現象

デイトピッカーを導入し、動作チェックの段階で、下図のように「入力フィールドをクリックしてもカレンダーが表示されない」という問題が発生しました。

問題の原因

以前にも、MW WP Formのショートコードをカスタムフィールド内に設置していたことが原因で、デイトピッカーが表示されないという問題を扱いました（下記リンク参照）。原因はケースによって異なります。

https://budsblue.net/wp/2021/07/01/datepicker-doesnt-work

今回の原因は、「jQuery UIが読み込まれていない」または「読み込み順序が間違っている」ことのようでした。デイトピッカーはjQuery UIの機能を使って動くため、jQuery UI本体が読み込まれていないと、カレンダーが表示されません。

解決方法

WordPressには、jQuery UIのコアと日付ピッカー機能が標準で用意されています。そのため、functions.phpに次のコードを追加するだけで解決できることがよくあります。

wp_enqueue_script('jquery-ui-core');
wp_enqueue_script('jquery-ui-datepicker');

これだけで、デイトピッカーが正しく表示されるようになりました。WordPressに同梱されているものを読み込むだけなので、外部から新たにjQuery UIを追加する必要はありません。

なお、wp_enqueue_scriptはwp_enqueue_scriptsフックの中で呼び出すのが基本です。フォームを設置したページで確実に読み込まれるように記述しておきましょう。読み込まれているか不安なときは、ブラウザの開発者ツールのコンソールでjQuery.uiが存在するかを確認する、といった切り分けも有効です。

デイトピッカーが動かないときは、まずjQuery UIが読み込まれているかを確認するのが近道です。それでも解決しない場合は、上記のリンク先のように、フォームの設置場所（カスタムフィールド内など）が影響しているケースもあるので、あわせて確認してみてください。

まとめ

• デイトピッカーが表示されない主な原因は、jQuery UIの未読み込み・読み込み順序
• functions.phpでjquery-ui-coreとjquery-ui-datepickerを読み込むと解決することが多い
• WordPress標準のものを使うので、外部追加は不要

デイトピッカーのトラブルは、jQuery UIまわりが原因のことが多いです。まずは読み込みを確認する、という手順を覚えておくと、同じ場面でスムーズに対処できます。