如何在 Blocksy 中添加倒计时或动态内容短代码？

在 Blocksy 主题中添加倒计时或动态内容短代码，可以通过使用 WordPress 短代码功能来实现。Blocksy 是一个基于 Gutenberg 编辑器的 WordPress 主题，支持多种短代码和自定义区块。以下是如何在 Blocksy 中添加倒计时或动态内容短代码的详细步骤。

### 1. 安装并激活短代码插件（可选）

如果你想要使用更多高级的短代码功能，可以安装一些支持短代码的插件，例如：

– **Shortcodes Ultimate**：提供丰富的短代码库。
– **WP Shortcode Ultimate**：同样支持多种短代码类型。

这些插件可以让你更方便地插入倒计时、按钮、表单等动态内容。

### 2. 使用默认的 WordPress 短代码

WordPress 本身支持一些基本的短代码，但并不包括倒计时功能。你可以通过以下方式添加倒计时：

#### 方法一：使用 JavaScript 实现倒计时

你可以在 Blocksy 的“自定义代码”设置中，或者直接在编辑器中插入 HTML 和 JavaScript 代码。

##### 示例：简单的倒计时代码

“`html

var countDownDate = new Date(“Jan 1, 2025 00:00:00”).getTime();

var x = setInterval(function() {

var now = new Date().getTime();
var distance = countDownDate – now;

var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);

document.getElementById(“countdown”).innerHTML = days + “天 ” + hours + “小时 “
+ minutes + “分钟 ” + seconds + “秒 “;

if (distance < 0) {
clearInterval(x);
document.getElementById(“countdown”).innerHTML = “已过期”;
}
}, 1000);

“`

将以上代码复制到 Blocksy 编辑器中的“HTML”区块中即可显示倒计时。

### 3. 使用 Blocksy 自带的动态区块

Blocksy 支持一些动态内容区块，如：

– **日期时间区块**
– **用户信息区块**
– **评论数区块**

虽然这些不包含倒计时功能，但你可以结合 JavaScript 来实现动态更新的内容。

### 4. 使用插件添加倒计时功能

推荐使用以下插件来添加倒计时：

#### 插件推荐：

– **CountDown Timer by WPBeginner**：简单易用，支持多个倒计时。
– **Ultimate Countdown Timer**：功能丰富，支持多种样式。

安装并激活插件后，你可以通过短代码插入倒计时，例如：

“`
[ultimate_countdown timer_id=”1″]
“`

然后在后台设置倒计时的时间和样式。

### 5. 在 Blocksy 编辑器中插入短代码

在 Blocksy 的编辑器中，点击“+”号添加新区块，选择“短代码”或“HTML”区块，然后输入你的短代码。

### 6. 使用自定义字段和 ACF 添加动态内容

如果你希望根据自定义字段显示动态内容，可以结合 Advanced Custom Fields (ACF) 插件创建自定义字段，然后在模板中调用。

### 7. 保存并预览

完成所有设置后，保存页面并预览，确保倒计时或动态内容正常显示。

—

### 总结

在 Blocksy 中添加倒计时或动态内容短代码的方法有多种，包括：

– 使用 JavaScript 实现原生倒计时
– 利用 WordPress 短代码功能
– 安装第三方插件增强功能
– 结合 ACF 创建自定义字段

通过这些方法，你可以轻松地在 Blocksy 主题中添加吸引人的倒计时或动态内容，提升网站的互动性和用户体验。