WordPressにjQueryの日付ピッカーを追加する

Last Updated: 2016 年 07 月 15 日 13のコメント

jQuery UIを使用すると、簡単に日付ピッカー(カレンダー)を実装することができる。 同様に WordPressでもjQuery関数をフック(enqueuing)と、jQueryを使用して、日付ピッカー(Datepicker)を簡単に追加することができます。
Adding a datepicker to a form in WordPress

jQueryの日付ピッカー

jQueryの日付ピッカー(datepicker)ソースは、インターネット上で簡単に検索することができます。 例えば、次のような簡単なjQuery関数を使用してフォーム(フォーム)にカレンダーを追加することができます。

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>
<script>
$(function() {
$( "#datepicker1" ).datepicker({
dateFormat: 'yy-mm-dd'
});
});
</script>
<p>Date of Birth (DOB): <input type="text" id="datepicker1"></p>

上記のコードのように大きくXNUMXつの部分で構成されています。 ヘッダーに追加するjQueryファイルのインポートscriptとjQuery関数は、実際のフォームに追加するフィールド(inputタグ)です。 jQuery css / js /ライブラリファイルのインポート部分は、ヘッダーに追加すると、されてinputタグは、実際のフォーム(Form)に追加します。 datepickerの最も基本的なコードであるjQuery関数の部分をテーマの関数ファイルに登録(enqueue)させてこそです。

メモ: 上記のjQueryスクリプト部分で $はjQueryに変えてください。

jQueryスクリプトフック(enqueue)する

jQueryスクリプトをフック(hook)して WordPressで使用できるようにする過程を enqueue といいます。 enqueue の辞書的な意味は「add (an item of data awaiting processing) to a queue of such items」(ある処理項目をキューに追加すること)とされていますね。

jQueryスクリプトフック(enqueue)の方法は、 WordPress Codexページに詳細に説明されています。 WordPressでjsスクリプトファイルとスタイルシートを正しくロードする方法を参照してください。

次のような順序でjQueryの日付ピッカーを WordPressに追加することができます。

  • jQueryファイルのインポートscriptをヘッダファイル(header.php)に追加します。
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" type="text/css" media="all" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>
  • datepicker関数の部分をコピーして、jsファイルに保存します(例えば、 datepicker.js).
  • 上記で作成しjsファイルをテーマフォルダ(子テーマを使用している場合、子テーマのフォルダ)の下にjsフォルダに保存します。 (例えば、 wp-content > themes > テーマフォルダ > js フォルダの下に保存します。)
  • 使用している WordPress テーマ関数ファイル(のfunctions.php)関数の形で、このjsファイルをフックします。 」WordPressでjsスクリプトファイルとスタイルシートを正しくロードする方法「を参考にしてください。
  • 形式的に好きなところに日付の選択(カレンダー)を追加します。 これを入力フィールドであるため、他のカスタム入力フィールドのように同じ形式で nameの値とvalueの値を追加ヘジュオヤ正常値が保存され document.phpで呼び出すことができます。

以上の過程でjQueryの日付ピッカー(datepicker)を WordPressに追加することができます。 この同じプロセスを介して他のjQueryの関数もワードプラスにフックして使用することができます。

追加:

カレンダー2つを追加する場合

カレンダー2つを追加する場合Id部分に#datepicker2を追加で追加します。

$(function() {
$( "#datepicker1, #datepicker2" ).datepicker({
dateFormat: 'yy-mm-dd'
});
});

カレンダー3つ-4つの追加が必要な場合の名前とidを変えてjQuery関数をもう一つ作ってenqueueさせるようにします。

3つのカレンダーが使用されている場合
3つのカレンダーが使用されている場合

日付ピッカーのサンプルコード

jsfiddleでjQuery UIの日付ピッカーのサンプルを確認することができます。 このサンプルを適切に応用することができます。

Datepickerプラグイン

WP Datepicker日付ピッカーのプラグイン
WP Datepicker日付ピッカーのプラグイン

上記のような作業が容易でない場合 WP Datepickerなどのプラグインを使用できます。 」wordpress デートピッカー plugins「Googleで検索すると、より多くのプラグインを見つけることができます。


13のコメント

コメント

  1. 先ほどロードする方法としてきた

    deadline?>">

    このように、プラグにeditor.phpコードの挿入したクリックしたときの反応がなければ、ロードがよくダメでしょうか?

    応答