คู่มือการจัดรูปแบบวันที่และเวลาใน Divi

การแสดงวันที่และเวลาบนเว็บไซต์ของคุณเป็นหนึ่งในสิ่งที่คนส่วนใหญ่คิดไม่ถึง เรามักจะยึดติดกับการจัดรูปแบบเริ่มต้นสำหรับวันที่เผยแพร่บนข้อมูลเมตาของโพสต์ และถ้าเรามีเวลา เราจะเพิ่มปีปัจจุบันลงในแถบส่วนท้ายที่อยู่ถัดจากข้อความลิขสิทธิ์แบบไดนามิก

อย่างไรก็ตาม การทำความเข้าใจวิธีจัดรูปแบบวันที่และเวลานั้นมีประโยชน์ มันให้อิสระแก่คุณในการทำให้วันที่อ่านง่ายขึ้นสำหรับผู้ใช้ ตัวอย่างเช่น “ในวันจันทร์ที่ 23 พฤษภาคม 2020” ค่อนข้างอบอุ่น (และเป็นมนุษย์มากกว่า) เล็กน้อยกว่าการแสดงวันที่ขั้นต่ำเช่น “5.23.20” แม้ว่าหลังจะมีที่ของมัน เช่นเดียวกับการจัดรูปแบบเวลาปัจจุบันบนเว็บไซต์ ไซต์บางแห่งอาจได้รับประโยชน์จากการแสดงผล 12 ชั่วโมง เช่น "20:30 น." ในขณะที่ไซต์อื่นๆ (เช่น ไซต์ทางการทหารหรือทางการแพทย์) จะแสดง 24 ชั่วโมง เช่น "20:30 น."

Divi และ WordPress ช่วยให้คุณควบคุมการจัดรูปแบบวันที่และเวลาที่มีอยู่ใน PHP ได้อย่างน่าประหลาดใจ ในบทช่วยสอนนี้ เราจะช่วยให้คุณเข้าใจวิธีแสดง จัดรูปแบบ และจัดรูปแบบวันที่และเวลาใน Divi คุณจะสามารถกำหนดรูปแบบที่กำหนดเองให้กับโพสต์บนบล็อกสำหรับวันที่เผยแพร่ หรือแม้แต่เพิ่มองค์ประกอบแบบไดนามิกให้กับคำกระตุ้นการตัดสินใจเพื่อความเป็นส่วนตัวมากขึ้น (เช่น “สุขสันต์ใน วันจันทร์ ! ลองดูข้อตกลงใหม่ของเรา”)

มาเริ่มกันเลย!

ดาวน์โหลดคู่มือการจัดรูปแบบวันที่และเวลา Divi Layout ฟรี

เพื่อช่วยในการเพิ่มรูปแบบวันที่และเวลาใน Divi ให้ดาวน์โหลดเค้าโครงคำแนะนำการจัดรูปแบบวันที่และเวลาที่เป็นประโยชน์นี้ ประกอบด้วยตัวอย่างรูปแบบวันที่/เวลาแต่ละรูปแบบที่ใช้เป็นเนื้อหาแบบไดนามิกในโมดูลข้อความ Divi เพื่อให้คุณสามารถดูได้โดยตรงว่าแต่ละรูปแบบทำงานอย่างไรบนหน้าสด

หากต้องการดูคู่มือการจัดรูปแบบวันที่และเวลา ก่อนอื่นคุณต้องดาวน์โหลดโดยใช้ปุ่มด้านล่าง ในการเข้าถึงการดาวน์โหลด คุณจะต้องสมัครรับรายชื่ออีเมล Divi Daily ของเราโดยใช้แบบฟอร์มด้านล่าง ในฐานะสมาชิกใหม่ คุณจะได้รับ Divi goodness และ Divi Layout pack ฟรีทุกวันจันทร์! หากคุณอยู่ในรายชื่อแล้ว เพียงป้อนที่อยู่อีเมลของคุณด้านล่างแล้วคลิกดาวน์โหลด คุณจะไม่ถูก "สมัครใหม่" หรือรับอีเมลเพิ่มเติม

ดาวน์โหลดไฟล์

ดาวน์โหลดฟรี

เข้าร่วมจดหมายข่าว Divi แล้วเราจะส่งอีเมลสำเนาชุดเค้าโครงหน้า Landing Page ของ Divi ที่ดีที่สุดให้คุณ พร้อมแหล่งข้อมูล เคล็ดลับ และลูกเล่นที่น่าตื่นตาตื่นใจและฟรีอีกมากมายของ Divi ทำตามแล้วคุณจะเป็นผู้เชี่ยวชาญ Divi ในเวลาไม่นาน หากคุณสมัครรับข้อมูลแล้ว เพียงพิมพ์ที่อยู่อีเมลของคุณด้านล่างแล้วคลิกดาวน์โหลดเพื่อเข้าถึงชุดเค้าโครง

