วิธีแสดงเวลาอ่านโดยประมาณของโพสต์และจำนวนคำใน Divi (ด้วย ReadingTime.js)

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

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

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

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

แอบมอง

ต่อไปนี้คือภาพรวมคร่าวๆ ของเวลาในการอ่านและจำนวนคำที่เราจะเพิ่มลงในเทมเพลตโพสต์ใน Divi

ดาวน์โหลดเค้าโครงฟรี

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

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

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

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

ดาวน์โหลด

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

วิธีอัปโหลดเทมเพลต

ไปที่ตัวสร้างธีม Divi

ในการอัปโหลดเทมเพลต ให้ไปที่ Divi Theme Builder ที่ส่วนหลังของเว็บไซต์ WordPress ของคุณ

อัพโหลดเทมเพลตเว็บไซต์

จากนั้น ที่มุมบนขวา คุณจะเห็นไอคอนที่มีลูกศรสองอัน คลิกที่ไอคอน

ไปที่แท็บนำเข้า อัปโหลดไฟล์ JSON ซึ่งคุณสามารถดาวน์โหลดได้ในโพสต์นี้ แล้วคลิก 'นำเข้าเทมเพลต Divi Theme Builder'

บันทึกการเปลี่ยนแปลงตัวสร้างธีม Divi

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

ไปที่บทช่วยสอนเพื่อให้เราสามารถเรียนรู้ที่จะสร้างสิ่งนี้ตั้งแต่เริ่มต้นใช่ไหม

วิธีแสดงโพสต์เวลาอ่านโดยประมาณและจำนวนคำใน Divi

สิ่งที่คุณต้องการเพื่อเริ่มต้น

ในการเริ่มต้น คุณจะต้องทำสิ่งต่อไปนี้:

1. ไปที่ตัวสร้างธีม Divi
2. คลิกไอคอนการพกพาที่ด้านบนขวาของหน้า
3. เลือกแท็บนำเข้าในป๊อปอัปการพกพา
4. เลือก/นำเข้าไฟล์เทมเพลตการโพสต์ที่ปรึกษาธุรกิจ Divi (ดาวน์โหลดที่นี่)
5. คลิกปุ่มนำเข้า

หลังจากนั้น คุณจะมีเทมเพลตโพสต์พร้อมที่จะแก้ไข

การเพิ่มข้อความ/HTML ลงในเทมเพลตโพสต์

หากต้องการแก้ไขเทมเพลตโพสต์ ให้คลิกไอคอนแก้ไขบนพื้นที่เนื้อหาที่กำหนดเอง

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

เมื่อเสร็จแล้ว เพิ่มโมดูลข้อความในแถวใหม่

ในการตั้งค่าโมดูลข้อความ ให้วาง HTML ต่อไปนี้ภายในเนื้อหา (โดยใช้แท็บข้อความ):

<p>Reading Time: <span style="color: #edbb5f;" class="eta"></span> ( Word Count: <span style="color: #edbb5f;" class="word-count"></span> )</p>

สิ่งสำคัญที่ต้องจำไว้คือแท็ก span ที่มีคลาส "eta" จะแสดงเวลาอ่านโดยประมาณของเนื้อหาโพสต์ในที่สุด และแท็ก span ที่มีคลาส "word-count" จะแสดงจำนวนคำในเนื้อหาโพสต์

การจัดรูปแบบข้อความเวลาอ่าน

ใต้แท็บออกแบบ ให้อัปเดตสไตล์ข้อความดังนี้:

• แบบอักษรของข้อความ: Poppins
• น้ำหนักแบบอักษรของข้อความ: ตัวหนา
• รูปแบบตัวอักษรของข้อความ: TT
• สีข้อความ: #ffffff
• ขนาดข้อความ: 14px (เดสก์ท็อป), 12px (โทรศัพท์)
• ระยะห่างของตัวอักษรข้อความ: 2px
• การจัดตำแหน่งข้อความ: center

จัดแต่งทรงผมแถว

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

• ความกว้างของรางน้ำ: 1
• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%

ในแท็บขั้นสูง ให้อัปเดตตำแหน่ง:

• ตำแหน่ง: Absolute
• ตำแหน่ง: ล่างซ้าย

การเพิ่มรหัส

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

เราจะใช้ไลบรารี readtime.js กับโค้ดที่กำหนดเองเพื่อกำหนดเป้าหมายพื้นที่เนื้อหาโพสต์ เวลาในการอ่านเป้าหมายคลาส eta และจำนวนคำเป้าหมายคลาส word-count

วางโค้ดต่อไปนี้ในบล็อคโค้ดเพื่อให้แน่ใจว่าได้ใส่โค้ดลงในแท็ก สคริปต์แล้ว :

(function($) {
$(document).ready(function(){
$('.et_pb_post_content').readingTime({
readingTimeTarget: $('.eta'),
wordCountTarget: $('.word-count'), 
wordsPerMinute: 275,
lang: 'en',
});
}); 
})( jQuery );

เกี่ยวกับรหัส

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

ReadingTimeTarget ถูกกำหนดให้กับคลาส eta ซึ่งสอดคล้องกับคลาสที่เราเพิ่มให้กับแท็ก span ในโมดูลข้อความ และ wordCountTarget ถูกกำหนดให้กับคลาสการ นับคำที่ เราเพิ่มไปยังแท็ก span อื่นในโมดูลข้อความ

นอกจากนี้ อย่าลังเลที่จะอัปเดตค่าคำต่อนาที (ปัจจุบันคือ 275) เพื่อแสดงสิ่งที่คุณคิดว่าควรเป็น แน่นอนว่าจะส่งผลต่อเวลาในการอ่านที่แสดง จากที่ฉันค้นคว้ามา ผู้ใหญ่โดยเฉลี่ยอ่านประมาณ 300 คำต่อนาที นอกจากนี้ คุณยังสามารถอัปเดตค่าภาษาได้เช่นกัน ตัวอย่างเช่น คุณสามารถแทนที่ 'en' สำหรับ 'fr' หากคุณต้องการให้ข้อความแสดงเป็นภาษาฝรั่งเศส) สำหรับข้อมูลเพิ่มเติม คุณสามารถตรวจสอบเอกสารใน github

บันทึกเค้าโครงเทมเพลตและตัวสร้างธีม

จากนั้นไปที่ Divi > Theme Options > Integrations

จากนั้นเพิ่มไลบรารีลงในพื้นที่ส่วนหัวด้วยแท็ก สคริปต์ :

src="https://cdnjs.cloudflare.com/ajax/libs/reading-time/2.0.0/readingTime.min.js"

ควรมีลักษณะเช่นนี้ ...

ผลสุดท้าย

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

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

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

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

ไชโย!