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

【问题标题】：Add Javascript code to a template page in Wordpress将 Javascript 代码添加到 Wordpress 中的模板页面
【发布时间】：2017-04-18 23:55:35
【问题描述】：

我想使用这个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');
        }
    }

【问题讨论】：

标签： javascript wordpress

【解决方案1】：

您可以在 page-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>

【讨论】：