日付ピッカー文字列のローカライズ

WPFormsの日付/時刻フィールド内の日付ピッカーの文字列をローカライズしたいですか?デフォルトの日付ピッカー言語は英語です。しかし、サードパーティのJavaScriptライブラリを使用すると、他のサポートされている言語に日付ピッカーの文字列を翻訳することができます。

このチュートリアルでは、JavaScriptを使ってDate Pickerの文字列をローカライズする基本を説明します。

WPForms日付ピッカーの動作を理解する

WPFormsは日付ピッカーの生成にFlatpickrの日付スクリプトを利用しています。FlatpickrはJavaScriptを使用して日付ピッカーを構築します。Flatpickrは25以上の言語に対応しており、日付ピッカーの文字列を簡単にローカライズすることができます。

日付ピッカー文字列のローカライズ

ローカライゼーションによって、WordPressサイトとそのプラグインをさまざまな言語に対応させることができ、世界中のユーザーにシームレスなエクスペリエンスを提供できます。以下では、WPFormsのDate Picker文字列を翻訳する手順を説明します。

1.URLと言語コードの検索

このスニペットに必要な言語のURLを見つけるには FlatpickrのGitHubリポジトリ のような、お好みの言語に対応する言語ファイルを探してください。 es にとって スペイン語 または fr にとって フランス語.適切な言語ファイルを見つけたら、以下のフォーマットでURLを作成する:

https://npmcdn.com/[email protected]/dist/l10n/{language_code}.js

交換 {language_code} を選択した言語のコードに置き換えてください。例えば、フランス語にローカライズする場合、URLは次のようになります:

https://npmcdn.com/[email protected]/dist/l10n/fr.js

このURLは、選択した言語用にローカライズされた日付ピッカー文字列を含む、必要なJavaScriptファイルを提供します。

注:もしあなたの言語コードがFlatpickrのGitHubリポジトリに掲載されていない場合、あなたの言語は現在サポートされていません。

2.日付ピッカーのロケールを読み込む

をローカライズするためのURLを取得した後 wpforms-datepicker-locale次のステップは、サイトにコードを追加することです。そのためには、カスタムJavaScriptスニペットをサイトに追加する必要があります。

注:カスタム・スニペットの追加方法や場所についてサポートが必要な場合は、WordPressでカスタム・スニペットを追加するチュートリアルをご覧ください。

このチュートリアルではフランス語を使うので、以下のスニペットではスクリプトをエンキューしていることに気づくだろう。 https://npmcdn.com/[email protected]/dist/l10n/fr.js.ローカライズしたい言語に合わせてスクリプトを更新する必要があります。

上記のスニペットは、あなたのサイトのフォームに日付/時刻フィールドがあるかどうかをチェックし、デフォルトのWPForms Date Pickerロケールをあなたが指定したロケールと一致するように変更します。

3.ローカリゼーションの適用

2つ目のステップは、JavaScriptを使って日付ピッカーのローカライズをページに適用することです。以下のコード・スニペットをサイトに追加してください。

ユーザーがフォームの日付ピッカーを開くと、文字列は指定した言語に翻訳されます。

この2つのスニペットを使って、日付ピッカーをローカライズすることができます。

条件ロジックの追加(オプション)

あなたのサイトでWPMLプラグインを使用している場合、日付ピッカーのローカライズモジュールを条件付きで読み込むことができます。これにより、ユーザーが特定のロケールを表示している場合にのみ、日付ピッカーの文字列が変更されます。以下の例では、ユーザーがスペイン語版のページ(es)を表示したいと指定した場合にのみ、ローカライズを適用します。

よくある質問

以下では、WPFormsのDate Picker文字列の翻訳に関するよくある質問にお答えします。

Q: 日付を選択しても、正しい書式が表示されないのはなぜですか?

A:このスニペットを使用する場合、日付ピッカーの「月」と「日」のみをローカライズします。日付の表示形式を変更したい場合は、このチュートリアルを参照してください

これで完了です!日付ピッカーのテキストのローカライズが完了しました。

日付/時刻フォームフィールドをカスタマイズしたいですか?日時フィールドの日付オプションをカスタマイズする方法についてのチュートリアルをご覧ください。

参考措置