向 WordPress 网站添加日期和时间小部件的 5 种方法

显示日期和时间小部件是从报纸网站开始的。 从他们的报纸上获取今天的日期一直是人们生活的一部分。 当印刷新闻转向网络时，这种情况不会改变。

然而，显示当前日期和时间不仅适用于新闻网站。 其他网站应该考虑这样做的原因有很多：

• 您可以显示您所在时区的当前时间，让客户知道他们何时可以联系客户支持
• 即使您的内容有点旧，它也能让您的网站看起来生动有趣。 这很重要，因为我们大多数人都在寻找最新的信息。
• 如果您的页面上有即将发生的事件，当前时间和日期可帮助访问者了解他们需要等待多长时间（或者，使用倒计时模块，例如 Divi 主题中包含的模块）

简而言之，显示日期和时间小部件有助于绑定您的受众，使您的网站更具吸引力，并将您定位为最新新闻和信息的提供者。 有足够的理由学习如何在您的 WordPress 网站上实现一个。

在下面的文章中，我们将向您展示为您的网站创建日期和时间小部件的几种方法。 首先，我们将讨论如何手动完成，然后将讨论一些插件解决方案，让您无需任何编码即可完成相同的操作。

听起来不错？ 那么，让我们不要犹豫不决，而要直接去做。

如何在 WordPress 中手动创建日期和时间小部件

在您的网站上包含当前时间和日期的一种方法是自己编写解决方案。 这是我们首先要做的。 我们将创建一个简单的短代码，如果在您网站的任何位置输入，就会向您的访问者显示时间和日期。

创建简码

我们的第一步是设置实际的短代码。 为此，我们将首先打开当前主题的functions.php 。 我们强烈建议您为此使用子主题，以免在更新父主题时丢失任何更改。

打开文件后，将这段代码粘贴到文件末尾：

function current_time_date(){
return date('F jS, Y, H:i:s');
}

add_shortcode( 'time_date', 'current_time_date' );

关于此的一些信息：上面的代码是一个函数，它吐出当前日期和时间，然后将其分配给一个名为[time_date]的短代码。 如果您在网站上输入短代码，它就会调用该功能。

在我们上面使用的格式中，时间和日期以这种格式输出：2017年7月6日，12:35:41。 但是，您可以使用可以在此处了解的不同格式。

现在，要测试代码，只需将短代码复制到您网站上的某处即可。 但是请注意，默认情况下短代码在小部件中不起作用。 为了使用它们，您需要安装 Shortcode Widget 插件或将此行添加到functions.php 。

add_filter('widget_text','do_shortcode');

之后，这是结果：

切换到 JavaScript

到目前为止看起来不错，不是吗？ 但是，如果您按照上述步骤操作，您会很快注意到时钟不会自行更新。 相反，它只吐出一次当前时间——当页面加载时。 在那之后它保持静止，哪种方式有点违背目的，你不同意吗？

这是因为 PHP 是一种服务器端语言，这意味着您需要对服务器进行额外调用以更新信息。 出于这个原因，我们最好使用像 JavaScript 这样的客户端语言。

幸运的是，网上有可用的加载 JavaScript 时钟。 简短的谷歌搜索将显示大量示例。 我使用此服务为我想要的格式生成 JavaScript 代码。 之后，我将代码输入到我复制到我的主题文件夹的名为clock.js 的文件中。

该脚本调用名称为clockbox的 div。 出于这个原因，我将我之前的功能更改为以下内容：

function current_time_date(){

echo '<div id="clockbox"></div>';

}

add_shortcode( 'time_date', 'current_time_date' );

现在，剩下的就是调用我的新 JavaScript 文件：

wp_enqueue_script( 'clock', get_theme_file_uri('/clock.js'));

瞧：

添加样式

最后，您可能希望能够设置时间和日期小部件的样式，使其适合您的整体品牌。 幸运的是，由于我们使用的函数创建了 CSS id，我们可以将自己的样式添加到日期和时间小部件，如下所示：

#clockbox {
font-size: 22px;
font-style: italic;
color: #999;
}

结果如下：

现在没那么难了，是吗？ 告诉你这会很容易。 然而，这只是创建您自己的日期和时间小部件的一种方式。 通过额外的编码，你可以做更多的事情。

但是，如果您不是手动路线，您也可以在 WordPress 插件的帮助下获得类似的结果。

为您的网站创建时间和日期小部件的插件

虽然 WordPress 目录中可用的插件数量并不多，但有一些样本做得足够好。

实时时钟日期

我们的第一个竞争者是这个插件。 顾名思义，它允许您向 WordPress 网站添加时钟和日期。

他们的时间和日期小部件提供了许多自定义选项。 您可以选择 12 小时或 24 小时周期，是每分钟还是每秒更新时钟，显示或隐藏日期并确定它们的顺序。 该小部件甚至有一个用于自定义 CSS 的部分，因此您可以使用与您的网站相同的字体等等。

不幸的是，格式选项在其他方面有些限制。 例如，无法从日期中删除工作日。 但是，除此之外，该插件还可以完成它应该做的事情。

日期和时间小工具

首先，一点警告。 这个插件有点旧，上次更新是两年前。 因此，无法保证它适用于所有现代主题和最新版本的 WordPress。 但是，由于它在我的 WordPress 4.8 测试中运行良好，并提供了一组不错的选项，我认为值得包括在内。

安装后，插件会在小部件菜单中添加一个新的日期和时间小部件。 当您将其添加到小部件区域时，它为您提供了多种自定义方式。

如您所见，您可以配置时间和日期格式（或完全禁用它）、更改字体系列和大小以及文本颜色和背景颜色（包括十六进制代码）。 这样，很容易使小部件适合您的主题。 如果这还不够，小部件有足够的 HTML 类，因此您可以轻松实现自己的自定义 CSS 规则。

当前日期和时间

此列表中的最后一个插件非常简单。 安装、激活并获得一个名为Current Date and Time的新小部件，您可以将其拖到任何小部件区域。 完毕。

结果看起来不错，并自动调整到您的主题风格。 它还具有移动响应能力，这在当今是必不可少的。 另一方面，它不提供任何调整任何选项的选项。 只有一种时间格式可用，更多的你需要购买专业版。

结论

在您的 WordPress 网站上显示时间和日期小部件的原因有很多。 这是让您的客户知道他们何时可以联系到您、您的内容的最新情况等的好方法。

正如您从上面看到的，有几种方法可以在 WordPress 中实现这一点。 一种是设置您自己的短代码以在您想要的任何地方实现小部件。 当然，也有插件可以为您做同样的事情。 虽然不是压倒性的，但也有一些强有力的竞争者。

现在交给你了。 您以前在您的网站上使用过时间和日期小部件吗？ 如果是这样，您需要它做什么以及您是如何实施它的？ 在下面的评论部分让我们知道。

文章缩略图由 Jane Kelly/shutterstock.com 提供