gpt4 book ai didi

php - 在 Wordpress 中包含一个 github jquery 插件

转载 作者:可可西里 更新时间:2023-10-31 23:38:40 24 4
gpt4 key购买 nike

我正在尝试在我的 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 两次,这也增加了我的加载时间,对吧?)

这意味着将 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)

最佳答案

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

我写了一篇关于 including scripts in WordPress 的指南如果您想了解有关此功能的更多信息。了解它的工作原理很有用,因为您随后会发现手动排队 jQuery 是无用的:您指出它是一个依赖项,因此 WordPress 会在需要时自动添加它。

关于php - 在 Wordpress 中包含一个 github jquery 插件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33525699/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com