php – 在WordPress中包含一个github jquery插件

2023年10月25日 141次阅读

我试图在我的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)

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

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

点赞