Question

我正在尝试在我的wordpress网站上包含来自github（https://github.com/rendro/countdown）正确的插件。经过几个小时的研究，在堆栈上，我仍然找不到让它运作的方法。

如果我使用默认方法：

1）将这些行添加到<head>文件的header.php中：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="/path/to/jquery.countdown.js"></script>

2）在</head>文件的<body>和header.php之间使用我想要的配置初始化插件，在这种情况下：

<script>

    $(function() {
        var endDate = "November 30, 2015 10:00:00";

            $('.countdown.styled').countdown({
                date: endDate,
                render: function(data) {
                $(this.el).html("<div>" + this.leadingZeros(data.days, 2) + " <span>days</span></div><div>" + this.leadingZeros(data.hours, 2) + " <span>hours</span></div><div>" + this.leadingZeros(data.min, 2) + " <span>minutes</span></div><div>" + this.leadingZeros(data.sec, 2) + " <span>seconds</span></div>");
                }
            });
    });

</script>

3）然后在我的html文件中调用插件：

<?php if(is_front_page() ) { ?>

    <div id="cdtoevent" class="countcont">
    <div class="countdown styled"></div>
    </div>

<?php } ?>

完美无缺！

但是，如果我尝试正确的方式

（如果我理解的话，wordpress默认使用jQuery，使用默认方法我让用户下载jquery两次，这也增加了我的加载时间，对吗？）

这意味着在我的functions.php文件中将jquery和我的脚本排入队列，如下所示：

wp_enqueue_script('jquery');

function add_cdtoevent() {
        wp_enqueue_script('countdown', get_template_directory_uri() . 'countdown.js', array('jquery'), true );
}

add_action( 'wp_enqueue_scripts', 'add_cdtoevent' );

然后重复默认方法的步骤2）和3），它只是不工作！我尝试在步骤2）中包装我的jquery代码，就像这样：

jQuery(document).ready(function( $ ) {

    // $ Works! You can test it with next line if you like
    // console.log($);

});

但它仍然无效。如果有人可以提供帮助，我们将非常感激！

我目前在header.php：

中拥有的内容

<?php if(is_front_page() ) { ?>

     <div id="cdtoevent" class="countcont">
     <div class="countdown styled"></div>
     </div>

<?php } ?>

我目前在footer.php：

中拥有的内容

<script type="text/javascript">

    $(function() {
        var endDate = "November 14, 2015 10:00:00";

            $('.countdown.styled').countdown({
                date: endDate,
                render: function(data) {
                        $(this.el).html("<div>" + this.leadingZeros(data.days, 2) + " <span>days</span></div><div>" + this.leadingZeros(data.hours, 2) + " <span>hours</span></div><div>" + this.leadingZeros(data.min, 2) + " <span>minutes</span></div><div>" + this.leadingZeros(data.sec, 2) + " <span>seconds</span></div>");
            }
        });
    });

</script>

我目前在functions.php：

中拥有的内容

// Loads JavaScript file with functionality specific to LCQC.

wp_enqueue_script('jquery');

function add_cdtoevent() {
        wp_enqueue_script('countdown', get_template_directory_uri() . 'countdown.js', array('jquery'), true );
}

add_action( 'wp_enqueue_scripts', 'add_cdtoevent' );

The jquery plugin（。js）

Answer 1

使用函数排队脚本是个好主意。但是：你在哪里调用这个功能？你需要调用它来排队你的脚本。执行此操作的最佳方法是将其附加到正确的操作（wp_enqueue_scripts）：add_action('wp_enqueue_scripts', 'add_cdtoevent');。

如果您想了解有关此功能的更多信息，我写了一篇关于including scripts in WordPress的指南。知道它如何工作很有用，因为你可以发现手动排队jQuery是没用的：你表明它是一个依赖项，所以WordPress会在需要时自动添加它。

Answer 2

我终于开始工作了！

首先，我放错了位置，因为它位于functions.php文件中的另一个函数内..

// Loads JavaScript file with functionality specific to LCQC.

wp_enqueue_script('jquery');

function add_cdtoevent() {
        wp_enqueue_script('countdown', get_template_directory_uri() . 'countdown.js', array('jquery'), true );
}

add_action( 'wp_enqueue_scripts', 'add_cdtoevent' );

之后，我确保我的脚本在我的结束体标记之前以这种方式声明（由于noConflict（）变量wordpress使用）：

<script type="text/javascript">

jQuery(document).ready(function($) {
    $(function() {
        var endDate = "November 14, 2015 10:00:00";
            $('.countdown.styled').countdown({
                date: endDate,
                render: function(data) {
                        $(this.el).html("<div>" + this.leadingZeros(data.days, 2) + " <span>days</span></div><div>" + this.leadingZeros(data.hours, 2) + " <span>hours</span></div><div>" + this.leadingZeros(data.min, 2) + " <span>minutes</span></div><div>" + this.leadingZeros(data.sec, 2) + " <span>seconds</span></div>");
            }
        });
    });
});

</script>

最后，我在jquery.countdown.js中修改了以下几行：

jQuery.fn.countdown = function(options) {
  return $.each(this, function(i, el) {
    var $el = $(el);
    if (!$el.data(NAME)) {
      // allow setting the date via the data-date attribute
      if ($el.data(DATA_ATTR)) {
        options.date = $el.data(DATA_ATTR);
      }
      $el.data(NAME, new Countdown(el, options));
    }
  });
};

到：

jQuery(document).ready(function($) {
    jQuery.fn.countdown = function(options) {
      return $.each(this, function(i, el) {
        var $el = $(el);
        if (!$el.data(NAME)) {
          // allow setting the date via the data-date attribute
          if ($el.data(DATA_ATTR)) {
            options.date = $el.data(DATA_ATTR);
          }
          $el.data(NAME, new Countdown(el, options));
        }
      });
    };  
});

谢谢大家的帮助！

在Wordpress中包含一个github jquery插件

2 个答案: