如何将jquery脚本添加到wordpress网站

Question

我很喜欢这个从http://www.jqueryscript.net/time-clock/modern-circular-jquery-countdown-timer-plugin-final-countdown.html下载的倒计时脚本，想把它用到我的wordpress网站上，我读了一些关于如何在wordpress中放入任何脚本的教程，但是我不能完全理解，因为我是新手，你能帮我一步一步地做吗

现在我将向脚本作者说明如何在普通的html页面上使用这个脚本，我也想在wordpress中执行这些步骤。

>

在页面末尾包含必要的javascript文件。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js">     
</script> 
<script type="text/javascript" src="js/kinetic.js"></script> 
<script type="text/javascript" src="../jquery.final-countdown.js"></script> 

<link rel="stylesheet"          
 href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

<div class="countdown-container container">
<div class="clock row">

<!-- days --> 
<div class="clock-item clock-days countdown-time-value col-sm-6 col-md-3">
<div class="wrap">
<div class="inner">
<div id="canvas_days" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-days type-time">DAYS</p>
</div>
</div>
</div>
</div>

<!-- hours --> 

<div class="clock-item clock-hours countdown-time-value col-sm-6 col-md-3">
<div class="wrap">
<div class="inner">
<div id="canvas_hours" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-hours type-time">HOURS</p>
</div>
</div>
</div>
</div>

<!-- minutes --> 
<div class="clock-item clock-minutes countdown-time-value col-sm-6 col-md-3">
<div class="wrap">
<div class="inner">
<div id="canvas_minutes" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-minutes type-time">MINUTES</p>
</div>
</div>
</div>
</div>

<!-- seconds --> 
<div class="clock-item clock-seconds countdown-time-value col-sm-6 col-md-3">
<div class="wrap">
<div class="inner">
<div id="canvas_seconds" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-seconds type-time">SECONDS</p>
</div>
</div>
</div>
</div>
</div>

</div>

初始化倒计时计时器，在JavaScript中设置开始时间、结束时间和当前时间。

 <script type="text/javascript">
 $('.countdown').final_countdown({
 start: '1362139200',
 end: '1388461320',
 now: '1387461319'
  });
 </script>

所有默认选项。

$(document).ready(function() {
$('.countdown').final_countdown({
start: '1362139200',
end: '1388461320',
now: '1387461319',
selectors: {
value_seconds: '.clock-seconds .val',
canvas_seconds: 'canvas_seconds',
value_minutes: '.clock-minutes .val',
canvas_minutes: 'canvas_minutes',
value_hours: '.clock-hours .val',
canvas_hours: 'canvas_hours',
value_days: '.clock-days .val',
canvas_days: 'canvas_days'
  },
 seconds: {
   borderColor: '#7995D5',
   borderWidth: '6'
 },
  minutes: {
  borderColor: '#ACC742',
  borderWidth: '6'
 },
 hours: {
   borderColor: '#ECEFCB',
   borderWidth: '6'
  },
  days: {
  borderColor: '#FF9900',
  borderWidth: '6'
}}, function() {
// Finish callback
});
});

Answer 1

要在Wordpress中添加Javascript和CSS文件，需要在functions.php主题文件中使用wp_register_script和wp_register_style函数。

所以我们来翻译一下每一步：

包括必要的javascript文件。

add_action('wp_enqueue_scripts', 'my_enqueue_scripts');
function my_enqueue_scripts() {
    wp_enqueue_script('kinetic', get_stylesheet_directory_uri() . '/js/kinetic.js', array('jquery'), '', true);
    wp_enqueue_script('countdown', get_stylesheet_directory_uri() . '/js/jquery.final-countdown.js', array('jquery'), '', true);
}

wp_enqueue_style('bootstrap_css', '//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css');

使用如下所示的html结构创建一个倒计时计时器

看看您要将其包含在何处。如果您想要在所有的页面inside header中添加这个内容，请在主题文件夹中添加inside header.php。

将以下CSS片段添加到CSS文件中。

wp_enqueue_script('countdown_script', get_stylesheet_directory_uri() . '/js/countdown.js', array('jquery'), '', true);

jQuery(document).ready(function($) {
    $('.countdown').final_countdown({
        start: '1362139200',
        end: '1388461320',
        now: '1387461319'
    });
});