ต้องการใช้การแบ่งหน้า WordPress บนเว็บไซต์ของคุณหรือไม่?

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

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

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

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

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

จากนั้นกลับไปที่สาเหตุที่เราอยู่ที่นี่

WordPress Pagination คืออะไร?

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

วิธีเพิ่มการแบ่งหน้าบน WordPress ด้วยตนเอง

ผู้ใช้ที่มีทักษะการเขียนโค้ดสามารถใช้การแบ่งหน้าใน WordPress ได้ด้วยตนเองโดยใช้โค้ดที่กำหนดเอง ในบทช่วยสอนนี้ เราใช้ธีม WordPress ยี่สิบสอง.

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

1. การปรับโค้ด PHP ในไฟล์ functions.php

WordPress รองรับคุณสมบัติการแบ่งหน้า (posts_nav_link()) ซึ่งคุณสามารถแทรกก่อนหรือหลังลูปหลักในไฟล์ index.php ของธีม WordPress ของคุณ

นี่คือตัวอย่างง่ายๆ ของลักษณะโค้ด:

<?php if ( have_posts() ) : ?>
<!-- Ajoutez les fonctions de pagination ici. →
posts_nav_link()
<!-- Début de la boucle principale. -->
<?php while ( have_posts() ) : the_post();  ?>
<!-- le reste de la boucle principale de  votre thème -->
<?php endwhile; ?>
<!-- Fin de la boucle principale -->
<!-- Ou ajoutez les fonctions de pagination ici. -->
<div class="nav-previous alignleft">
<?php previous_posts_link( 'Anciens Articles' ); ?>
</div>
<div class="nav-next alignright">
<?php next_posts_link( 'Articles Récents' ); ?>
</div>
<?php else: ?>
<p><?php _e('Désolé, aucun message ne correspond à vos critères.' ); ? ></p>
<?php endif; ?>

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

2. เพิ่มโค้ด CSS เพื่อเปลี่ยนการแบ่งหน้า

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

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

ใช้การแบ่งหน้าใน WordPress

3. การจัดการเนื้อหาโดยเพจ

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

  1. การเข้าถึง การตั้งค่า -> บรรยาย จากแดชบอร์ดของ WordPress
  2. แก้ไขมัน หน้าบล็อกที่แสดงมากที่สุด ความกล้าหาญ
ใช้การแบ่งหน้าใน WordPress
  1. คลิกที่ บันทึกการเปลี่ยนแปลง.

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

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

ปลั๊กอินการแบ่งหน้า WordPress ที่ดีที่สุด

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

ปลั๊กอินทั้งหมดเหล่านี้สามารถปรับแต่งได้ผ่านเมนูของคุณ การตั้งค่า ระหว่างการติดตั้งและเปิดใช้งาน

1. WP-PageNavi

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

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

หากต้องการเข้าถึงตัวเลือกการจัดสไตล์เพิ่มเติม ให้พิจารณารับส่วนเสริม สไตล์สำหรับ WP PageNavi.

2. WP-เลขหน้า

WP-Paginate เป็นปลั๊กอินโอเพ่นซอร์สที่มีการตั้งค่าง่ายๆ สำหรับการเพิ่มการแบ่งหน้าในเว็บไซต์ WordPress ของคุณ นอกจากนี้ยังมีแท็บ CSS ที่กำหนดเอง เพื่อเพิ่มโค้ดที่กำหนดเองสำหรับลิงก์การแบ่งหน้าของคุณ

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

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

3. การแบ่งหน้าตามตัวอักษร

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

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

นอกจากนี้ การแบ่งหน้าตามตัวอักษรยังเข้ากันได้กับ หน้าร้านค้าและหมวดสินค้าของ WooCommerce.

วิธีแก้ไขข้อผิดพลาดการแบ่งหน้า WordPress 404

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

ข้อผิดพลาดมักเกิดขึ้นเมื่อคุณคลิกไปยังหน้าถัดไป โครงสร้างลิงก์ถาวรที่กำหนดเอง /%category%/%postname%/ ใช้งานได้ปกติในหน้าแรก แต่ /page/2 เพิ่ม url https://www.domaine.com/taxonomie_personnalisee/page/2 อาจขัดแย้งกับการตั้งค่าลิงก์ถาวรที่กำหนดเอง

มีวิธีแก้ปัญหาที่เป็นไปได้หลายประการสำหรับปัญหานี้ ขึ้นอยู่กับสถานการณ์ของคุณ

การเปลี่ยนค่า WP_Query posts_per_page

หากคุณเข้าถึง การตั้งค่า -> บรรยาย จากแดชบอร์ดของ WordPress คุณจะเห็นว่าค่าเริ่มต้นสำหรับ หน้าบล็อกแสดงสูงสุด คือ 10

ตรวจสอบ Permalink ส่วนบุคคลจาก WP_Query  แล้วถ้า posts_per_page มีค่าเท่ากัน มิฉะนั้นให้เปลี่ยนอย่างใดอย่างหนึ่งเพื่อไม่ให้ขัดแย้งกัน

เพิ่มกฎการเขียนเพจใหม่

วิธีนี้เกี่ยวข้องกับการลบส่วนที่ละเมิดโดยการสร้างกฎการเขียนใหม่ รวมข้อมูลโค้ดนี้ในไฟล์ functions.php :

function my_pagination_rewrite() {
    add_rewrite_rule(category_name/page/?([0-9]{1,})/?$', 'index.php?category_name=blog&paged=$matches[1]', 'top');
}
add_action('init', 'my_pagination_rewrite');

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

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

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

แหล่งข้อมูลอื่น ๆ ที่แนะนำ

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

สรุป

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

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

en ผู้ดูแล แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.   

...