web-dev-qa-db-ja.com

新しい日付ピッカーのローカリゼーションと組み合わせたロケールフィルタ

そのため、WordPress 4.6では、jQueryの日付ピッカーにローカライゼーションを追加して自動化しました。これが実際にWPのバグであるのかどうか、または何か問題があるのか​​どうかわからないので、最初にここに投稿します。

設定で自分の言語をフランス語に設定した場合、日付ピッカーは正しくローカライズされ、月などがフランス語で表示されます。ただし、デモページの場合はこれを見せびらかし、サイト全体をフランス語に設定するのではなく、1ページだけにしたいと思います。これが私が使っているものです：

function change_language( $locale ) {
    if ( is_page( 156 ) ) {
        return 'fr_FR';
    }
    return $locale;
}
add_filter( 'locale', 'change_language' );

ページのロケールを正しく変更していますが、実際にはそのロケールに基づいて日付ピッカーのローカライゼーションをロードしていません。これがスクリーンショットです。

enter image description here 

ここには何らかのタイミングの問題があるのでしょうか。たぶん私は間違ったフィルタを使っていますか？それともおそらくこれはWPバグなのでしょうか。

助けてくれてありがとう！

localizationdatepicker
4
Nick Young

WordPress v4.7 で導入された switch_to_locale() 関数を使用して、日付ピッカーの文字列を単一ページの別のロケールに変更することに成功しました。

switch_to_locale()は、wp_localize_jquery_ui_datepicker()によって使用されるグローバル$wp_locale変数を変更します。 localeフィルターのみを使用してロケールを変更しても、$wp_localeは上書きされません。

/**
 * Use switch_to_locale() on a special page.
 * This needs to be done early.
 */
add_action( 'pre_get_posts', 'wpse_change_language' );
function wpse_change_language( $query ) {
    if ( $query->is_main_query() && $query->is_page( 156 ) ) {
        // This will change the global $wp_locale which
        // is used by wp_localize_jquery_ui_datepicker() for translations.
        switch_to_locale( 'fr_FR' );
    }   
}

日付ピッカーのスタイルとスクリプトをエンキューする。

/**
 * Load jQuery datepicker scripts and styles.
 */
add_action( 'wp_enqueue_scripts', 'wpse_enqueue_datepicker' );
function wpse_enqueue_datepicker() {
    wp_enqueue_script( 'jquery-ui-datepicker' );

    // Using code.jquery.com for simplicity. Normally I'd use a local file.
    wp_register_style(
        'jquery-ui',
        'https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css'
    );
    wp_enqueue_style( 'jquery-ui' );

    // A simple datepicker initialization script.
    wp_enqueue_script(
        'wpse-datepicker',
        plugin_dir_url( __FILE__ ) . '/wpse-datepicker.js',
        [ 'jquery-ui-datepicker' ],
        false,
        true
    );
}

wpse-datepicker.js 

/**
 * Attach a datepicker to our markup.
 */
jQuery( document ).ready(function( $ ) {
    $( "#datepicker" ).datepicker();
});

ショートコード （デモ用）

/**
 * A simple shortcode used for adding the markup for
 * the datepicker.
 */
add_shortcode( 'wpse_datepicker', 'wpse_datepicker' );
function wpse_datepicker() {
    // Start buffering output.
    ob_start(); 

    // Add some debugging info:
    echo '<p>The locale is: ' . get_locale() . '</p>';
    ?>

    <div id="datepicker"></div>

    <?php
    // Return output generated up to this point.
    return ob_get_clean();
}

ID 156のページのコンテンツ 

Testing the datepicker:

[wpse_datepicker]

Test complete!

また、使用されているロケールにかかわらず、言語ファイルをインストールする必要があることにも注意してください。 設定>一般>サイトの言語の下の管理領域で適切な言語を選択することで自動的にインストールできます。

3
Dave Romsey

現在使用しているページとコンテンツが一致するpage-156.phpテンプレートを作成します。標準のpage.phpが配置されているテーマに保存してください。

https://github.com/jquery/jquery-ui/tree/master/ui/i18n からdatepicker-fr.jsをダウンロードして、自分のサイトのルートに保存します。

datepicker widgetのインラインスクリプトを次のように置き換えます。

<script src="/datepicker-fr.js"></script>
<script>
  $( function() {
    $( "#datepicker" ).datepicker( $.datepicker.regional[ "fr" ] );
  } );
</script>

デモページでは、フランス語で datepicker を表示することがすべて必要です。

1
Frank P. Walentynowicz

