Tạo phân trang cho WordPress hỗ trợ custom query

Cập nhật lần cuối vào

Sáu đã từng giới thiệu cách tạo phân trang cho WordPress không cần dùng plugin, tuy nhiên thì code đó vẫn còn một số hạn chế, phân trang chưa hiển thị cho các câu truy vấn tùy chọn. Trong bài viết này Sáu đã nâng cấp code lên và chỉnh sửa lại một vài lỗi, bây giờ bạn có thể dùng trong một vòng lặp của một câu truy vấn bất kỳ.

Tạo phân trang cho WordPress với custom query

Nếu bạn có kiến thức về PHP và WordPress thì càng tốt, tuy nhiên nếu ngược lại thì bạn chỉ cần sao chép code và sử dụng, không cần biết nó được viết như thế nào, chúng ta chỉ chú trọng đến kết quả mà mình đạt được là gì.

if( ! function_exists( 'the_paginate' ) ) :
function the_paginate($args = null) {
	$defaults = array(
		'title'		=> 'Pages',
		'query'		=> null
	);
	$args = wp_parse_args($args, $defaults);
	extract($args, EXTR_SKIP);
	if(is_404()) {
		return;
	}
	$currentPage = null;
	$totalPage = null;
	if(empty($query)) {
		global $wp_query;
		$query = $wp_query;
	}
	
	$currentPage = stheme_get_paged();
	$title .= ':';
	$ppp = intval($query->query['posts_per_page']);
	if($ppp < 1) {
		return;
	}
	$totalPage = intval(ceil($query->found_posts / $ppp));
	if($totalPage <= 1) {
		return;
	}
	$paginateResult = '<div id="sPaginate" class="spaginate paginate"><div class="spaginate-inner paginate-inner"><span class="spaginate-title paginate-title">'.$title.'</span>';
	
	if ($currentPage > 1) {
		$paginateResult .= '<a class="spaginate-prev prev page-item" href="'.get_pagenum_link($currentPage - 1).'">&laquo;</a>';
	}		
	$paginateResult .= the_paginate_list(1, $totalPage, $currentPage);
	if ($currentPage < $totalPage) {
		$paginateResult .= "<a href='" . get_pagenum_link($currentPage + 1) . "' class='spaginate-next next page-item'>&raquo;</a>";
	}
	$paginateResult .= "</div></div>";	
	echo $paginateResult;
}
endif;

if( ! function_exists( 'stheme_paginate' ) ) :
function stheme_paginate($args = null) {
	the_paginate($args);
}
endif;

if( ! function_exists( 'the_paginate_list' ) ) :
function the_paginate_list($intStart, $totalPage, $currentPage) {
	$pageHidden = '<span class="spaginate-hidden hidden">...</span>';
	$linkResult = "";
	$hiddenBefore = false;
	$hiddenAfter = false;
	for ($i = $intStart; $i <= $totalPage; $i++) {
		if($currentPage === intval($i)) {
			$linkResult .= '<span class="spaginate-current page-item current">'.$i.'</span>';
		}
		else if(($i <= 6 && $currentPage < 10) || $i == $totalPage || $i == 1 || $i < 4 || ($i <= 6 && $totalPage <= 6) || ($i > $currentPage && ($i <= ($currentPage + 2))) || ($i < $currentPage && ($i >= ($currentPage - 2))) || ($i >= ($totalPage - 2) && $i < $totalPage)) {
			$linkResult .= '<a class="spaginate-link page-item" href="'.get_pagenum_link($i).'">'.$i.'</a>';
			if($i <= 6 && $currentPage < 10) {
				$hiddenBefore = true;
			}
		}
		else {
			if(!$hiddenBefore) {
				$linkResult .= $pageHidden;
				$hiddenBefore = true;
			}
			else if(!$hiddenAfter && $i > $currentPage) {
				$linkResult .= $pageHidden;
				$hiddenAfter = true;
			}
		}
	}
	return $linkResult;
}
endif;

function stheme_get_paged() {
	$paged = intval(get_query_var('paged')) ? intval(get_query_var('paged')) : 1;
	return $paged;
}

