Divi 中的日期和時間格式指南

已發表: 2020-06-25

在您的網站上顯示日期和時間是大多數人並沒有真正考慮過的事情之一。 我們傾向於堅持使用發布元數據發布日期的默認格式。 而且,如果我們有時間,我們會將當前年份動態添加到版權文本旁邊的頁腳欄中。

但是,了解如何格式化日期和時間會派上用場。 它使您可以自由地使日期對用戶更具可讀性。 例如,“2020 年 5 月 23 日星期一”比“5.23.20”這樣的最小日期顯示更溫暖(也更人性化)。 雖然後者確實有它的位置。 格式化網站上的當前時間也是如此。 某些站點可能會受益於“8:30pm”等 12 小時顯示,而其他站點(如軍事或醫療站點)則更喜歡“20:30”等 24 小時顯示。

Divi 和 WordPress 為您提供了對 PHP 中可用的日期和時間格式的驚人控制。 在本教程中,我們將幫助您了解如何在 Divi 中顯示、格式化和設置日期和時間的樣式。 您將能夠為博客文章提供發布日期的自定義格式,甚至可以向號召性用語添加動態元素以獲得更個性化的風格(即“星期一快樂!看看我們的新交易。”)。

讓我們開始吧!

免費下載日期和時間格式指南 Divi 佈局

為了幫助快速了解 Divi 中的日期和時間格式,請下載這個有用的日期和時間格式指南佈局。 它包括在 Divi 文本模塊中用作動態內容的每種日期/時間格式的示例,因此您可以親眼看到每種格式在實時頁面上的功能。

divi 日期和時間佈局

要了解日期和時間格式指南,您首先需要使用下面的按鈕下載它。 要訪問下載,您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶,您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包! 如果您已經在列表中,只需在下面輸入您的電子郵件地址,然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。

下載文件
免費下載

免費下載

加入 Divi 時事通訊,我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包,以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨,您將很快成為 Divi 大師。 如果您已經訂閱,只需在下面輸入您的電子郵件地址,然後單擊下載即可訪問佈局包。

您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包!

要將部分佈局導入您的 Divi 庫,請導航到 Divi 庫。

單擊導入按鈕。

在可移植性彈出窗口中,選擇導入選項卡並從您的計算機中選擇下載文件。

然後點擊導入按鈕。

分區通知框

完成後,分區佈局將在 Divi Builder 中可用。

讓我們進入教程,好嗎?

用於顯示日期和時間的可用格式字符

如前所述,Divi 利用 WordPress 的內置日期和時間格式。 但在我們進入如何在 Divi 中格式化日期和時間之前,它有助於了解我們可用的格式化字符。

下面是可用格式字符的列表,它們可以一起使用(或組合使用)來創建自定義日期和時間格式。 在 Divi 網站上嘗試使用獨特的日期和時間格式時,這會派上用場。

日期格式

DAY 格式字符

  • d = 月份中的第幾天,帶前導零的 2 位數字(“02”、“22”)
  • D = 以三個字母表示的月份中的某一天(“Jun”、“Jul”)
  • l (小寫“L”)=星期幾,全詞(“Monday”、“Tuesday”)
  • N = ISO-8601 數字星期幾(“1”代表星期一,“7”代表星期日)
  • S = 月份的後綴; 與 j(“nd”、“st”、“rd”)一起使用
  • w = 星期幾(星期日為“0”,星期六為“6”)
  • z = 一年中的第幾天,從 0 開始(即“173”或“這是一年中的第 173 天”)

WEEK 格式字符

  • W = 26(一年中的周數,從星期一開始的周數;即“這是一年中的第 26 週”)

MONTH 格式字符

  • F = 一個月(“一月”或“三月”)的全文表示
  • m = 數字月份,帶前導零(六月顯示為“06”)
  • M = 三個字母的月份(三月顯示為“Mar”)
  • n = 數字月份,不帶前導零(六月顯示為“6”)
  • t = 給定月份的天數(如果是六月,它會顯示“30”)

年格式字符

  • Y = 2020(4 位數字年份;即“2020”)
  • y = 20(2 位數字年份;即“20”)

示例日期格式字符串

  • M j, Y = 2020 年 6 月 22 日
  • F d, Y = 2020 年 6 月 22 日
  • m/d/Y = 06/22/2020
  • mdY = 06.22.2020
  • j M, Y = 2020 年 6 月 22 日
  • l, M d = 6 月 22 日,星期一
  • l, F jS, Y = 2020 年 6 月 22 日,星期一
  • m·d·y = 06·22·20

時間格式

