在Wordpress中包含一个github jquery插件

我想在我的wordpress网站上包含一个来自github的插件（https://github.com/rendro/countdown）。经过几个小时的研究，在这里，我仍然无法找到使其工作的方法。在Wordpress中包含一个github jquery插件

如果我使用的默认方法：

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）初始化与我的期望的构型的插件在</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）

来源

2015-11-04 Jake C.

'head'中的脚本会使网站变慢。它最好在关闭主体标签之前使用脚本。这样所有的内容都被加载。当完成时，JavaScript被加载。这样用户已经看到了一些东西。 – SuperDJ

我的脚本标记位于我的''和''标记之间，而不在''之间。不过谢谢你的这个小建议。我会确保修改！ –

它不起作用？控制台中有任何错误？ – vard

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

如果您想了解更多关于此功能的信息，我写了一本关于including scripts in WordPress的指南。了解它是如何工作是有用的，因为您可以发现手动排队jQuery是无用的：您指出它是一个依赖项，所以WordPress会根据需要自动添加它。

来源

2015-11-04 16:31:43 Jeremy

我今天早上真的看过你的文章！我试过这个： 'add_action（'wp_enqueue_scripts'，'add_my_script'）; function add_my_script（）{ wp_enqueue_script（ 'your-script'，//为您的脚本命名，以便您可以附加其他脚本并取消注册等。 get_template_directory_uri（）。'/js/your-script.js' ，//这是你的脚本文件的位置 array（'jquery'）//这个数组列出你的脚本所依赖的脚本）; }' 但它似乎没有工作。你告诉我的是，我不需要“wp_enqueue_script（'jquery'）;”因为我使用“数组”？ –

刚编辑我的帖子，因为这（'add_action（'wp_enqueue_scripts'，'add_cdtoevent'）;'）已经在我的函数后面添加。我仍然得到这个错误：“Uncaught TypeError：$不是一个函数”。 Je viens juste de voir que tu esfrançais，que le monde est petit：'D。 –

可能包含脚本的顺序有问题吗？如果你的脚本在包含jQuery之前试图使用'$'，它将不起作用。为了确保你的脚本包含在正确的顺序中，把你的脚本放在一个外部文件中，并按照包含其他脚本的方式（使用jQuery插件作为依赖）排入此文件。（我继续用英文写，所以每个人都可以找到答案，如果他们搜索:)） – Jeremy

我终于搞定了！

首先，我后来把它错，因为它是在我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)); 
     } 
     }); 
    }; 
});

谢谢大家的帮助！

来源

2015-11-04 17:41:13

在Wordpress中包含一个github jquery插件

回答

相关问题