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>

在页面的头部包含所需的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">

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

 

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

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

 
<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>
```
1. 将以下CSS代码段添加到CSS文件中。
  
  html，body { 身高：100％; } html { background-image：url（'../ img / sample.jpg'）; 背景位置：中心; background-repeat：no-repeat; 背景尺寸：封面; } 身体 { background-color：rgba（44,62,80,0.6）; background-image：url（'../ img / pattern.png'）; 背景位置：中心; background-repeat：重复; font-family：'Raleway'，'Arial'，sans-serif; } .countdown-container { 位置：相对; 最高：50％; -webkit-transform：translateY（-50％）; -moz-transform：translateY（-50％）; transform：translateY（-50％）; } .clock-item .inner { 身高：0px; padding-bottom：100％; 位置：相对; 宽度：100％; } .clock-canvas { background-color：rgba（255,255,255，.1）; border-radius：50％; 身高：0px; padding-bottom：100％; } .text { 颜色：#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 { 保证金：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

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

让我们翻译每一步：

在页面末尾添加必要的javascript文件。

您不需要包含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);
}

在页面的头部包含所需的bootstrap 3 CSS。

在同一功能中，添加以下行：

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

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

查看您要包含它的位置。如果你想在标题内的所有页面上使用它，请在主题文件夹中的 header.php 中添加它。

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

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

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

您可以在自己的js文件中执行此操作。在您的js文件夹中添加 countdown.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'
    });
});

这样可以防止任何冲突。

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

1 个答案: