วิธีสร้างแถบความคืบหน้าในการอ่านสำหรับโพสต์บล็อก Divi ของคุณ (ไม่มีปลั๊กอิน)

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

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

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

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

แอบมอง

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

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

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

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

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

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

ดาวน์โหลด

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

ในการนำเข้าเค้าโครงส่วนไปยังตัวสร้างธีม Divi ให้ไปที่ตัวสร้างธีม Divi

คลิกไอคอนการพกพา

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

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

เมื่อเสร็จแล้ว เทมเพลตส่วนจะปรากฏในตัวสร้างธีม Divi

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

ส่วนที่ 1: การนำเข้าเทมเพลตที่สร้างไว้ล่วงหน้า

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

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

นำเข้าเทมเพลตเว็บไซต์เริ่มต้น

ก่อนอื่น คุณจะต้องดาวน์โหลด Theme Builder Pack ฟรีชุดที่สี่สำหรับ Divi จากนั้นแตกไฟล์

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

นำเข้าเทมเพลตโพสต์

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

ปิดใช้งาน Global บนส่วนหัวของเทมเพลตโพสต์

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

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

การออกแบบแถบความคืบหน้าในการอ่าน

การเพิ่มส่วนและแถว

ภายในตัวแก้ไขเค้าโครงส่วนหัว ให้สร้างส่วนปกติใหม่ภายใต้ส่วนปัจจุบันที่มีส่วนหัว

จากนั้นเพิ่มหนึ่งคอลัมน์ในส่วน

การตั้งค่ามาตรา

เปิดการตั้งค่าส่วนและอัปเดตสิ่งต่อไปนี้:

• ช่องว่างภายใน: 0px บน, 0px ด้านล่าง

การตั้งค่าแถว

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

• สีพื้นหลัง: #2b2b2b

ภายใต้แท็บการออกแบบ ให้อัปเดตสิ่งต่อไปนี้:

• ความกว้างของรางน้ำ: 1
• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%
• ช่องว่างภายใน: 0px บน, 0px ด้านล่าง

การสร้างแถบเลื่อนด้วยโมดูลตัวแบ่ง

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

เพิ่มโมดูลตัวแบ่ง

สร้างโมดูลตัวแบ่งใหม่ภายในคอลัมน์

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

• แสดงตัวแบ่ง: NO
• ไล่ระดับพื้นหลังซ้ายสี: #ff4349
• ไล่สีพื้นหลังด้านขวา: #fe7f47
• ทิศทางการไล่ระดับสี: 90deg

ใต้แท็บออกแบบ ให้อัปเดตความสูงของแถบความคืบหน้า:

• ส่วนสูง: 20px

ใต้แท็บขั้นสูง ให้กำหนด CSS ID ที่กำหนดเองให้กับตัวแบ่งดังนี้:

• CSS ID: scrollBar

เราต้องการสิ่งนี้เพื่อกำหนดเป้าหมายแถบเลื่อนสำหรับฟังก์ชันการทำงานด้วย jQuery ในภายหลัง

เพิ่มป้ายบอกเปอร์เซ็นต์แถบความคืบหน้า

ในการเพิ่มป้ายชื่อตัวนับเปอร์เซ็นต์ของแถบความคืบหน้า ให้เพิ่มโมดูลข้อความด้านล่างโมดูลตัวแบ่ง

จากนั้นเพิ่ม HTML ต่อไปนี้ในเนื้อหาเนื้อหา:

<p>Reading Progress: <span></span></p>

ส span แท็กมีความสำคัญที่นี่เพราะเราจะใช้ jQuery เพื่อเติมแท็กส span ด้วยตัวนับเปอร์เซ็นต์

ภายใต้แท็บการออกแบบ ให้อัปเดตสิ่งต่อไปนี้:

• แบบอักษรของข้อความ: Heebo
• น้ำหนักแบบอักษรของข้อความ: ตัวหนา
• รูปแบบตัวอักษรของข้อความ: TT
• สีข้อความ: #ffffff
• ขนาดข้อความ: 13px
• ระยะห่างของตัวอักษรข้อความ: 3px
• ความสูงของบรรทัดข้อความ: 1em