Bên trên là code PHP mà Sáu đã tạo ra, gom thành các hàm nhỏ cho bạn dễ hiểu và dễ sử dụng lại. Để cho phân trang hiển thị được đẹp hơn thì bạn cần phải bổ sung thêm css:

.spaginate .spaginate-title {
	display: none;
}

.spaginate .spaginate-link, .spaginate .spaginate-current, .spaginate .spaginate-next, .spaginate .spaginate-prev {
    background-color: #E9E9E9;
    border: 1px solid #D2D2D2;
    border-radius: 2px;
    color: #555555;
    display: inline-block;
    font-size: 1em;
    font-weight: 700;
    margin: 0 2px;
    padding: 0.6em 0.8em;
    position: relative;
    text-decoration: none;
}

.spaginate .spaginate-current, .spaginate .spaginate-link:hover, .spaginate .spaginate-next:hover, .spaginate .spaginate-prev:hover {
    background-color: #01B1D3;
    border: 1px solid #01B1D3;
    color: #FFFFFF;
}

.site-paginate {
    display: block;
    margin-top: 20px;
    position: relative;
    text-align: center;
    z-index: 9999;
}

Cách sử dụng rất dễ, bạn chỉ cần gọi hàm stheme_paginate là có thể hiển thị được phân trang, tuy nhiên nếu không có tham số đầu vào thì code này sẽ có tác dụng đối với query chính trên blog của bạn.

<?php $blog = new WP_Query(array('posts_per_page' => 5, 'paged' => stheme_get_paged())); ?>
<div class="list-post">
	<?php if($blog->have_posts()) : ?>
		<?php while($blog->have_posts()) : $blog->the_post(); ?>
			<article id="post-<?php the_ID(); ?>" <?php post_class('blog-posts'); ?> <?php spost_schema(); ?>>
				<header class="article-header entry-header">
					<?php stheme_template('post', 'title'); ?>
					<span class="postinfo entry-meta">Đăng bởi <?php spost_author_link(); ?> trong chuyên mục: <?php spost_category(); ?>  vào ngày: <?php echo get_the_date(); ?></span>			
				</header>
				<div class="article-content">
					<?php stheme_template('post', 'thumbnail'); ?>
					<span class="artice-preview">
						<?php the_excerpt(); ?>
					</span>
					<div class="clearfix"></div>
					<div class="read-more">
						<?php stheme_template('post', 'comment'); ?>
						<span class="more">
							<a class="darkbtn" href="<?php the_permalink(); ?>"><span>Xem thêm</span></a>
						</span>
					</div>
				</div>							
			</article>						
		<?php endwhile; wp_reset_postdata(); ?>
	<?php endif; ?>
</div>
<?php stheme_paginate(array('query' => $blog)); ?>

Như ví dụ bên trên, Sáu có truy vấn tùy chọn là $blog, bây giờ mình muốn tạo phân trang cho các bài viết của truy vấn này, hiển thị mỗi trang là 5 bài viết thì mình sẽ dùng lại hàm phân trang như sau:

<?php stheme_paginate(array('query' => $blog)); ?>

Tuy lần cập nhật này có chỉnh sửa lại đôi chút, nhưng có thể vẫn còn nhiều lỗi trong đó. Các bạn nếu ủng hộ thì hãy sử dụng code này và report lỗi lại giúp mình nhé. Chân thành cảm ơn và chúc bạn thành công.

Theo dõi
Thông báo của
guest

32 Comments
Cũ nhất
Mới nhất Được bỏ phiếu nhiều nhất
Phản hồi nội tuyến
Xem tất cả bình luận
Nham Phat
Nham Phat
9 năm trước

Sáu cho mình hỏi, nếu muốn viết các code html, php,… vào khung như trên thì phải làm sao ạ?

Nham Phat
Nham Phat
9 năm trước

Cảm ơn bạn, mình cũng đã có hỏi Thạch, nhưng nó đang về VN. Xem ra bên này có nhiều kíên thức nâng cao hơn bên đó,.hihi…

Đỗ Thành Luân
9 năm trước

Bác Sáu chịu khó viết ghê, rất nhiều bài hay, cảm ơn bác!

Tom Jerry
Tom Jerry
9 năm trước