ดาวน์โหลด

คุณสมัครสำเร็จแล้ว โปรดตรวจสอบที่อยู่อีเมลของคุณเพื่อยืนยันการสมัครของคุณและเข้าถึงชุดเค้าโครง Divi รายสัปดาห์ฟรี!

ในการนำเข้าเค้าโครงส่วนไปยังไลบรารี Divi ของคุณ ให้ไปที่ Divi Library

คลิกปุ่มนำเข้า

ในป๊อปอัปการพกพา ให้เลือกแท็บนำเข้าและเลือกไฟล์ดาวน์โหลดจากคอมพิวเตอร์ของคุณ

จากนั้นคลิกปุ่มนำเข้า

เมื่อเสร็จแล้ว เค้าโครงส่วนจะพร้อมใช้งานใน Divi Builder

ไปกวดวิชากันเถอะ

รูปแบบอักขระที่ใช้ได้สำหรับแสดงวันที่และเวลา

ดังที่ได้กล่าวไว้ก่อนหน้านี้ Divi ใช้ประโยชน์จากการจัดรูปแบบวันที่และเวลาในตัวของ WordPress แต่ก่อนที่เราจะพูดถึงวิธีจัดรูปแบบวันที่และเวลาใน Divi จะช่วยให้เข้าใจการจัดรูปแบบอักขระที่เราสามารถใช้ได้

ด้านล่างนี้คือรายการของรูปแบบอักขระที่สามารถใช้ได้ ซึ่งสามารถใช้ร่วมกัน (หรือรวมกัน) เพื่อสร้างรูปแบบวันที่และเวลาที่กำหนดเองได้ สิ่งนี้จะมีประโยชน์เมื่อทำการทดลองกับรูปแบบเฉพาะสำหรับวันที่และเวลาบนไซต์ Divi ของคุณ

การจัดรูปแบบวันที่

ตัวอักษรรูปแบบ DAY

• d = วันของเดือน 2 หลักที่มีศูนย์นำหน้า (“02”, “22”)
• D = วันของเดือนในตัวอักษรสามตัว (“มิถุนายน”, “ก.ค.”)
• ล. (ตัวพิมพ์เล็ก “L”) = วันในสัปดาห์ เต็มคำ (“วันจันทร์”, “วันอังคาร”)
• N = วันตัวเลข ISO-8601 ของสัปดาห์ ("1" สำหรับวันจันทร์และ "7" สำหรับวันอาทิตย์)
• S = คำต่อท้ายสำหรับวันของเดือน ใช้กับ j (“nd”, “st”, “rd”)
• w = วันที่เป็นตัวเลขในสัปดาห์ ("0" สำหรับวันอาทิตย์และ "6" สำหรับวันเสาร์)
• z = วันของปี เริ่มจาก 0 (เช่น “173” หรือ “นี่คือวันที่ 173 ของปี”)

ตัวอักษรรูปแบบสัปดาห์

• W = 26 (จำนวนสัปดาห์ของปี สัปดาห์ที่เริ่มในวันจันทร์ เช่น “นี่คือสัปดาห์ที่ 26 ของปี”)

อักขระรูปแบบ MONTH

• F = การแสดงข้อความแบบเต็มของเดือน ("มกราคม" หรือ "มีนาคม")
• m = เดือนที่เป็นตัวเลข โดยมีศูนย์นำหน้า (มิถุนายนจะแสดงเป็น “06”)
• M = เดือนในตัวอักษรสามตัว (มีนาคมแสดงเป็น “มี.ค.”)
• n = เดือนที่เป็นตัวเลขโดยไม่มีศูนย์นำหน้า (มิถุนายนจะแสดงเป็น “6”)
• t = จำนวนวันในเดือนที่กำหนด (ถ้าเดือนมิถุนายน จะแสดง “30”)

อักขระรูปแบบปี

• Y = 2020 (ปีตัวเลข 4 หลัก คือ “2020”)
• y = 20 (ปีตัวเลข 2 หลัก คือ “20”)

ตัวอย่างรูปแบบวันที่ สตริง

• M j, Y = 22 มิ.ย. 2020
• F d, Y = 22 มิถุนายน 2020
• m/d/Y = 06/22/2020
• mdY = 06.22.2020
• j M, Y = 22 มิ.ย. 2563
• l, M d = วันจันทร์ที่ 22 มิ.ย.
• l, F jS, Y = วันจันทร์ที่ 22 มิถุนายน 2020
• ม · d · y = 06 · 22 · 20

การจัดรูปแบบเวลา

อักขระรูปแบบ TIME

• 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 = 16:10 น.
• g:i:sa = 16:10:52 น.

