【MW WP Form】日付ピッカーのカレンダー(jQueryUI Datepicker)オプション設定を「 本当の素の状態 」で使う方法

  1. MW WP Formとは
  2. MW WP FORMのフック「 mwform_translate_datepicker_mw-wp-form 」では、完全に素の状態にできない
  3. MW WP FORMの日付ピッカーを素の状態で使う方法
  4. 最後に

MW WP Formとは

MW WP Formはフォームが作成できるWordPressプラグインです。ショートコードを固定ページに貼り付けるだけで、比較的かんたんに高機能なフォームの作成ができます!
標準で確認画面・完了画面の表示機能が付いていて、その他にも便利な機能がたくさん用意されているので、細かくカスタマイズしやすいのも魅力です。
一時期ContactForm7を使っていましたが、お客様案件でのフォーム作成は「 MW WP Form 」を使う機会が増えました。

(MW WP Form プラグインサイトより引用)
https://ja.wordpress.org/plugins/mw-wp-form/

以下のようなMW WP Formをカスタマイズしたい人向けの記事です。

  • ページのフッターにDatepickerのオプション等のスクリプトを記述したい人。
  • Datepickerのカスタマイズ内容をfunctions.phpに書きたくない。
  • DatepickerのCSSは、元のCSSは使わずに設定したい。
  • 日付ピッカーの設定画面(ショートコード内)のjsにオプションを記述する時に、1行で書かないといけないのが面倒。また入力したオプションの内容によっては文字が一部削除されてしまうため、うまく動作しなくなるのがイヤな人。
  • とにかく自分でMW WP Formの日付ピッカーのカレンダー(jQueryUI Datepicker)を好きなように設定したい。

動作テストしたプラグインのバージョンなど
  • WordPress5.5
  • MW WP Form バージョン4.4.0
  • サーバは、エックスサーバーを使いました。

通常、MW WP Form 上で日付ピッカーのカレンダー(jQueryUI Datepicker)を使う場合、MW WP Formプラグイン側で用意されている 日付ピッカーのスクリプトが( 管理画面からjsのオプションを指定している場合はそれらも含めた状態で )起動し、フォーム上で動作します。
(日付ピッカーのオプションを入力する欄に何も設定しない場合でも、曜日の日本語表示オプション設定された状態で起動するので、普通に使う分にはこれで充分です)



標準で設定されている日本語のカレンダー機能に加えて、jQueryUI Datepickerのオプションを細かく設定していく場合、 WordPress管理画面のMW WP Form 日付ピッカー設定画面から行う場合、Javascriptの1行テキストボックス(赤枠の箇所)に入力しなければならないので、長いオプションを入力する場合どうしても見づらくなってきますし、カッコ { } など特定の文字が削除されて実行されてしまうようなので、複雑なオプション処理を書く必要が場合は使いずらいかも知れません。

MW WP FORMのフック「 mwform_translate_datepicker_mw-wp-form 」では、完全に素の状態にできない

MW WP FORM には色々便利なフックがありますが、その中にmwform_translate_datepicker_mw-wp-formがあります。
これは標準で実装されている素の状態の datepicker を使用することができるようになるフィルターフックです。

mwform_translate_datepicker_mw-wp-form-xxx datepicker 項目は、日本語環境の場合自動的に日本語設定で表示されるようになっていますが、このフックを使うことで素の状態の datepicker を使用することができるようになります。
datepicker ショートコードの js 属性を使い、自分で設定をカスタマイズしたい場合に便利です。
(MW WP Form公式サイト マニュアル・フィルターフックより引用)
フィルターフック mwform_translate_datepicker_mw-wp-form-xxx

フィルターフックmwform_translate_datepicker_mw-wp-formを使うと、このようなカレンダー表示になります。
曜日が英語表記になり、オプション指定が外れたので「年」と「月」のところがドロップダウンメニューになりました。

フィルターフック mwform_translate_datepicker_mw-wp-form を使用した場合、オプションが指定されない状態で日付ピッカーが起動するので確かに「 素の状態 」ではあるのですが、日付ピッカー(jQueryUI Datepicker)を起動するためのスクリプト(JavaScript)は自動挿入されてしまうので、私が求めていたものとちょっと違いました。
(プラグインから挿入されるスクリプト)