Anh Sáu ơi, a có thể giải thích chi tiết phần code phân trang đc ko ạ, a viết liền mạch mà ko giải thích gì hết nên nó khó hiểu quá !!!

Nguyễn Xuân Hữu
Nguyễn Xuân Hữu
9 năm trước

Bạn Sáu cho mình hỏi, mình đã làm nhưng kết quả hiển thị link là my_url/page/2/ và báo page not found. Mình không biết thiếu gì?

Nguyễn Xuân Hữu
Nguyễn Xuân Hữu
9 năm trước

custom post tyle bạn

Nguyễn Xuân Hữu
Nguyễn Xuân Hữu
9 năm trước

Perfect !! cảm ơn bạn rất nhiều.Mình đã làm được :))

Cuong Pham
Cuong Pham
8 năm trước

Hi chào bạn.!!
Mình có sử dụng code của bạn,nó hoạt động trên localhost nhưng khi mình up lên server thì báo lỗi Page not found, mình dùng với post

Cuong Pham
Cuong Pham
8 năm trước

Mình đã cập nhật lại rồi nhưng cũng không được cả tối rồi chưa tìm ra lý do tại sao bạn à

Cuong Pham
Cuong Pham
8 năm trước

Mình up y nguyên localhost và cũng đang tìm hiểu nguyên nhân tại sao..

hong tran
hong tran
7 năm trước

perfect
nhưng nếu muốn dạng thế này 1 2 3 …10 thì thế nào bác, hic

Đôi Guốc Mộc Blog
7 năm trước

Bài viết của bạn rất hay, đang muốn học wp mà chưa biết bắt đầu từ đâu :(((

Đôi Guốc Mộc Blog
7 năm trước

À, mà mình hỏi cái này nhé 🙂
MÌnh có đọc và làm theo bài viết này:
https://thichviet.net/lam-website-doc-truyen-online-don-gian-cho-wordpress.html
Tuy nhiên có 1 cái chưa ưng đó là khi vào đọc từng chương cái phần Next / Prev chương nó không chuẩn lắm. Khi đang đọc 1 chương của truyện này thì vẫn có thể next sang chương của 1 truyện khác, có cách nào khắc phục không nhỉ 🙂

Đôi Guốc Mộc Blog
7 năm trước

Cảm ơn bạn đã trả lời 🙂

Tạ Tuấn Anh
Tạ Tuấn Anh
7 năm trước

Chào Bạn m đang dùng đoan code của bạn thử hiện chuyển mục ngài trang chủ kiểu
$args = array(
‘post_type’ => ‘post’,
‘ignore_sticky_posts’ => 1,
‘posts_per_page’ => 6,
‘cat’ =>$id,
‘paged’ => stheme_get_paged(),
);
$the_query = new WP_Query($args);
nhưng click vào nó có dạng domain/page/2 .. kiểu thế nhưng query vẫn là 6 bài đầu

Nha Huynh
7 năm trước

Cám ơn bài viết rất nhiều, lần đầu tiên đọc tuts ở đây,
Cơ bản code bạn viết đã chạy nhưng mình bị 1 lỗi nhỏ mong bạn và mọi người trả lời giúp:
Mình đặt code phân trang ở trang chủ thì thấy Danh sách các trang 1,2,3,4,5,6….30, … nhưng khi click vào các trang thì list post ra vẫn đúng mà cái danh sách mất tiêu. Vậy là do gì vậy bạn?
Mình dùng Postt-type !

Bá ngọc trung
7 năm trước

MÌnh phân được trang rồi nhưng mà khi kích vào trang 2 nó bị chết link,
trong trang custom taxonomy còn trong category mặc định thì ko sao
bạn xem giúp mình
http://dayhoc.webmax.vn/danh_muc_bai_viet/phuong-phap-glenn-doman/

Nguyen Tuyen
4 năm trước

https://wordpress.org/plugins/sb-paginate/#installation
Mình dùng plugin này nhưng trang 2 ko hoạt động, link thì đổi nhưng dữ liệu vẫn như cũ

tùng
tùng
4 năm trước

em vẫn chưa phân trang được bác nào giúp em với