如何添加这个jQuery脚本中使用WordPress网站

Question

我喜欢这个倒计时脚本http://www.jqueryscript.net/time-clock/Modern-Circular-jQuery-Countdown-Timer-Plugin-Final-Countdown.html，并希望使用这样一来我的wordpress网站，我了解如何把在WordPress的任何脚本一些教程，但我不明白究竟原因我是新手，你可以帮我做这一步一步

现在我将显示脚本作者说明使用该脚本普通HTML 我想要做的这些步骤还页面上，但在WordPress。

1. 在页面末尾添加必要的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> 
   

2. 将所需的引导程序3 CSS包含在页面头部。

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

3. 使用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> 
   

4. 添加以下CSS代码片段到你的CSS文件。

   HTML，身体{ 高度：100％; } html { background-image：url（'../ img/sample.jpg'）; background-position：center center; background-repeat：no-repeat; background-size：cover; } body { background-color：rgba（44,62,80,0.6）; background-image：url（'../ img/pattern.png'）; background-position：center; background-repeat：repeat; font-family：'Raleway'，'Arial'，sans-serif; } .countdown-container { position：relative; top：50％; -webkit-transform：translateY（-50％）; -moz-transform：translateY（-50％）; transform：translateY（-50％）; } .clock-item .inner { height：0px; 填充底部：100％; 位置：相对; 宽度：100％; } .clock-canvas {0} background-color：rgba（255,255,255，.1）; border-radius：50％; height：0px; 填充底部：100％; } .text { color：#fff; font-size：30px; font-weight：bold; margin-top：-50px; position：absolute; top：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（最小宽度：768px）和（最大宽度：991px）{ 。钟表项{margin_top：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 
}); 
}); 

Answer 1

要添加JavaScript和CSS文件里面的WordPress，您需要使用您的的functions.php主题文件里面wp_register_script和wp_register_style功能。

让我们翻译的每一步：

Include the necessary javascript files at the end of the page.

你并不需要包括jQuery的，因为它已经由WordPress包括在内。下载kinetic.js和jquery.final-countdown.js，并将它们添加到js目录中的主题文件夹中。

然后在你的functions.php添加以下内容：

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); 
} 

Include the required bootstrap 3 CSS in the head of the page.

在相同的功能，添加以下行：

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

Create a countdown timer using the html structure like this

看到您要包括它。如果您希望在标题内的所有页面上添加此内容，请将header.php添加到您的主题文件夹中。

Add the following CSS snippet to your CSS file.

只需在实际样式表中添加代码。

Initialize the countdown timer and set the start time, end time and current time in the javascript.

你可以在你自己的js文件中做到这一点。添加countdown.js文件在您的js文件夹，它排队像以前一样：

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

而在你countdown.js文件：

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

这样，它会阻止任何冲突。