5 WordPress Pagination Code Snippets พร้อมตัวอย่าง [ง่ายถึงขั้นสูง]
เผยแพร่แล้ว: 2020-02-03
หากคุณกำลังมองหาโค้ดการแบ่งหน้าที่ดีที่สุดใน WordPress พร้อมตัวอย่างเฉพาะ คุณจะพบตัวอย่างโค้ดการแบ่งหน้าที่แชร์ในโพสต์นี้จะมีประโยชน์มาก คุณสามารถใช้รหัสการแบ่งหน้านี้ในธีม WordPress หรือในปลั๊กอิน WordPress แบบกำหนดเองที่ต้องมีการแบ่งหน้าโพสต์ ให้ฉันตัดการไล่ล่าและแบ่งปันข้อมูลโค้ดการแบ่งหน้าที่ฉันโปรดปราน:
#1) WordPress วนรอบด้วย Simple Pagination Code
หากคุณต้องการเพิ่มการแบ่งหน้าในลูป WordPress คุณสามารถใช้รหัสการแบ่งหน้าถัดไปและก่อนหน้าด้านล่าง:
<?php if ( have_posts() ) : ?>
<!-- เพิ่มฟังก์ชันการแบ่งหน้าที่นี่ -->
<!-- จุดเริ่มต้นของลูปหลัก -->
<?php ในขณะที่ ( have_posts() ) : the_post(); ?>
<!-- ลูปหลักของธีมที่เหลือ -->
<?php เมื่อสิ้นสุด; ?>
<!-- สิ้นสุดลูปหลัก -->
<!-- เพิ่มฟังก์ชันการแบ่งหน้าที่นี่ -->
<div class="nav-previous alignleft"><?php Previous_posts_link( 'โพสต์ที่เก่ากว่า' ); ?></div>
<div class="nav-next alignright"><?php next_posts_link( 'โพสต์ที่ใหม่กว่า' ); ?></div>
<?php else : ?>
<p><?php _e('ขออภัย ไม่มีข้อความใดที่ตรงกับเกณฑ์ของคุณ'); ?></p>
<?php endif; ?>
#2) WordPress การแบ่งหน้าด้วยตัวเลข
ตัวเลือกการแบ่งหน้า WordPress ที่ยอดเยี่ยมอีกอย่างหนึ่งคือการใช้เลขหน้าที่เพิ่มตัวเลขลงในโพสต์และจัดกลุ่มโพสต์ตามตัวเลข ตัวอย่างเช่น คุณสามารถแสดง 5 โพสต์ในหน้า นี่คือ รหัสการแบ่งหน้าใน WordPress สำหรับการใส่เลขหน้า :
<?php
#STEP 1: สร้างฟังก์ชันเลขหน้า WordPress ที่เป็นตัวเลข
ฟังก์ชัน njengah_numeric_pagination () {
ถ้า( is_singular() )
กลับ;
โกลบอล $wp_query;
/** หยุดดำเนินการหากมีเพียง 1 หน้า */
ถ้า( $wp_query->max_num_pages <= 1 )
กลับ;
$paged = get_query_var( 'เพจ' ) ? absint(get_query_var( 'เพจ' ) ) : 1;
$max = intval( $wp_query->max_num_pages );
/** เพิ่มหน้าปัจจุบันในอาร์เรย์ */
ถ้า ( $paged >= 1 )
$links[] = $paged;
/** เพิ่มหน้ารอบ ๆ หน้าปัจจุบันไปยังอาร์เรย์ */
ถ้า ( $paged >= 3 ) {
$links[] = $paged - 1;
$links[] = $paged - 2;
}
if ( ( $paged + 2 ) <= $max ) {
$links[] = $paged + 2;
$links[] = $paged + 1;
}
echo '<div class="navigation"><ul>' . "\n";
/** ลิงค์โพสต์ก่อนหน้า */
ถ้า ( get_previous_posts_link() )
printf( '<li>%s</li>' . "\n", get_previous_posts_link() );
/** ลิงก์ไปยังหน้าแรก บวกจุดไข่ปลาหากจำเป็น */
if ( ! in_array( 1, $links ) ) {
$class = 1 == $paged ? ' class="active"' : '';
printf( '<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( 1 ) ), '1' );
ถ้า ( ! in_array( 2, $links ) )
echo '<li>…</li>';
}
/** เชื่อมโยงไปยังหน้าปัจจุบัน บวก 2 หน้าในทิศทางใดทิศทางหนึ่งหากจำเป็น */
เรียงลำดับ ( $links );
foreach ( (array) $links เป็น $link ) {
$class = $paged == $link ? ' class="active"' : '';
printf( '<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( $link ) ), $link );
}
/** ลิงก์ไปยังหน้าสุดท้าย บวกจุดไข่ปลาหากจำเป็น */
if ( ! in_array( $max, $links ) ) {
if ( ! in_array( $สูงสุด - 1, $links ) )
echo '<li>…</li>' "\n";
$class = $paged == $max ? ' class="active"' : '';
printf( '<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( $max ) ), $max );
}
/** ลิงค์โพสต์ถัดไป */
ถ้า ( get_next_posts_link() )
printf( '<li>%s</li>' . "\n", get_next_posts_link() );
ก้อง '</ul></div>' "\n";
}
#STEP 2: เพิ่มลงในเทมเพลตโดยใช้การเรียกฟังก์ชันด้านบนนี้
njengah_numeric_pagination();
#STEP 3 : จัดรูปแบบการแบ่งหน้าให้เหมาะสมกับสไตล์ธีมของคุณ
/** CSS Classes เพื่อจัดรูปแบบการแบ่งหน้า*/
.navigation ลี {
}
.navigation li {
}
#3) ตัวอย่างการแบ่งหน้า WordPress Ajax
หากคุณกำลังมองหาโค้ดการแบ่งหน้า Ajax ใน WordPress ฉันพบตัวอย่างบน GitHub ที่ทำงานได้ดีมากและโค้ดอยู่ในรูปของปลั๊กอิน ฉันได้ปรับแต่งให้เป็นปลั๊กอินสำหรับบทช่วยสอนของเรา และสามารถคัดลอกโค้ดไปยังไฟล์และบันทึกในรูปแบบ zip และติดตั้งเป็นปลั๊กอินได้ ต่อไปนี้เป็นโค้ดตัวอย่างการแบ่งหน้า WordPress Ajax:
<?php
/**
* ชื่อปลั๊กอิน: Njengah Ajax Pagination
* URI ของปลั๊กอิน: https://njengah.com
* คำอธิบาย: ตัวอย่างการแบ่งหน้า WordPress Ajax
* เวอร์ชัน: 1.0.0
* ผู้แต่ง: Joe Njenga
* URI ผู้แต่ง: https://njengah.com
* ใบอนุญาต: GPL-2.0+
* URI ใบอนุญาต: http://www.gnu.org/licenses/gpl-2.0.txt
* โดเมนข้อความ: cs-pagination
* เส้นทางโดเมน: /languages
*/
// เครดิต - Casper Schultz
คลาส Njengah_Ajax_Pagination {
ป้องกัน $num_per_page;
ฟังก์ชั่นสาธารณะ __construct () {
$this->num_per_page = 5;
$this->init();
}
ฟังก์ชันที่ได้รับการป้องกัน init() {
add_action( 'init', array( $this, 'add_rewrite_rule' ) );
add_filter( 'query_vars', array( $this, 'add_query_vars' ) );
add_action( 'parse_request', array( $this, 'parse_request' ) );
}
/**
* แยกวิเคราะห์คำขอที่เข้ามาและสร้างผลลัพธ์
*/
ฟังก์ชั่น parse_request( $wp ) {
ถ้า ( array_key_exists ( 'cs-page', $wp->query_vars ) ) {
$page = isset ( $wp->query_vars['cs-page'] ) ? $wp->query_vars['cs-page'] : 1;
$args = อาร์เรย์ (
'post_type' => 'โพสต์',
'post_per_page' => $this->num_per_page,
'paged' => $page,
);
$query = ใหม่ WP_Query( $args );
// เราจำเป็นต้องรู้จำนวนโพสต์ทั้งหมดที่พบ
$values['total'] = $query->found_posts;
// และต่อหน้า
$values['per_page'] = $นี้->num_per_page;
$values['posts'] = อาร์เรย์ ();
// ให้ส่งข้อมูลที่เราต้องการเท่านั้น
ในขณะที่ ( $query->have_posts() ) {
$query->the_post();
$values['posts'][] = อาร์เรย์ (
'ID' => get_the_ID(),
'title' => get_the_title(),
);
}
wp_reset_postdata();
wp_send_json( $ค่า );
}
}
/**
* เพิ่ม args แบบสอบถามที่จำเป็น
*/
ฟังก์ชั่น add_query_vars ( $query_vars ) {
$query_vars[] = 'cs-page';
ส่งคืน $query_vars;
}
/**
* เพิ่มกฎการเขียนใหม่สำหรับการแบ่งหน้าแบบกำหนดเองของเรา เพื่อให้เราสามารถหลีกเลี่ยงการใช้ admin-ajax
*/
ฟังก์ชัน add_rewrite_rule() {
add_rewrite_rule( '^cs-paginate/([0-9]+)/?', 'index.php?cs-page=$matches[1]', 'top' );
}
/**
* ล้างกฎการเขียนใหม่
*/
ติดตั้งฟังก์ชันคงที่ () {
flush_rewrite_rules();
}
}
ฟังก์ชัน njengah_ajax_pagination_init () {
ใหม่ Njengah_Ajax_Pagination();
}
njengah_ajax_pagination_init();
// จำเป็นต้องล้างกฎการเขียนซ้ำเมื่อเปิดใช้งาน
register_activation_hook( __FILE__, array( 'Njengah_Ajax_Pagination', 'install' ) );
#4) การแบ่งหน้า WordPress สำหรับประเภทโพสต์ที่กำหนดเอง
สำหรับการแบ่งหน้าประเภทโพสต์ที่กำหนดเอง คุณต้องใช้ WP_query เพื่อตรวจสอบประเภทโพสต์ที่กำหนดเอง และในอาร์กิวเมนต์ คุณจะต้องส่งประเภทโพสต์ที่กำหนดเองใน post_type แล้วใช้รหัสการแบ่งหน้าเพื่อสร้างการแบ่งหน้า WordPress สำหรับประเภทโพสต์ที่กำหนดเอง
ต่อไปนี้คือรหัสที่คุณควรเพิ่มลงใน functions.php และแทนที่ post_type ด้วยกระสุนประเภทโพสต์ที่คุณกำหนดเอง:
<?php
/**
* การแบ่งหน้า WordPress สำหรับประเภทโพสต์ที่กำหนดเอง
*/
<?php
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'เพจ' ) : 1;
$args = อาร์เรย์ (
'post_type' => 'custom_post_type_name',
'posts_per_page' => 10,
'paged' => $paged
);
$loop = ใหม่ WP_Query( $args );
ในขณะที่ ( $loop->have_posts() ) : $loop->the_post();
// เนื้อหาประเภทโพสต์ที่กำหนดเอง
ในที่สุด;
?>
<nav class="pagination">
<?php
ใหญ่ = 999999999;
echo paginate_links (อาร์เรย์ (
'base' => str_replace( $big, '%#%', get_pagenum_link( $big ) ),
'format' => '?paged=%#%',
'ปัจจุบัน' => สูงสุด( 1, get_query_var('paged') ),
'total' => $loop->max_num_pages,
'prev_text' => '«',
'next_text' => '»'
) );
?>
</nav>
<?php wp_reset_postdata(); ?>#5 Custom Query Pagination WordPress
รหัสการแบ่งหน้าแบบสอบถามที่กำหนดเองใน WordPress ใช้ WP_query เพื่อรับโพสต์เฉพาะที่เราต้องการแบ่งหน้า จากนั้นรวมผลลัพธ์ของการสืบค้นด้วยรหัสการแบ่งหน้าเพื่อใช้การแบ่งหน้ากับบทความเฉพาะที่เราเลือก ต่อไปนี้คือตัวอย่างการแบ่งหน้าคิวรีแบบกำหนดเองใน WordPress
<?php
// แบบสอบถามที่กำหนดเอง
$paged = ( get_query_var( 'paged' ) ) ? absint(get_query_var( 'เพจ' ) ) : 1;
$args = อาร์เรย์ (
'posts_per_page' => 5,
'category_name' => 'แกลเลอรี่',
'paged' => $paged,
);
$the_query = ใหม่ WP_Query( $args );
?>
<!-- วง ฯลฯ.. -->
<?php
// การแบ่งหน้า
ใหญ่ = 999999999; // ต้องการจำนวนเต็มที่ไม่น่าเป็นไปได้
echo paginate_links (อาร์เรย์ (
'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
'format' => '?paged=%#%',
'ปัจจุบัน' => สูงสุด( 1, get_query_var('paged') ),
'total' => $the_query->max_num_pages
) );บทสรุป
ในบทความนี้ เราได้เน้นประเภทการแบ่งหน้าของ WordPress และแบ่งปันรหัสการแบ่งหน้าเฉพาะเพื่อใช้สำหรับแต่ละกรณี โค้ดการแบ่งหน้าใน WordPress นี้สามารถเพิ่มลงในธีมหรือปลั๊กอินที่มีอยู่ได้ และสามารถเพิ่มลงใน WordPress เป็นปลั๊กอินแบบสแตนด์อโลนได้เช่นกัน