0

*上下文

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

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

*问题

现在我正在尝试使插件选项更加动态（通过短代码），即用户可以控制滑块是否应该自动播放，是否应该启用循环，悬停时暂停，点/导航隐藏或显示等。我我正在为这个滑块使用猫头鹰轮播。这意味着我必须更改 JavaScript 文件中滑块的属性。

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

这是我的代码，可以使事情更清楚。

主文件.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);

*我尝试$autoplay在里面回sp_carousel_settings()显，它会打印出值！但没有得到 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' );

不工作。即使它打印出“里面！！！” 但在autoplay. 该值始终为假。

*我已经在插件的开头注册了 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');

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

*我知道我可能以不正确的方式使用该功能。我一无所知（对此很陌生）。

4

1 回答 1

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

  ......

}
于 2020-02-29T15:17:24.843 回答