วิธีเพิ่มปุ่มโหลดโพสต์เพิ่มเติมใน WordPress

ในฐานะบล็อกเกอร์และผู้สร้างเนื้อหา คุณต้องการให้ผู้คนมีส่วนร่วมและอ่านโพสต์ของคุณ มีหลายวิธีในการทำเช่นนี้: ระบบการค้นหาหรือการแท็กที่ดี แถบด้านข้างที่มี ลิงก์โพสต์ล่าสุด แกลเลอรีของโพสต์ที่เก่ากว่าเมื่อผู้อ่านมาถึงด้านล่างสุดของหน้า และอื่นๆ

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

ทำไมต้องเลื่อนแบบไม่มีที่สิ้นสุด?

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

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

หากคุณพร้อมที่จะเพิ่มปุ่มโหลดเพิ่มเติมใน WordPress มีบางสิ่งที่คุณควรจำไว้

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

ไม่มีปลั๊กอิน

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

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

โหลดง่ายมากขึ้น

หากคุณต้องการปลั๊กอิน นี่เป็นตัวเลือกที่ยอดเยี่ยม Easy Load More ตามชื่อของมัน เป็นปลั๊กอินการโหลดแบบ Lazy Loading มันใช้ Ajax เพื่อโหลดโพสต์พิเศษในหน้าเดียวกันและต้องการการแก้ไขเพียงเล็กน้อยในไฟล์ธีมของคุณ ปลั๊กอินถูกสร้างขึ้นมาโดยเฉพาะเพื่อให้เหลือเครื่องหมายน้อยที่สุดเท่าที่จะเป็นไปได้ โดยมีปุ่มเริ่มต้นที่เรียบง่ายและปรับแต่งได้ ขนาด Javascript ขนาดเล็ก และไอคอนการโหลดที่แสดงด้วย SVG เพื่อไม่ให้ดาวน์โหลดไฟล์ภาพ

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

Ajax Load More

หากคุณกำลังมองหาสิ่งที่ล้ำหน้ากว่านั้น Ajax Load More มาพร้อมกับฟังก์ชันพิเศษมากมาย

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

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

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

โหลดผลิตภัณฑ์เพิ่มเติมสำหรับ WooCommerce

หากคุณใช้อีคอมเมิร์ซ ปุ่มโหลดเพิ่มเติมชนิดพิเศษนี้จะใช้การเข้ารหัส Ajax ที่คล้ายกันเพื่อโหลดผลิตภัณฑ์ที่ไม่สิ้นสุด เข้ากันได้กับปลั๊กอิน WooCommerce หลายตัว เวอร์ชันฟรีให้คุณเข้าถึงการเลื่อนที่ไม่มีที่สิ้นสุดด้วยปุ่มและคุณสมบัติการปรับแต่งพื้นฐานบางอย่าง ปลั๊กอินแบบชำระเงินมีตัวเลือกการโหลดแบบ Lazy Loading หลายแบบพร้อมภาพเคลื่อนไหว การปรับแต่งปุ่ม และการโหลดแบบต่างๆ สำหรับอุปกรณ์มือถือ

โหลดง่ายเพิ่มเติม

หากคุณต้องการสิ่งที่ง่ายและเปิดใช้งานได้ง่าย Simple Load More จะทำงานให้เสร็จ มันเปิดใช้งานโดยอัตโนมัติในหน้าแรกของคุณ ดังนั้นหากต้องการเท่านั้น คุณก็สามารถติดตั้ง ตั้งค่า และดำเนินการให้เสร็จสิ้นได้

หากคุณต้องการใช้ในหน้าอื่น เพียงตั้งค่าง่ายๆ และเพิ่มฟังก์ชัน “simple_more_button()” หรือรหัสย่อ “[load_more button_text=”ABC”]” ลงในไฟล์เทมเพลตของหน้าที่คุณต้องการให้ปุ่มนั้นเปิด

โหลดอะไรเพิ่มเติม

หากคุณต้องการลองใช้ jQuery load ปลั๊กอินเพิ่มเติม ลองดูอันนี้ Load More Anything ทำงานได้ทุกที่ ทุกหน้า สำหรับเนื้อหาใดๆ โพสต์ ความคิดเห็น สินค้า รูปภาพ — อะไรก็ได้และทุกที่

คุณจะต้องมีความรู้ด้านเทคนิคเล็กน้อยสำหรับสิ่งนี้ แม้ว่าคุณไม่จำเป็นต้องยุ่งกับไฟล์ธีม แต่คุณจะต้องค้นหาแท็ก "div" ที่เกี่ยวข้องกับตำแหน่งที่คุณต้องการให้ปุ่มแสดง และตำแหน่งที่จะดึงเนื้อหามาจากที่ใด วิธีที่ง่ายที่สุดคือการใช้ "ตรวจสอบองค์ประกอบ" ในตำแหน่งที่คุณต้องการให้ปุ่มนั้นเปิด และพยายามค้นหาแท็ก div, คลาส หรือแท็กด้านข้างที่ถูกต้อง หากคุณไม่ใช่นักพัฒนาเว็บหรือไม่ทราบวิธีไปยังส่วนต่างๆ ของ Inspect Element คุณอาจต้องการข้ามขั้นตอนนี้

ดึงดูดผู้อ่านด้วย Load More

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

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