時間格式字符

  • a =(小寫“am”或“pm”)
  • A = PM(大寫“AM”或“PM”)
  • g = 小時,12 小時,不帶前導零(“1-12”)
  • h = 小時,12 小時制,帶前導零(“01-12”)
  • G = 小時,24 小時制,不帶前導零(“0-23”)
  • H = 小時,24 小時制,帶前導零(“00-23”)
  • i = 10(分鐘,帶前導零(“00-59”)
  • s = 52(秒,帶前導零(“00-59”)
  • T = 時區(“CDT”、“EST”)

示例時間格式字符串

  • g:ia = 下午 4:10
  • g:i:sa = 下午 4:10:52

日期 + 時間格式字符串

  • Y/m/dg:i:s A = 2020/06/22 4:10:52 PM
  • M j, Y @ G:i = 2020 年 6 月 22 日 @ 16:10

使用“\”轉義格式字符串以合併其他文本/字符

這是自定義日期和時間顯示的一個非常有用的技巧。 只需在要包含在格式字符串中的每個字符/字母前添加“\”,該字符就會正常呈現(在字符串之外)。 因此,“/T/h/e”將在格式字符串中呈現單詞“The”,而不是像時區(“T”)或小時(“h”)這樣的實際日期/時間元素。

  • D \a\t ga = 週一下午 4 點
  • \T\h\e dS \d\a\y \o\f F = 六月的第 22 天

使用 Divi 格式化日期和時間

在站點範圍內更改默認日期格式

如果您想更改站點範圍內的默認日期和時間格式,WordPress 有一個內置選項。 從您的 WordPress 儀表板,導航到設置 > 常規。 在那裡您將看到更改默認時區、日期格式和時間格式的選項。

divi 日期和時間格式

當您使用帶有 Divi Builder 的動態內容添加日期或時間時,Divi 實際上使用這些相同的默認格式(如發布日期和當前日期)。

divi 日期和時間格式

如果您使用 Divi 的默認博客文章佈局(不是使用 Divi Builder 構建的自定義佈局),您可以輸入一個自定義日期格式字符串,以用於整個站點的所有博客文章。 您可以通過導航到 Divi > 主題選項並在常規選項卡下向下滾動頁面來找到日期格式選項。

divi 日期和時間格式

有趣的是,您甚至可以輸入時間格式字符來顯示帖子的發佈時間。

divi 日期和時間格式

使用 Divi 的動態內容格式化和顯示日期和時間

使用 Divi Builder 時,您可以選擇將當前日期或發布後日期作為動態內容添加到任何模塊。 這是根據具體情況覆蓋默認日期和時間格式以及為日期/時間文本添加自定義樣式的好方法。

要將帖子發布日期或當前日期作為動態內容添加到 Divi 中的頁面,只需向頁面添加文本模塊即可。

divi 日期和時間格式

然後在將鼠標懸停在內容框上時選擇動態內容圖標。

divi 日期和時間格式

將動態日期添加到模塊內容後,您可以單擊 編輯動態日期以進行更多自定義。 這些附加設置包括將前後內容添加到日期顯示的選項以及自定義日期格式的選項。

divi 日期和時間格式

Divi 的內置日期格式

在日期格式下拉菜單下,您將找到以下可以選擇的預製日期格式。

  • M j, Y = 2020 年 6 月 22 日
  • F d, Y = 2020 年 6 月 22 日
  • m/d/Y = 06/22/2020
  • mdY = 06.22.2020
  • j M, Y = 2020 年 6 月 22 日
  • l, M d = 6 月 22 日,星期一

添加自定義日期/時間格式

要創建自定義日期/時間格式,請從下拉列表中選擇自定義選項。 選擇自定義選項後,您將有一個可用的輸入框,您可以在其中通過添加可用格式字符的任意組合來為日期、時間或兩者創建完美的格式字符串,從而發揮您的魔力。

divi 日期和時間格式

同樣的過程可用於添加當前時間或發布發佈時間。 只需在自定義日期格式框中添加時間格式字符。

divi 日期和時間格式

準備好內容後,您可以使用 Divi 的內置設計設置,在文本模塊的設計選項卡下,根據您的喜好自定義正文文本。 動態日期/時間格式將採用正文的樣式。

divi 日期和時間格式

更多有用的例子

版權年份

日期和時間格式對於為您的 Divi 網站的全球頁腳創建動態版權年份非常有用。 這是一種自定義格式,可用於在單個文本模塊中顯示帶有動態年份的版權信息。

將當前日期作為動態內容添加到文本模塊。 然後使用以下內容編輯動態內容:

  • 之前:©
  • 之後:公司 | 版權所有。
  • 自定義日期格式: Y

divi 日期和時間格式

動態號召性用語

您還可以向 Divi 網站上的號召性用語或標題添加動態日期或時間格式(內聯)。 為此,請將當前日期作為動態內容添加到文本模塊。 然後更新以下內容:

  • 前:
    <h1>It's
  • 後:
    ... <br>Time to Design!</h1>
  • 自定義日期格式: l ... \a\f\t\e\rga

divi 日期和時間格式

請注意,h1 標頭是在輸入前後使用 html 標籤添加到元素中的。 單詞“Tuesday”在自定義日期格式框中顯示為“l”,後跟單詞“after”使用“\”轉義格式字符串。 然後“g”和“a”用於顯示“6 pm”

然後,您可以在設計選項卡下自定義 h1 標題樣式。

最後的想法

希望這篇文章已經(並將繼續成為)關於如何在 Divi 中格式化日期和時間的有用指南。 如果您和我一樣,您已經對一些令人驚訝的格式選項大開眼界了,這些選項無需插件和自定義代碼即可實現!

我期待在評論中收到您的來信。

乾杯!