区域设置过滤器与新的DatePicker本地化相结合

时间：2017-06-01 作者：Nick Young

因此，在WordPress 4.6中，他们将本地化添加到jQuery日期选择器中，使其自动进行。我首先在这里发帖，因为我不确定这是否是WP的一个bug，或者我是否做错了什么。

如果我在设置中将我的语言设置为法语，那么日期选择器将正确本地化，并以法语显示月份等。然而，对于演示页面，我想展示一下这一点，不想将整个网站设置为法语，而只是一个页面。以下是我正在使用的内容：

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

它正确地更改了页面的区域设置，但实际上并没有基于该区域设置加载datepicker本地化。以下是屏幕截图：

这里可能有什么时间问题吗？也许我用错了过滤器？或者这可能是一个WP错误？

谢谢你的帮助！

3 个回复

最合适的回答,由SO网友:Dave Romsey 整理而成

我能够使用switch_to_locale() 中引入的功能WordPress v4.7.

switch_to_locale() 将修改全局$wp_locale 使用的变量wp_localize_jquery_ui_datepicker(). 使用更改区域设置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();
});

Shortcode （用于演示）

/**
 * 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();
}

Content of page with ID 156

Testing the datepicker:

[wpse_datepicker]

Test complete!

还要注意，无论使用何种语言环境，都必须安装语言文件。通过在“管理”区域中的“设置”>“常规”>“站点语言”下选择适当的语言，可以自动安装它们。

SO网友:Frank P. Walentynowicz

创造page-156.php 模板，其内容与您当前使用的页面匹配。将其保存在主题中，即标准页面所在的位置。php位于。

下载datepicker-fr.js 从…起https://github.com/jquery/jquery-ui/tree/master/ui/i18n 并将其存储在站点的根目录中。

将datepicker小部件的内联脚本替换为：

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

这就是演示页面所需的全部内容，以法语显示datepicker。

SO网友:dan9vu

WordPress在加载主题之前加载默认的已翻译字符串functions.php 文件(see wp-settings.php#L394). 然后locale 过滤器不再影响jQuery UI datepicker本地化。

对于@DaveRomsey和@FrankpValentynowicz的答案，我想补充一些改进：

1. Using switch_to_locale():

如果特定语言环境存在于全局语言的可用语言中，则此方法适用于该语言环境$wp_locale_switcher （参见WP_Locale_Switcher#L78).

自从WP_Locale_Switcher 使用get_available_languages() 要检索可用语言，如果fr_FR 以前没有下载过，我们必须将其下载到WP_LANG_DIR 切换到it之前：

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\' );

Pros:

您可以对整个页面使用标准翻译，而无需手动翻译任何内容Cons:

因为我们必须下载语言包并重新加载整个翻译的字符串，所以性能受到了很大的影响我建议您使用pre_get_posts 钩住$query->{method}. is_page() 单独使用可能不起作用。您不应该使用页面ID，因为导入时可能会更改页面ID。

2. Using $.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);

Pros:

无性能命中Cons:

仅本地化jQuery UI日期选择器选项。无法翻译页面中的其他字符串

结束

小码农CODE

区域设置过滤器与新的DatePicker本地化相结合

相关推荐

WordPress localization