如何添加這個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' 
    }); 
}); 

這樣，它會阻止任何衝突。