AI要約
WPFormsの日付/時刻フィールド内の日付ピッカー文字列をローカライズしますか？ WPForms 2.0.4以降、日付ピッカーはデフォルトでサイトの言語を使用します。ただし、サードパーティのJavaScriptライブラリを使用すると、日付ピッカー文字列を別のサポートされている言語で表示できます。設定した言語は、日付ピッカーのサイトの「週の開始曜日」設定も置き換えます。
このチュートリアルでは、JavaScriptを使用して日付ピッカー文字列をローカライズする基本について説明します。
WPForms日付ピッカーの仕組みを理解する
WPFormsはFlatpickr日付スクリプトを使用して日付ピッカーを生成します。FlatpickrはJavaScriptを使用して日付ピッカーを構築します。25を超える言語が利用可能で、Flatpickrは広範な言語サポートを提供しており、日付ピッカー文字列のローカライズを容易にします。
日付ピッカーの文字列をローカライズする
ローカライゼーションにより、WordPressサイトとそのプラグインをさまざまな言語に適応させることができ、世界中のユーザーにシームレスなエクスペリエンスを保証します。以下では、WPFormsで日付ピッカー文字列を翻訳する手順を説明します。
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.日付ピッカーロケールをロードする
wpforms-datepicker-localeをローカライズするためのURLを取得したら、次のステップはコードをサイトに追加することです。これを行うには、サイトにカスタムJavaScriptスニペットを追加する必要があります。
注意：カスタムスニペットの追加方法と場所についてサポートが必要な場合は、WordPressにカスタムスニペットを追加する方法に関するチュートリアルを参照してください。詳細な手順が記載されています。
このチュートリアルではフランス語を使用するため、以下のスニペットでは、スクリプトhttps://npmcdn.com/[email protected]/dist/l10n/fr.jsをエンキューしていることがわかります。ローカライズしたい言語に合わせてスクリプトを更新する必要があります。
/**
* Load the date picker locale strings.
*
* @link https://wpforms.com/developers/localize-the-date-picker-strings/
*/
function wpf_dev_datepicker_locale( $forms ) {
if ( true === wpforms_has_field_type( 'date-time', $forms, true )){
wp_enqueue_script(
'wpforms-datepicker-locale',
'https://npmcdn.com/[email protected]/dist/l10n/es.js',
array( 'wpforms-flatpickr' ),
null,
true
);
}
}
add_action( 'wpforms_frontend_js', 'wpf_dev_datepicker_locale', 10 );
上記のスニペットは、サイトのフォームに日付/時刻フィールドがあるかどうかを確認し、デフォルトのWPForms日付ピッカーロケールを指定されたものに一致するように変更します。
3.ローカライゼーションを適用する
2番目のステップは、日付ピッカーのローカライゼーションをページに適用することです。これはJavaScriptを介して行われます。以下のコードスニペットをサイトに追加してください。
/**
* Apply the date picker locale strings.
*
* @link https://wpforms.com/developers/localize-the-date-picker-strings/
*/
function wpf_dev_datepicker_apply_locale() {
?>
<script type="text/javascript">
jQuery( document ).ready( function() {
jQuery( '.wpforms-datepicker-wrap' ).each( function() {
var calendar = this._flatpickr;
if ( 'object' === typeof calendar ) {
calendar.set( 'locale', 'es' );
}
} );
} );
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_datepicker_apply_locale', 10 );
ユーザーがフォームの日付ピッカーを開くと、文字列は指定した言語に翻訳されます。
条件付きロジックを追加する（オプション）
サイトでWPMLプラグインを使用している場合、日付ピッカーのローカライズモジュールを条件付きで読み込むことができます。これにより、ユーザーが特定のロケールを表示している場合にのみ、日付ピッカーの文字列が変更されます。以下の例では、ユーザーがスペイン語版のページ（es）を表示したいと指定した場合にのみ、ローカライズが適用されます。
よくある質問
以下に、WPFormsの日付ピッカー文字列の翻訳に関するよくある質問にお答えします。
Q: 日付を選択したときに、正しい形式で表示されないのはなぜですか？
A: このスニペットを使用すると、日付ピッカーの月と日のみをローカライズします。日付が表示される形式を変更したい場合は、代わりにこのチュートリアルを確認してください。
Q: 選択した日付に英語の月名が表示されるのはなぜですか？
A: WPForms 2.0.4以降、日付/時刻フィールドは常に選択した日付を英語で保存するため、エントリと計算が引き続き機能します。このスニペットはカレンダーポップアップの言語のみを変更します。
これで、日付ピッカーのテキストを正常にローカライズできました。
日付/時刻フォームフィールドをカスタマイズしますか？日付時刻フィールドの日付オプションのカスタマイズ方法に関するチュートリアルをご覧ください。