สตริงรูปแบบวันที่ + เวลา

• Y/m/dg:i:s A = 2020/06/22 16:10:52 น.
• M j, Y @ G:i = 22 มิ.ย. 2020 @ 16:10

การหลีกเลี่ยงสตริงรูปแบบด้วย “\" เพื่อรวมข้อความ/อักขระเพิ่มเติม

นี่เป็นเคล็ดลับที่มีประโยชน์อย่างยิ่งในการปรับแต่งการแสดงวันที่และเวลา เพียงเพิ่ม "\" ก่อนอักขระ/ตัวอักษรแต่ละตัวที่คุณต้องการรวมในสตริงรูปแบบ แล้วอักขระนั้นจะแสดงตามปกติ (นอกสตริง) ดังนั้น “/T/h/e” จะแสดงคำว่า “The” ในสตริงรูปแบบแทนที่จะเป็นองค์ประกอบวันที่/เวลาจริง เช่น เขตเวลา (“T”) หรือชั่วโมง (“h”)

• D \a\t ga = จันทร์ เวลา 16.00 น
• \T\h\e dS \d\a\y \o\f F = วันที่ 22 มิถุนายน

การจัดรูปแบบวันที่และเวลาด้วย Divi

การเปลี่ยนรูปแบบวันที่เริ่มต้นทั่วทั้งไซต์

หากคุณต้องการเปลี่ยนรูปแบบวันที่และเวลาเริ่มต้นทั่วทั้งไซต์ WordPress มีตัวเลือกในตัวสำหรับสิ่งนี้ จากแดชบอร์ด WordPress ให้ไปที่การตั้งค่า > ทั่วไป คุณจะเห็นตัวเลือกในการเปลี่ยนเขตเวลาเริ่มต้น รูปแบบวันที่ และรูปแบบเวลาเริ่มต้น

Divi ใช้รูปแบบเริ่มต้นเดียวกันนี้จริง ๆ เมื่อคุณเพิ่มวันที่หรือเวลาโดยใช้เนื้อหาแบบไดนามิกด้วย Divi Builder (เช่นวันที่โพสต์และวันที่ปัจจุบัน)

หากคุณใช้เค้าโครงโพสต์บนบล็อกเริ่มต้นของ Divi (ไม่ใช่เค้าโครงแบบกำหนดเองที่สร้างด้วย Divi Builder) คุณสามารถป้อนสตริงรูปแบบวันที่ที่กำหนดเองเพื่อใช้สำหรับโพสต์บล็อกทั้งหมดทั่วทั้งไซต์ คุณสามารถค้นหาตัวเลือกรูปแบบวันที่ได้โดยไปที่ Divi > ตัวเลือกธีม และเลื่อนหน้าลงใต้แท็บทั่วไป

ที่น่าสนใจคือ คุณยังสามารถป้อนอักขระรูปแบบเวลาเพื่อแสดงเวลาที่โพสต์ถูกเผยแพร่

การใช้เนื้อหาไดนามิกของ Divi เพื่อจัดรูปแบบและแสดงวันที่และเวลา

เมื่อใช้ Divi Builder คุณมีตัวเลือกในการเพิ่มวันที่ปัจจุบันหรือวันที่เผยแพร่โพสต์เป็นเนื้อหาแบบไดนามิกในโมดูลใดๆ นี่เป็นวิธีที่ยอดเยี่ยมในการแทนที่รูปแบบวันที่และเวลาเริ่มต้นโดยพิจารณาเป็นกรณีๆ ไป รวมทั้งเพิ่มการกำหนดสไตล์แบบกำหนดเองให้กับข้อความวันที่/เวลา

หากต้องการเพิ่มวันที่เผยแพร่โพสต์หรือวันที่ปัจจุบันเป็นเนื้อหาแบบไดนามิกในเพจของคุณใน Divi เพียงเพิ่มโมดูลข้อความลงในเพจ

จากนั้นเลือกไอคอนเนื้อหาแบบไดนามิกขณะวางเมาส์เหนือกล่องเนื้อหา

เมื่อเพิ่มวันที่แบบไดนามิกลงในเนื้อหาของโมดูลแล้ว คุณสามารถคลิกเพื่อแก้ไขวันที่แบบไดนามิกเพื่อปรับแต่งเพิ่มเติมได้ การตั้งค่าเพิ่มเติมเหล่านี้รวมถึงตัวเลือกในการเพิ่มเนื้อหาก่อนและหลังในการแสดงวันที่ ตลอดจนตัวเลือกในการปรับแต่งรูปแบบของวันที่

รูปแบบวันที่ในตัวของ Divi

ภายใต้ดรอปดาวน์รูปแบบวันที่ คุณจะพบรูปแบบวันที่ที่สร้างไว้ล่วงหน้าซึ่งคุณสามารถเลือกได้

