Question

我想通过短代码IE显示产品：[product_category category =＆＃34; test＆＃34; per_page =＆＃34; 12＆＃34;]在旋转木马中。

我有Flexslider设置，我尝试过将其添加到loop-start.php

<link rel="stylesheet" href="https://googledrive.com/host/0B4TRd-vaKaSkWUFRVkRiM1g2eGs" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="https://googledrive.com/host/0B4TRd-vaKaSkUHZIaTBXR0JLdVE"></script>

<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider({
                selector : ".products > li",
                animation : "slide",
                controlsContainer : ".flex-container"
            });
});
</script> 

<div class="flexslider">
<ul class="products">

并在loop-end.php

之后关闭ul之后的div

虽然我根本没有运气：/它适用于测试html文件。

我想要它的原因并不仅仅是使用一些插件，我有覆盖弹出窗口，它不能用于任何Carousel插件我尝试过，我也希望以这种方式显示多个类别。

感谢您的帮助

Answer 1

最初我认为你的标记不匹配，但后来我看到你修改了循环。虽然我认为jQuery选择器ul.products可行。因为它应该是容器及其直接子项作为幻灯片。

我建议您查看浏览器开发人员控制台，了解您遇到的脚本错误类型。但是我怀疑你没有看到因为你没有使用no conflict wrappers而没有定义的功能。你不知道在开始时这让我多么沮丧。

因此，您的脚本应该看起来像（尽管我认为您应该将其添加到页脚：

function so_28486348_print_footer(){ ?>
    <script type="text/javascript" charset="utf-8">
    jQuery(window).load(function() {
          $('ul.products').flexslider({
                    selector : "li.product",
                    animation : "slide",
                    controlsContainer : ".flex-container"
           });
    });
    </script> 
<?php }
add_action( 'wp_print_footer_scripts', 'so_28486348_print_footer

我还建议您通过wp_enqueue_script加载所有脚本（至少是外部脚本）（参见上面的codex链接）

function my_scripts_method() {
    wp_enqueue_script(
        'custom-script', 'https://googledrive.com/host/0B4TRd-vaKaSkUHZIaTBXR0JLdVE' ,
        array( 'jquery' )
    );
}

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

在Carousel Slider中显示/包装Woocommerce产品

1 个答案: