javascript - 来自简码的wp_localize_script多次

我有一个简短的代码[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文件tip.js只识别最后一个。我希望它像var objTips = [{...},{...},{...},...];

最佳答案

短代码功能内部可能有一个静态计数器，如下所示：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]

在浏览器控制台上的结果：