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

我喜欢这个来自http://www.jqueryscript.net/time-clock/Modern-Circular-jQuery-Countdown-Timer-Plugin-Final-Countdown.html的倒计时脚本，并希望将这个用于我的wordpress网站，我阅读了一些关于如何将任何脚本放入wordpress的教程，但我无法理解，因为我是新手，你能帮助我做这一步吗？步

now i will show the script author instructions to use this script on normal html page i want to do these steps also but in 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>

• 在页面开头包含所需的bootstrap 3 CSS .

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

• 使用html结构创建一个倒数计时器，如下所示：

<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>

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

html，body {身高：100％; } html {background-image：url（'../ img / sample.jpg'）;背景位置：中心; background-repeat：no-repeat;背景尺寸：封面; } body {background-color：rgba（44,62,80,0.6）; background-image：url（'../ img / pattern.png'）;背景位置：中心; background-repeat：重复; font-family：'Raleway'，'Arial'，sans-serif; } .countdown-container {position：relative;最高：50％; -webkit-transform：translateY（-50％）; -moz-transform：translateY（-50％）; transform：translateY（-50％）; } .clock-item .inner {height：0px; padding-bottom：100％;位置：相对;宽度：100％; } .clock-canvas {background-color：rgba（255,255,255，.1）; border-radius：50％;身高：0px; padding-bottom：100％; } .text {color：#fff; font-size：30px; font-weight：bold; margin-top：-50px;位置：绝对;最高：50％; text-align：center; text-shadow：1px 1px 1px rgba（0,0,0,1）;宽度：100％; } .text .val {font-size：50px; } .text .type-time {font-size：20px; } @media（min-width：768px）和（max-width：991px）{ . clock-item {margin-bottom：30px; @media（max-width：767px）{ . clock-item {margin：0px 30px 30px 30px; }}

• 初始化倒数计时器并在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
});
});