在 Wordpress 中包含一个 github jquery 插件答案

【问题标题】：Including a github jquery plugin in Wordpress在 Wordpress 中包含一个 github jquery 插件
【发布时间】：2016-02-05 04:11:13
【问题描述】：

我正在尝试在我的 wordpress 网站上包含来自 github (https://github.com/rendro/countdown) 正确方式的插件。经过数小时的法典和堆栈研究后，我仍然找不到使其工作的方法。

如果我使用默认方法：

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

<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) 在我的header.php 文件中的</head> 和<body> 之间使用我想要的配置初始化插件，在这种情况下：

<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 两次，这也增加了我的加载时间，对吧？）

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

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)

【问题讨论】：

head 中的脚本会使网站变慢。最好在结束正文标记之前使用脚本。这样所有的内容都被加载了。完成后，将加载 javascript。这样用户已经看到了一些东西。
我的脚本标签位于</head> 和<body> 标签之间，而不是<head>。不过，谢谢你的这个小建议。我会确保修改它！
怎么不工作了？控制台有错误吗？
我遇到了诸如“Uncaught TypeError: $ is not a function”之类的错误。但我终于让它工作了，我的错误主要是我把我的函数放在了我的function.php文件中。

标签： php jquery wordpress github plugins

【解决方案1】：

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

如果您想了解有关此功能的更多信息，我编写了有关 including scripts in WordPress 的指南。了解它是如何工作的很有用，因为您随后会发现手动将 jQuery 加入队列是没有用的：您指出它是一个依赖项，因此 WordPress 会在需要时自动添加它。

【讨论】：

今天早上我真的读了你的文章！我试过这个：add_action( 'wp_enqueue_scripts', 'add_my_script' ); function add_my_script() { wp_enqueue_script( 'your-script', // name your script so that you can attach other scripts and de-register, etc. get_template_directory_uri() . '/js/your-script.js', // this is the location of your script file array('jquery') // this array lists the scripts upon which your script depends ); } 但它似乎没有用。你告诉我的是我不需要“wp_enqueue_script('jquery');”因为我使用了“数组”？
刚刚编辑了我的帖子，因为这个 (add_action( 'wp_enqueue_scripts', 'add_cdtoevent' );) 已经在我的函数之后添加了。我仍然收到此错误：“未捕获的 TypeError：$ 不是函数”。 Je viens juste de voir que tu es français, que le monde est petit :'D.
可能是包含脚本的顺序有问题？如果您的脚本在包含 jQuery 之前尝试使用 $，它将无法正常工作。为确保您的脚本以正确的顺序包含，请将您的脚本放在外部文件中，并以与包含其他文件相同的方式将该文件排入队列（使用 jQuery 插件作为依赖项）。（我继续用英文写，大家搜索一下就能找到答案：））
其实我只是在一步一步地检查并验证了一切之后才找到解决方案。（出于同样的原因，我后来继续用英语写作，不用担心）。我的主要错误是我将函数和 add_action 放在现有函数中。仍然很难找到合适的组合让它发挥作用，但我做到了！再次感谢您的帮助:)

【解决方案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' );

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

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

感谢大家的帮助！

【讨论】：