javascript - 如何停止在 wordpress 短代码中多次排队相同的脚本

Question

首先，我要求大家在点击否定箭头之前完整阅读问题，我真的遇到了一个非常棘手的问题，在网上没有找到任何类似的答案。

我正在尝试做的事情:

我在安装后创建了一个 wordpress 插件，您只需添加一个短代码并使用该短代码传递一些参数，然后它就会根据您的参数数据在您的文章中显示一个 slider 。

现在它是一个 slider ，主要基于 jQuery 来完成一些花哨的事情。现在，为了将简码参数传递给 jquery，我正在借助 wp_localize_script() 以便我可以访问我的 jquery 脚本中的简码参数。

问题:

当我将简码属性值传递给本地化脚本时，我必须调用 wp_register_script()、wp_localize_script()、wp_enqueue_script( ) 都在 add_shortcode() block 内。

因为如果我在 add_shortcode() 之外创建另一个函数来将我的脚本加入 wp wp_enqueue_scripts 操作，那么它甚至会在执行简码之前先被触发。所以 wp_localize_script() 永远不能将短代码属性传递给 jquery 脚本。

add_shortcode('some_shortcode', function( $atts ) {
    //extracting the shortcode attributes
    $shortcode_data = shortcode_atts( array(
        'arg1' => '',
        'arg2' => ''
        ..... so on....

    ), $atts );

    extract($shortcode_data);

    // doing my programming with the shortcode

    // in the end echoing some html

    /*--------------------------------------*/

    // Now coming the script adding part

    $dir = plugin_dir_url( __FILE__ );

    /* CSS */
    wp_enqueue_style( 'some_style', $dir . 'assets/css/some_style.css', null, null );

    /* JS */
    wp_register_script ('some_script', $dir . 'assets/js/some_script.js');
    wp_localize_script( 'some_script', 'someData', $shortcode_data );
    wp_enqueue_script( 'some_script', true );
    wp_enqueue_script( 'some_other_script', $dir . 'assets/js/some_other_script.js');

});

现在我的插件运行良好，没有任何问题，但现在出现了大问题。如果我在一个帖子或页面中包含这个短代码超过 1 次，它会在每次执行短代码时推送相同的 css 和 js 文件。

因此，最终，由于整个系统都混淆了将哪些数据传递给哪个 js 脚本，因此没有一个短代码能够正常工作。

如果你们中的任何人能帮助我解决这个奇怪的问题，那将非常有帮助。我真的不知道如何解决这个奇怪的问题。

Answer 1

您可以创建一个不同的函数来检查帖子中是否存在短代码，并为您的 slider 加入所需的 javascript 和 css。

例如

// Shortcode handler
add_shortcode('some_shortcode', function( $atts ) {

    $a = shortcode_atts( array(
        'arg1' => '',
        'arg2' => ''

    ), $atts );
    /** I would avoid using script localization unless you need script dependancy based on generated js from 
      * atts data. you can just return the js script directly on your content.
      * 
      */
    $script = '<script>(function {';
    $script .= "var arg1 = {$a['arg1']},";
    $script .= "    arg2 = {$a['arg2']}";
    $script .= '})(jQuery);</scipt>';
    return script;
});

// Script Dependancy Handling
add_action( 'wp_enqueue_scripts', 'script_style_handler');
function script_style_handler() {
    global $post;
    //check shortcode existence in post content and enque script/style if found
    if( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'some_shortcode') && !is_admin() ) {
        wp_enqueue_style( 'some_style', $dir . 'assets/css/some_style.css', null, null );
        wp_enqueue_script( 'some_other_script', $dir . 'assets/js/some_other_script.js');
    }
}