จากนั้นอัปเดตช่องว่างภายในด้านซ้ายเล็กน้อย:

• ช่องว่างภายใน: เหลือ 10px

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

• ตำแหน่ง: Absolute
• ที่ตั้ง: Left Center

ก่อนที่คุณจะออกจากโมดูลข้อความ ให้เพิ่มคลาส CSS เพื่อให้เราสามารถกำหนดเป้าหมายด้วยโค้ด jQuery ของเรา

• CSS Class: et-progress-label

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

เพื่อให้แถบความคืบหน้ามีฟังก์ชันมหัศจรรย์ที่ต้องการ เราจำเป็นต้องเพิ่มโค้ด jQuery ที่จำเป็น

เมื่อต้องการทำเช่นนี้ เพิ่มโมดูลโค้ดใหม่ภายใต้โมดูลข้อความ

จากนั้นวางรหัสต่อไปนี้:

<script>
(function($) {
    $(document).ready(function(){
        var winHeight = $(window).height();
        var $scrollBar = $('#scrollBar');
        var $progressLabel = $('.et-progress-label p span');   
        var $postContent = $('.et-post-content');
        $scrollBar.css('width', 0);
        $progressLabel.html('0%');
        $(window).scroll(function(){
            var postContentHeight = $postContent.height();          
            var postContentStartPosition = $postContent.offset().top;
            var winScrollTop = $(window).scrollTop();
            var postScrollTop = postContentStartPosition - winScrollTop;
            var postScrollableArea = postContentHeight - winHeight;
            var postScrollPercentage = Math.abs((postScrollTop/postScrollableArea)*100);
            if (postScrollTop > 0) {
                $scrollBar.css('width', 0);
                $progressLabel.html('0%');
            } else if (postScrollTop < 0 && postScrollTop > -postScrollableArea) {
                $scrollBar.css('width', (postScrollPercentage + '%'));
                $progressLabel.html( Math.round(postScrollPercentage) + '%');
            } else if (postScrollTop < -postScrollableArea) {
                $scrollBar.css('width', '100' + '%');
                $progressLabel.html('100%');
            }
        });
    });
})( jQuery );
</script>    

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

เปิดการตั้งค่าส่วนสำหรับส่วนที่มีแถบความคืบหน้าและอัปเดตสิ่งต่อไปนี้:

• ตำแหน่ง: คงที่
• ดัชนี Z: 998

จากนั้นเปิดการตั้งค่าของส่วนบนที่มีเนื้อหาส่วนหัวและอัปเดตดัชนี Z ดังนี้:

• ดัชนี Z: 999

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

อย่าลืมบันทึกการเปลี่ยนแปลง

การเพิ่มตัวเลือก (คลาส CSS) ให้กับโมดูลเนื้อหาโพสต์ในเทมเพลตบริเวณเนื้อหา

ตอนนี้โค้ดถูกเขียนขึ้นเพื่อจดจำองค์ประกอบที่มีคลาส "et-post-content" เป็นเนื้อหาหลักของโพสต์

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

ในการดำเนินการนี้ ให้เปิดเทมเพลตพื้นที่เนื้อหาของเทมเพลตโพสต์ในตัวสร้างธีม

เปิดการตั้งค่าโมดูลเนื้อหาโพสต์และเพิ่มคลาส CSS ต่อไปนี้:

• CSS Class: et-post-content

จากนั้นบันทึกการเปลี่ยนแปลง

เมื่อเสร็จแล้วให้บันทึกการเปลี่ยนแปลงไปยังเลย์เอาต์และตัวสร้างธีม

ผลสุดท้าย

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

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

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

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

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

 var $postContent = $('.et-post-content');

ด้วยสิ่งนี้…

 var $postContent = $('.entry-content');

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

ผลลัพธ์

นี่คือผลลัพธ์ของโพสต์ที่ใช้เทมเพลตโพสต์เริ่มต้น

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

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

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

ไชโย!