向 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 提供