方法の一つとして、プラグインを改造すれば日付ピッカーを使っている場合でも起動用スクリプトを挿入されないようにする事は難しくありませんが、その場合プラグインアップデートをしてしまうとカスタマイズした内容が上書きで消えてしまうので、お客様のサイト構築の時は私はその方法は使いません。次の方法を使って実現させてみました。
(もしかしたらMW WP Formで用意されているフックを functions.phpに書けば実現できるのかも知れません。ご存知のかた、誰か教えてください!)

MW WP FORMの日付ピッカーを素の状態で使う方法

自分でMW WP FORMの日付ピッカーのオプションや、カレンダーのCSSを好きなように設定したい場合「 日付ピッカー 」を使わずに、1行テキストボックスを作成し、その要素にjQueryUI Datepickerを設定する方法をご紹介します。

1. WordPress管理画面のMW WP FORMを使ってフォームを作成

WordPress管理画面にログイン、MW WP FORMを使ってフォームを作成していきます。
まず日付ピッカーを使いたい場所に、MW WP Formのフォームタグ「テキスト」を挿入します(今回は要素の名前を cal_test としました)

一通りフォームタグを入れて内容を保存したら、生成されるショートコードを固定ページに挿入してページを作成します。
画像では、[mwform_formatkey key="68"]となっていますが、数字の68は、お使いのWordPressにより番号が異なります。
(生成されるショートコードの例)

このショートコードを固定ページに貼り付けて、フォームページを作成します。
画像はWordPressのエディタGutenberg(グーテンベルク)。

2. テーマのヘッダー(header.php)にjQueryUIで使うCSSの読み込み指定

使用しているWordPressテーマのヘッダーテンプレートに入っている「 headタグ 」の中に、jquery-uiのCSSを読み込む設定を追加します。
※自分でイチからカレンダーCSSを作成したい場合は、下記CSSファイルの読み込みは不要です。

 
<link rel='stylesheet' id='jquery.ui-css'  href='//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.min.css?ver=1.11.4' type='text/css' media='all' />
 

3. テーマのフッター(footer.php)に、jQueryUI Datepicker本体やオプション設定などを追加

footer.phpに、jQueryUI Datepicker本体のjsファイルやオプション設定を追記していきます。
Datepicker本体は、実際にMW WP Formが読み込んでいるjsと同じファイルを読み込むようにしています。

下の内容の5行目付近にあるname='cal_test'は、指定した1行テキストボックスのnameで設定した文字列を指定してください。

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<script type='text/javascript' src='/wp-includes/js/jquery/ui/datepicker.min.js' id='jquery-ui-datepicker-js'></script>
<script type="text/javascript">
jQuery(function(){
	jQuery("input[name='cal_test']").datepicker({
		dayNames: ['日曜日','月曜日','火曜日','水曜日','木曜日','金曜日','土曜日'],
		dayNamesShort: ['日曜','月曜','火曜','水曜','木曜','金曜','土曜'],
		dayNamesMin: ['日','月','火','水','木','金','土'],
		monthNames: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
		monthNamesShort: ['1','2','3','4','5','6','7','8','9','10','11','12'],
		showMonthAfterYear: false,
		changeYear: false,
		changeMonth: false,
	});
});
// -->
</script>

最後に

MW WP Formカレンダー(もとのcss適用済の場合)

MW WP Formカレンダー CSS適用なしの場合

テーマを保存したら、実際に動作するか確認をしてみましょう。
1行テキストボックスをクリックしてみて、カレンダーが表示されれば完成です。
この方法は、jQuery Datepickerのオプション「 beforeShowDay 」を使う場合など、細かいオプション設定を行いたい場合に有効です。
また、カレンダーのオプション設定を追加する時はフッターのテンプレートに記述する事になるので、社内でGitを使っている(テーマを管理している)場合は、オプションを変更した際の変更履歴の管理がしやすくなるので、メンテナンスが楽になりますよ!

MW WP Formのカレンダーに休日・祝日を設定したい場合はこちらの記事を参考にしてくださいね。
MW WP Formプラグインのカレンダーで特定の日(休日・祝日)を選択出来ないようにする方法

こちらの記事もオススメ!

書いた人:やまライダー

やまライダーです。仙台市でブロガー兼システム寄りのWebディレクターとして働きながら嫁と一緒に子育て奮闘中!
タスク管理ツール「Todoist」でガントチャートが作成ができる補助ツール「Todoist ガントチャートコンバータ」作者。
鳥が好きでキンカチョウ(錦花鳥)を飼っています。

プロフィールを見る
やまライダーのTwitter(自転車用アカウント)
やまライダーのTwitter(システム寄りwebディレクター用)
やまライダーのInstagram