在 Wordpress 中包含一个 github jquery 插件
Posted
技术标签:
【中文标题】在 Wordpress 中包含一个 github jquery 插件【英文标题】：Including a github jquery plugin in Wordpress 【发布时间】：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文件中。
【参考方案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));
);
;
);
感谢大家的帮助！
【讨论】：
以上是关于在 Wordpress 中包含一个 github jquery 插件的主要内容，如果未能解决你的问题，请参考以下文章