WordPressはテーマのfunctions.phpファイルを読み込む前にデフォルトの翻訳された文字列を読み込みます（ wp-settings.php#L394 を参照）。そうすると、localeフィルタはjQuery UIの日付ピッカーのローカライゼーションに影響しなくなります。

@DaveRomseyと@FrankPWalentynowiczの回答に追加したい改善点がいくつかあります。

1. switch_to_locale()を使用します。

このメソッドは、特定のロケールがグローバル$wp_locale_switcherの利用可能な言語で存在する場合に機能します（ WP_Locale_Switcher#L78 を参照）。

WP_Locale_Switcherは利用可能な言語を検索するために get_available_languages() を使用するので、fr_FRが以前にダウンロードされていない場合は、切り替える前にWP_LANG_DIRにダウンロードする必要があります。

function wpse268774_change_language($query) {
    if ( $query->is_page(156) && $query->is_main_query() ) {
        if (!function_exists('wp_download_language_pack')) {
            require ABSPATH . 'wp-admin/includes/file.php';
            require ABSPATH . 'wp-admin/includes/translation-install.php';
            $downloaded = wp_download_language_pack('fr_FR');
            if ($downloaded) {
                switch_to_locale('fr_FR');
            } else {
                // Maybe do something...
            }
        }
    }
}
add_action( 'pre_get_posts', 'wpse268774_change_language' );

長所 ：

  • 手動で何も翻訳しなくても、ページ全体に標準の翻訳を使用できます。

短所 ：

  • 言語パックをダウンロードし、翻訳された文字列全体を再ロードする必要があるため、パフォーマンスが著しく低下します。

pre_get_postsフックを$query->{method}と一緒に使用することをお勧めします。 is_page()だけではうまくいかないかもしれません。インポート中に変更される可能性があるため、ページIDは使用しないでください。

2. $.datepicker.setDefaults( options )を使用します。

WordPressは jQuery UI Project の言語を使用しないため、$.datepicker.setDefaults(jQuery.datepicker.regional["fr"])メソッドは機能しません。デフォルトオプションは手動でローカライズする必要があります。

wp_localize_jquery_ui_datepicker()wp_enqueue_scriptsフックに追加された関数をチェックアウトしましょう（ default-filters.php#L435 を参照）。今、私たちはしなければなりません：

remove_action('wp_enqueue_scripts', 'wp_localize_jquery_ui_datepicker', 1000);

function wpse268774_localize_jquery_ui_datepciker() {
    global $wp_locale;

    if ( !is_page(156) || !wp_script_is( 'jquery-ui-datepicker', 'enqueued' ) ) {
        return;
    }

    // Convert the PHP date format into jQuery UI's format.
    $datepicker_date_format = str_replace(
        array(
            'd', 'j', 'l', 'z', // Day.
            'F', 'M', 'n', 'm', // Month.
            'Y', 'y'            // Year.
        ),
        array(
            'dd', 'd', 'DD', 'o',
            'MM', 'M', 'm', 'mm',
            'yy', 'y'
        ),
        get_option( 'date_format' )
    );

    // Got this string by switching to fr_FR.
    $datepicker_defaults = '{"closeText":"Fermer","currentText":"Aujourd\u2019hui","monthNames":["janvier","f\u00e9vrier","mars","avril","mai","juin","juillet","ao\u00fbt","septembre","octobre","novembre","d\u00e9cembre"],"monthNamesShort":["Jan","F\u00e9v","Mar","Avr","Mai","Juin","Juil","Ao\u00fbt","Sep","Oct","Nov","D\u00e9c"],"nextText":"Suivant","prevText":"Pr\u00e9c\u00e9dent","dayNames":["dimanche","lundi","mardi","mercredi","jeudi","vendredi","samedi"],"dayNamesShort":["dim","lun","mar","mer","jeu","ven","sam"],"dayNamesMin":["D","L","M","M","J","V","S"],"dateFormat":"MM d, yy","firstDay":1,"isRTL":false}';

    wp_add_inline_script( 'jquery-ui-datepicker', "jQuery(document).ready(function(jQuery){jQuery.datepicker.setDefaults({$datepicker_defaults});});" );
}
add_action('wp_enqueue_scripts', 'wpse268774_localize_jquery_ui_datepciker', 10, 0);

長所 ：

  • パフォーマンスヒットなし

短所 ：

  • JQuery UI Datepickerオプションのみをローカライズしてください。ページ内の他の文字列は翻訳されません。
  • JQuery UIのDatepickerオプションを手動で変換する必要があるかもしれません。
1
MinhTri