Question

我想使用此Grid Column Carousel。我在functions.php中添加了一些代码，因为我希望这个轮播仅在某些页面上。所以它需要包含一个加载在我主页上的js文件，还需要这段代码：

<!-- Include the script--<
<script src="js/GridColumnCarousel.js"></script>

<!-- initialize the carousel -->
<script>
  window.onload = function() {
    var options = {
      elem: document.getElementsByClassName('example-1')[0],
      gridColClasses: 'col-xs-12 col-sm-6 col-md-4 col-lg-3'
    };

    var gCCarousel = new GCCarousel(options);      
  };
</script>

如何仅在我的page-custom.php上添加它？

我在函数中的代码

add_action('wp_enqueue_scripts','load_js_slider');
    function load_js_slider(){
        if ( is_page_template('accueil_page.php') ) {
            wp_enqueue_script('slider_script', get_template_directory_uri() . '/js/GridColumnCarousel.js');
            wp_enqueue_script('slider_script', get_template_directory_uri() . '/js/slider.js');
        }
    }

谢谢

Answer 1

您可以在页面custom.php中添加一些容器，例如：

<div class="carusel"></div>

在你的javascript代码中检查这个元素是否存在 - 执行你的代码。像这样：

<script>
  window.onload = function() {
    if(document.getElementsByClassName('carusel')[0].length > 0) {
    var options = {
      elem: document.getElementsByClassName('example-1')[0],
      gridColClasses: 'col-xs-12 col-sm-6 col-md-4 col-lg-3'
    };

    var gCCarousel = new GCCarousel(options);  
   }    
  };
</script>

将Javascript代码添加到Wordpress中的模板页面

1 个答案: