javascript - 来自简码的 wp_localize_script 多次

Question

我有一个短代码[tips]，最后我在做:

wp_enqueue_script( "tips", plugins_url( "/tips/js/tips.js", PATH ), array("jquery"), TIPS_VERSION, true );
wp_localize_script( "tips", "objTips", $objTips );

如果同一页面上有多个 [tips] 短代码，我想传递一个 objTips 对象，其中包含来自该页面所有短代码的 $objTips 数据.

现在它输出 var objTips = {...} 两次(或更多)，所以 JavaScript 文件 tips.js 只识别最后一个。我希望它像 var objTips = [{...},{...},{...},...];

Answer 1

在简码函数中可以有一个静态计数器，如下所示:Count how many times shortcode is called and display different content in each « WordPress.org Forums .

短代码声明会将提示添加到 JS 数组:

add_shortcode( 'tips',  function ( $atts, $content = null, $shortcode ) {
    static $count = 0;

    # https://stackoverflow.com/questions/3737139/reference-what-does-this-symbol-mean-in-php
    $return = <<<JS
        <script> 
            objTips[$count] = "$content";
        </script>
JS;
    $count++;
    return $return;
});

add_action( 'wp_enqueue_scripts', function() {
    wp_enqueue_script(  'tips-script', plugin_dir_url( __FILE__ ) . '/tips.js', array( 'jquery' ) );
});

排队的 JS 文件将初始化该数组并在文档加载时显示最终结果:

var objTips = [];

jQuery( document ).ready( function( $ ) { 
    console.log(objTips);
});

具有多个短代码的页面如下所示:

[tips]one[/tips]

[tips]two[/tips]

[tips]and three[/tips]

浏览器控制台的结果: