wp_localize_script 不接受动态值

Question

*上下文

我是 WordPress 插件开发的新手，我刚刚开始开发一个插件。这基本上是一个博客滑块插件。这个概念很简单。用户可以使用带有参数的短代码来确定要显示的帖子和数量。虽然没有用于更改滑块外观的管理设置页面，但我会努力解决这个问题。每当需要滑块时，用户必须使用简码。

开发部分也很简单。我正在检查用户通过简码传递的参数。然后运行查询和 returns 一组帖子，然后显示结构。很简单。

*问题

现在我正在尝试使插件选项更加动态（通过短代码），即用户可以控制滑块是否应自动播放，是否应启用循环，悬停时暂停，dots/nav 隐藏或显示等。我正在为此滑块使用 owl 旋转木马。所以这意味着我必须更改 JavaScript 文件中滑块的属性。

基本思路是从函数的 $atts 数组中获取参数，并将其传递给 JavaScript 文件。我知道这可以使用 wp_localize_script 来完成，但我不知道如何。

这是我的代码，让事情更清楚。

mainfile.php

add_shortcode( 'sp-slider', 'sp_slider_get_posts');
function sp_slider_get_posts( $atts ) {
    $values = shortcode_atts( array(
        'number' => '-1',
        'category-id' => '', //DEFAULT VALUE null, WILL BE REPLACED ONCE USER DECLARES IN SHORTCODE
        'category-name' => '', 
        'orderby' => '', 
        'order' => '', 
        'include-posts' => '', 
        'exclude-posts' => '', 
        'author-id' => '', 
        'author-name' => '', 
        'autoplay' => ''
    ), $atts );


    if( !empty($values['number']) ||
        !empty($values['category-id']) ||
        !empty($values['category-name']) ||
        !empty($values['orderby']) ||
        !empty($values['order']) ||
        !empty($values['include-posts']) ||
        !empty($values['exclude-posts']) ||
        !empty($values['author-id']) ||
        !empty($values['author-name']) ||
        !empty($values['autoplay'])) {

        $args = array(
            'numberposts'      => $values['number'],
            'cat'              => $values['category-id'],
            'category_name'    => $values['category-name'],
            'orderby'          => $values['orderby'],
            'order'            => $values['order'],
            'include'          => $values['include-posts'],
            'exclude'          => $values['exclude-posts'],
            'meta_key'         => '',
            'meta_value'       => '',
            'post_parent'      => '',
            'author'           => $values['author-id'],
            'author_name'      => $values['author-name'],
            'post_status'      => 'publish',
            'suppress_filters' => true,
            'fields'           => '',
        );

        $autoplay = $values['autoplay']; //GET AUTOPLAY VALUE. NO IDEA HOW TO USE IT. SO I TRIED THE FOLLOWING

        // THE FOLLOWING FUNCTION HOLDS THE wp_localize_script FUNCTION, WHICH IS DECLARED AT THE END OF THIS CURRENT FUNCTION sp_slider_get_posts.
        sp_carousel_settings($autoplay); //PASSING THE USER INPUT

        $posts_array = get_posts( $args );
        
        if( !empty( $posts_array ) ) {
            $output = "<div class='sp-slider-wrapper'>";
            $output .= '<div class="owl-carousel owl-theme">';
            foreach( $posts_array as $post ) {
                include( "includes/inc_slider_section.php"); // ALL THE SLIDER STRUCTURE IS IN DIFFERENT FILE WHICH IS INCLUDED HERE
            }
            $output .="</div>";
            $output .="</div>";
        }

        return $output;
     }
}


// HERE IS sp_carousel_settings() DECLARATION

function sp_carousel_settings( $autoplay ) {
    $carousel_settings = array( 'autoplay' => $autoplay);
    wp_localize_script( 'sp_main_js', 'carousel_settings', $carousel_settings );
}
add_action( 'wp_enqueue_scripts', 'sp_carousel_settings' );

mainjs.js

$(document).ready(function() {
    ...
    ...
    var autoplay= '';
    
    if(typeof carousel_settings !== 'undefined') {
        autoplay = carousel_settings.autoplay;
    }
    else {
        autoplay = false;
    }

    $('.owl-carousel').owlCarousel({
        loop:true,
        autoplay:autoplay,
        autoplayTimeout:2000,
        autoplayHoverPause:true,
        ...
        ...
    }
})

这行不通。在这里我想提一下，在 add_action() 函数中，如果我输入 wp_footer 而不是 wp_enqueue_scripts, 它将脚本添加到页面的页脚（我已经通过查看源代码检查过）但是自动播放值为空。

我要提到的另一件事是，在 sp_carousel_settings() 函数中，不是传递 $autoplay 变量，如果我写任何像这样 $carousel_settings = array( 'autoplay' => true); 的静态值，它就可以工作。

*我试过 在 sp_carousel_settings() 中回显 $autoplay 并打印出值！但是没有获取到js文件。

*我试过 检查 $autoplay 的值并在 wp_localize_script 中传递一个硬核刺痛

function sp_carousel_settings( $autoplay ) {
    if( $autoplay == "true" ) {
        echo "Inside!!!";
        $carousel_settings = array( 'autoplay' => true);
    }
    else {
        echo "Outside!!!";
        $carousel_settings = array( 'autoplay' => false);
    }
    wp_localize_script( 'sp_main_js', 'carousel_settings', $carousel_settings );
}
add_action( 'wp_footer', 'sp_carousel_settings' );

无效。 EVEN 它打印出“Inside!!!”但在 autoplay 中未通过 true。该值始终为 false。

*我已经 在插件的开头注册了 js 文件，插件在此处激活并进行初始化。像这样

function sp_slider_include_css_js() {
    ...
    ...
    wp_register_script('sp_main_js', plugins_url('assets/js/main.js',__FILE__));
    wp_enqueue_script('sp_main_js');
    ...
    ...
}
add_action( 'wp_footer','sp_slider_include_css_js');

*我已经 在互联网上搜索帮助但找不到。任何参考将不胜感激。

*我知道我可能以不正确的方式使用了该功能。我一无所知（而且是新手）。

Answer 1

必须做一些改变，例如，

第 1 步：

function sp_carousel_settings() {

    wp_register_script( 'sp_main_js', 'you/file/path/here', array( 'jquery' ), '1.0', true);

}
add_action( 'wp_enqueue_scripts', 'sp_carousel_settings' );

第 2 步：

add_shortcode( 'sp-slider', 'sp_slider_get_posts');
function sp_slider_get_posts( $atts ) {
  .....
  $carousel_settings = array( 'autoplay' => $autoplay);
  wp_localize_script( 'sp_main_js', 'carousel_settings', $carousel_settings );

 wp_enqueue_script( 'sp_main_js' );

  ......

}

wp_localize_script 不接受动态值

wp_localize_script is not accepting dynamic value

wordpress

wordpress-plugin-creation