Bạn đang tự code theme WordPress và muốn làm chức năng phân trang cho website.Sơn Web chia sẻ bạn code chức năng phân trang với plugin WP-PageNavi một cách chuyên nghiệp hỗ trợ sặn style và thiết lập text khi phân trang.Cùng SonWeb tìm hiểu làm chức năng phân trang qua các bước cơ bản sau:
Bước 1: Cài đặt Plugin WP Page Navi
Bạn truy cập Bảng quản trị admin website vào phần cài đặt plugin gõ tên Plugin: WP-PageNavi chọn kích hoạt và cài đặt như hình:
Bước 2: Code chức năng phân trang bài viết mới nhất với plugin WP-PageNavi
Trong theme bạn đang làm có thể lấy bài viết mới nhất với code sau:
<div class="">
<ul class="ul-vertical-post">
<?php
$p = get_query_var('paged') ? get_query_var('paged') : 1;
$args = array(
'post_type' =>'post',
'posts_per_page' =>10,
'paged' => $p,
'post_status' =>'publish',
);
$my_query = new WP_Query($args);
while ( $my_query->have_posts() ) : $my_query->the_post();
?>
<li class="col mb-4">
<div class="row row-new">
<div class="box-image col-md-5 col-12 vertical-item">
<a class="overlay-img" href="<?php the_permalink();?>">
<?php if ( has_post_thumbnail()) : the_post_thumbnail();?>
<?php else: ?>
<img src="/chamcuu/wp-content/uploads/2023/07/LAYOUT-1.jpg" />
<?php endif;?>
</a>
</div><!--end box-image-->
<div class="box-text col col text-vertical">
<?php
$cats= get_the_category(get_the_ID() );
$cat_id = $cats[0]->cat_ID;
?>
<span class="entry-meta">
<a href="<?php echo get_category_link($cat_id)?>" class="text-decoration-none"> <?php echo $cats[0]->name ?> </a>
</span>
<h5 class="title-item my-1" > <a href="<?php the_permalink();?>" class="text-decoration-none"> <?php the_title();?> </a></h5>
<p class="my-1"> <?php echo strip_tags(get_the_excerpt()); ?> </p>
<span class="timeago"> <?php echo sw_post_time_ago() ?> </span>
</div><!--end box-text-->
</div><!--end row-->
<div class="my-4 border2"></div>
</li>
<?php endwhile; ?>
</ul>
<?php wp_pagenavi(array('query' => $my_query) ); wp_reset_query(); ?>
</div><!--end row-->
Giải thích cơ bản code trên:
Code trên lấy ra 10 bài viết mới nhất trên mối trang với
$p = get_query_var(‘paged’) ? get_query_var(‘paged’) : 1; lây số trang hiện tại phân trang
Quan trọng:
$my_query = new WP_Query($args);
while ( $my_query->have_posts() ) : $my_query->the_post();
— Nội dung html muốn hiển thị -->
endwhile;
Bạn có thể dùng kèm với plugin Wp Pagenavi Style để định dạng phân trang cho đẹp hơn,demo code trên phân trang cho web: https://saigonskatepark.com/
Lưu ý: Để thêm code phân trang chuyên mục hay tag, bạn có thể thêm code sau vào đầu vòng lặp:
<?php
$pc = get_query_var('paged') ? get_query_var('paged') : 1;
$args = array(
'post_type' =>'post',
'posts_per_page' =>10,
'paged' => $pc,
'post_status' =>'publish',
);
$my_queryc = new WP_Query($args);
?>
Cưới vòng lặp để hiện thị phân trang bạn chỉ cần thay:
<?php wp_pagenavi(array('query' => $my_queryc ) ); ?>
Kết luận: Cách làm tương tự cho phân trang chuyên mục,post type WordPress, hay bài viết có meta filed bạn chỉ cần thêm vào , nếu cần chỉnh sửa web WordPress theo yêu cầu bạn có thể liên hệ Son7Web qua sdt 0932644183 nhé.