• M j, Y = 22 มิ.ย. 2020
• F d, Y = 22 มิถุนายน 2020
• m/d/Y = 06/22/2020
• mdY = 06.22.2020
• j M, Y = 22 มิ.ย. 2563
• l, M d = วันจันทร์ที่ 22 มิ.ย.

การเพิ่มรูปแบบวันที่/เวลาที่กำหนดเอง

หากต้องการสร้างรูปแบบวันที่/เวลาที่กำหนดเอง ให้เลือกตัวเลือกที่กำหนดเองจากเมนูดรอปดาวน์ เมื่อคุณเลือกตัวเลือกที่กำหนดเองแล้ว คุณจะมีกล่องป้อนข้อมูลซึ่งคุณสามารถใช้เวทย์มนตร์ได้โดยการเพิ่มอักขระรูปแบบที่มีอยู่เพื่อสร้างสตริงรูปแบบที่สมบูรณ์แบบสำหรับวันที่ เวลา หรือทั้งสองอย่าง

กระบวนการเดียวกันนี้สามารถใช้เพื่อเพิ่มเวลาปัจจุบันหรือโพสต์เวลาเผยแพร่ เพียงเพิ่มอักขระการจัดรูปแบบเวลาในกล่องรูปแบบวันที่ที่กำหนดเอง

หลังจากที่คุณมีเนื้อหาแล้ว คุณสามารถใช้การตั้งค่าการออกแบบในตัวของ Divi ได้ ภายใต้แท็บการออกแบบของโมดูลข้อความ เพื่อปรับแต่งข้อความเนื้อหาตามที่คุณต้องการ รูปแบบวันที่/เวลาแบบไดนามิกจะใช้รูปแบบของข้อความเนื้อหา

ตัวอย่างที่เป็นประโยชน์เพิ่มเติม

ลิขสิทธิ์ปี

การจัดรูปแบบวันที่และเวลามีประโยชน์สำหรับการสร้างปีลิขสิทธิ์แบบไดนามิกสำหรับส่วนท้ายทั่วโลกของไซต์ Divi ของคุณ นี่คือรูปแบบที่กำหนดเองซึ่งคุณสามารถใช้เพื่อแสดงข้อมูลลิขสิทธิ์พร้อมปีแบบไดนามิกในโมดูลข้อความเดียว

เพิ่มวันที่ปัจจุบันเป็นเนื้อหาแบบไดนามิกในโมดูลข้อความ จากนั้นแก้ไขเนื้อหาแบบไดนามิกดังต่อไปนี้:

• ก่อนหน้านี้: ©
• หลัง: บริษัท | สงวนลิขสิทธิ์.
• รูปแบบวันที่ที่กำหนดเอง: Y

คำกระตุ้นการตัดสินใจแบบไดนามิก

คุณยังสามารถเพิ่มรูปแบบวันที่หรือเวลาแบบไดนามิก (อินไลน์) ให้กับคำกระตุ้นการตัดสินใจหรือไปที่เว็บไซต์ Divi ของคุณ เมื่อต้องการทำเช่นนี้ ให้เพิ่มวันที่ปัจจุบันเป็นเนื้อหาแบบไดนามิกในโมดูลข้อความ จากนั้นอัปเดตสิ่งต่อไปนี้:

• ก่อน:

  <h1>It's

• หลังจาก:

  ... <br>Time to Design!</h1>

• รูปแบบวันที่ที่กำหนดเอง: l … \a\f\t\e\rga

โปรดสังเกตว่าส่วนหัว h1 ถูกเพิ่มไปยังองค์ประกอบโดยใช้แท็ก html ในอินพุตก่อนและหลัง คำว่า "วันอังคาร" จะแสดงโดย "l" ในกล่องรูปแบบวันที่ที่กำหนดเอง ตามด้วยคำว่า "หลัง" โดยใช้ "\" เพื่อยกเว้นสตริงรูปแบบ จากนั้นใช้ "g" และ "a" เพื่อแสดง "6 pm"

จากนั้นคุณสามารถปรับแต่งสไตล์ส่วนหัว h1 ได้ภายใต้แท็บการออกแบบ

ความคิดสุดท้าย

หวังว่าโพสต์นี้มี (และยังคงเป็น) คู่มือที่เป็นประโยชน์สำหรับการจัดรูปแบบวันที่และเวลาใน Divi หากคุณเป็นเหมือนฉัน สายตาของคุณก็เปิดรับตัวเลือกการจัดรูปแบบที่น่าประหลาดใจ ซึ่งคุณสามารถทำได้โดยไม่ต้องใช้ปลั๊กอินและด้วยโค้ดที่กำหนดเอง!

ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็น

ไชโย!