5 วิธีในการเพิ่มวิดเจ็ตวันที่และเวลาในเว็บไซต์ WordPress ของคุณ

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

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

• คุณสามารถแสดงเวลาปัจจุบันในเขตเวลาของคุณเพื่อแจ้งให้ลูกค้าทราบว่าจะสามารถเข้าถึงฝ่ายสนับสนุนลูกค้าได้เมื่อใด
• ทำให้ไซต์ของคุณดูมีชีวิตชีวาและมีความเกี่ยวข้อง แม้ว่าเนื้อหาของคุณจะเก่ากว่าเล็กน้อย นี่เป็นสิ่งสำคัญเนื่องจากพวกเราส่วนใหญ่มองหาข้อมูลล่าสุด
• หากมีกิจกรรมที่จะเกิดขึ้นบนหน้าของคุณ เวลาและวันที่ปัจจุบันจะช่วยให้ผู้เยี่ยมชมเข้าใจว่าพวกเขาต้องรอนานเพียงใด (หรือใช้โมดูลจับเวลาถอยหลัง เช่น โมดูลที่รวมอยู่ในธีม 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] หากคุณป้อนรหัสย่อในไซต์ของคุณ ฟังก์ชันจะเรียกใช้ฟังก์ชันดังกล่าว

ในรูปแบบที่เราใช้ข้างต้น เวลาและวันที่จะถูกส่งออกในรูปแบบนี้: 6 กรกฎาคม 2017, 12:35:41 อย่างไรก็ตาม คุณสามารถใช้รูปแบบต่างๆ ที่คุณสามารถเรียนรู้ได้ที่นี่

ในตอนนี้ หากต้องการทดสอบโค้ด ให้คัดลอกโค้ดสั้นไว้ที่ใดที่หนึ่งบนไซต์ของคุณ อย่างไรก็ตาม โปรดทราบว่าโดยค่าเริ่มต้น รหัสย่อไม่ทำงานภายในวิดเจ็ต ในการใช้งาน คุณจะต้องติดตั้งปลั๊กอิน Shortcode Widget หรือเพิ่มบรรทัดนี้ใน functions.php

add_filter('widget_text','do_shortcode');

หลังจากนั้น นี่คือผลลัพธ์:

เปลี่ยนไปใช้ JavaScript

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

นั่นเป็นเพราะ PHP เป็นภาษาฝั่งเซิร์ฟเวอร์ หมายความว่าคุณต้องทำการเรียกเพิ่มเติมไปยังเซิร์ฟเวอร์เพื่ออัปเดตข้อมูล ด้วยเหตุผลดังกล่าว เราจึงควรทำงานกับภาษาฝั่งไคลเอ็นต์อย่าง JavaScript จะดีกว่า

โชคดีที่มีนาฬิกา JavaScript โหลดอยู่บนเน็ต การค้นหาโดย Google สั้นๆ จะแสดงตัวอย่างมากมาย ฉันใช้บริการนี้เพื่อสร้างโค้ด JavaScript สำหรับรูปแบบที่ต้องการ หลังจากนั้น ฉันป้อนรหัสลงในไฟล์ชื่อ clock.js ซึ่งฉันคัดลอกไปยังโฟลเดอร์ธีมของฉัน

สคริปต์เรียก div ของ clockbox ชื่อ ด้วยเหตุผลดังกล่าว ฉันจึงเปลี่ยนฟังก์ชันก่อนหน้าของฉันเป็นดังนี้:

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'));

และ voila:

เพิ่มสไตล์

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

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

นี่คือผลลัพธ์:

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

อย่างไรก็ตาม หากคุณไม่ใช่คนที่ใช้เส้นทางแบบแมนนวล คุณสามารถบรรลุผลลัพธ์ที่คล้ายคลึงกันได้โดยใช้ปลั๊กอิน WordPress

ปลั๊กอินสำหรับสร้างวิดเจ็ตเวลาและวันที่สำหรับเว็บไซต์ของคุณ

แม้ว่าจำนวนปลั๊กอินที่มีอยู่ในไดเร็กทอรี WordPress จะไม่ล้นหลาม แต่ก็มีตัวอย่างบางส่วนที่ทำงานได้ดีพอ

วันที่นาฬิกาสด

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

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

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

วิดเจ็ตวันที่และเวลา

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

หลังการติดตั้ง ปลั๊กอินจะเพิ่มวิดเจ็ต วันที่และเวลา ใหม่ลงในเมนูวิดเจ็ต เมื่อคุณเพิ่มไปยังพื้นที่ที่มีวิดเจ็ต จะช่วยให้คุณปรับแต่งได้หลายวิธี

อย่างที่คุณเห็น คุณสามารถกำหนดค่ารูปแบบเวลาและวันที่ (หรือปิดใช้งานทั้งหมด) เปลี่ยนตระกูลแบบอักษรและขนาดตลอดจนสีข้อความและสีพื้นหลัง (รวมถึงรหัสฐานสิบหก) ด้วยวิธีนี้ มันง่ายที่จะทำให้วิดเจ็ตเข้ากับธีมของคุณ หากยังไม่เพียงพอ วิดเจ็ตมีคลาส HTML เพียงพอ คุณจึงนำกฎ CSS ที่กำหนดเองไปใช้ได้อย่างง่ายดาย

วันที่และเวลาปัจจุบัน

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

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

บทสรุป

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

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

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

ภาพขนาดย่อของบทความโดย Jane Kelly / shutterstock.com