วิธีเพิ่มแถบความคืบหน้าใน WordPress

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

• แถบความคืบหน้าใน WP คืออะไร?
• จะเพิ่มแถบความคืบหน้าไปยังเว็บไซต์ WordPress โดยใช้โค้ดได้อย่างไร
• จะเพิ่มแถบความคืบหน้าให้กับเว็บไซต์ WordPress โดยใช้ปลั๊กอินได้อย่างไร

แถบความคืบหน้าใน WordPress คืออะไร?

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

จะเพิ่มแถบความคืบหน้าไปยังเว็บไซต์ WordPress โดยใช้โค้ดได้อย่างไร

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

ขั้นตอนที่ 1: เข้าสู่ระบบแดชบอร์ด

เปิดเบราว์เซอร์แล้วไปที่ “ http://localhost/<Website-Name>/wp-login.php ” ลิงค์ ระบุข้อมูลรับรองผู้ดูแลระบบและกด ' เข้าสู่ระบบ ' ปุ่ม:

ขั้นตอนที่ 2: สร้างโพสต์ใหม่

ไปที่ ' กระทู้ > เพิ่มใหม่ ” จากเมนูด้านข้างของแดชบอร์ดผู้ดูแลระบบ:

ขั้นตอนที่ 3: เพิ่มโค้ด HTML ที่กำหนดเอง

ในโพสต์ ให้ระบุชื่อและเนื้อหาเพิ่มเติม จากนั้นคลิกที่ “ + ” และค้นหา “ HTML ที่กำหนดเอง ' ปิดกั้น:

ในบล็อก HTML ที่เพิ่ม ให้วางโค้ดที่ให้ไว้ด้านล่าง เปลี่ยน ' ความกว้าง ' ข้างใน ' <ช่วง> ” สำหรับเปอร์เซ็นต์ที่ต้องการของแถบความคืบหน้า ในทำนองเดียวกันให้เปลี่ยน ' ข้อความความก้าวหน้า ” ดังนั้น:

หลังจากนั้นให้กดปุ่ม “ เผยแพร่ ปุ่ม ” เพื่ออัพโหลดโพสต์ไปยังเว็บไซต์:

ขั้นตอนที่ 4: เพิ่ม CSS ที่กำหนดเอง

เมื่อโพสต์ถูกเผยแพร่แล้วให้คลิกที่ “ ดูโพสต์ ' ปุ่ม:

ในหน้าตัวอย่าง คลิกที่ “ ปรับแต่ง ปุ่ม ' เพื่อเพิ่มสไตล์ให้กับแถบความคืบหน้า:

เมนูตัวแก้ไขจะปรากฏที่ด้านซ้ายของหน้าจอ ที่นี่เลื่อนลงและคลิกที่ “ CSS เพิ่มเติม ' ส่วน:

วางโค้ด CSS ต่อไปนี้ลงในช่องเพื่อจัดรูปแบบแถบความคืบหน้า:

ขั้นตอนที่ 5: เผยแพร่โพสต์

สุดท้ายให้คลิกที่ “ เผยแพร่ ” โพสต์เพื่อบันทึกการเปลี่ยนแปลงเหล่านี้:

เมื่อโหลดหน้าใหม่ ผู้ใช้จะเห็นว่าแถบความคืบหน้าสามารถเห็นได้ในโพสต์:

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

การสาธิตนี้จะใช้ปลั๊กอิน “Ultimate Blocks” เพื่อเพิ่มแถบความคืบหน้าให้กับเว็บไซต์ WordPress หากต้องการทำเช่นเดียวกัน ให้ทำตามขั้นตอนด้านล่าง

ขั้นตอนที่ 1: เพิ่มปลั๊กอินใหม่

เมื่อผู้ใช้เข้าสู่ระบบแดชบอร์ดแล้ว ให้ไปที่ “ ปลั๊กอิน > เพิ่มใหม่ ” จากแถบเมนูด้านข้าง:

ขั้นตอนที่ 2: ติดตั้งปลั๊กอิน Ultimate Blocks

ค้นหา Ultimate Blocks แล้วกดปุ่ม “ เข้า ' สำคัญ. จากนั้นให้คลิกที่ลูกศรชี้ด้านล่าง “ ติดตั้งในขณะนี้ ' ปุ่ม:

ขั้นตอนที่ 3: เปิดใช้งาน Ultimate Blocks

เมื่อติดตั้งปลั๊กอินแล้วให้คลิกที่ “ เปิดใช้งาน ปุ่ม” เพื่อใช้แถบความคืบหน้าใน WordPress:

ขั้นตอนที่ 4: สร้างโพสต์ใหม่

หากต้องการเพิ่มแถบความคืบหน้าให้กับโพสต์ WordPress ให้ไปที่ “ กระทู้ > เพิ่มใหม่ ” จากเมนูด้านข้าง:

ขั้นตอนที่ 5: เพิ่มบล็อกแถบความคืบหน้า

ระบุชื่อและเนื้อหาในโพสต์ จากนั้นกดปุ่ม “ + ไอคอน ” เพื่อเพิ่มบล็อกใหม่ ในเมนู ให้ค้นหา “ แถบความคืบหน้า ” และเลือกบล็อก:

ขั้นตอนที่ 6: กำหนดเปอร์เซ็นต์สำหรับแถบ

หากต้องการตั้งค่าเปอร์เซ็นต์สำหรับแถบความคืบหน้า ให้ใช้แถบเลื่อนสีน้ำเงินหรือป้อนเปอร์เซ็นต์ในช่องไฮไลต์ด้านล่าง:

ขั้นตอนที่ 7: เผยแพร่โพสต์

หลังจากโพสต์เสร็จแล้วให้คลิกที่ “ เผยแพร่ ปุ่ม ” เพื่ออัพโหลดโพสต์ไปยังเว็บไซต์:

ขั้นตอนที่ 8: ดูโพสต์

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

สามารถดูได้ในผลลัพธ์ด้านล่างว่ามีการเพิ่มแถบความคืบหน้าในโพสต์:

นั่นคือทั้งหมดที่เกี่ยวกับการเพิ่มแถบความคืบหน้าใน WordPress

บทสรุป

หากต้องการเพิ่มแถบความคืบหน้าให้กับเว็บไซต์ WordPress ให้ไปที่ “ ปลั๊กอิน > เพิ่มใหม่ ” จากเมนูด้านข้าง ค้นหาและติดตั้ง “ สุดยอดบล็อก ' เสียบเข้าไป. หลังการติดตั้ง ให้เปิดใช้งาน จากนั้นไปที่ “ กระทู้ > เพิ่มใหม่ ” และระบุชื่อและเนื้อหาของโพสต์ จากนั้นคลิกที่ “ + ” และค้นหา “ แถบความคืบหน้า ' ปิดกั้น. ตั้งค่าเปอร์เซ็นต์ความคืบหน้าโดยใช้แถบเลื่อนหรือโดยการป้อนตัวเลข บทความนี้ได้อธิบายขั้นตอนการเพิ่มแถบความคืบหน้าใน WordPress ทั้งแบบมีและไม่มีปลั๊กอิน