Trong hướng dẫn trước, tôi đã giải thích chi tiết cách bạn có thể thêm phân trang số trong WordPress cũng như cách tạo hình thu nhỏ phân trang bài đăng trước và bài đăng tiếp theo cũng như cách chia bài đăng thành nhiều trang bằng cách sử dụng phân trang. Tôi cũng đã chia sẻ một số mã phân trang WordPress mà bạn có thể sử dụng trong blog của mình để thêm tùy chọn phân trang ưa thích của mình. Trong bài đăng này, tôi sẽ giải thích cách xây dựng và triển khai phân trang truy vấn tùy chỉnh trên trang web WordPress của bạn Show Phân trang truy vấn tùy chỉnhNhư tôi đã đề cập trong phần giới thiệu, phân trang truy vấn tùy chỉnh bao gồm ba phần bao gồm. , mã để hiển thị phân trang và một số kiểu để làm cho phân trang trông đẹp mắt. Chúng tôi sẽ chia nhỏ mã phân trang truy vấn tùy chỉnh này thành ba bước sau Tạo Truy vấn tùy chỉnh của bài đăng hoặc Bài đăng tùy chỉnhBước đầu tiên là tạo một truy vấn về cơ bản là một mảng các đối số mà chúng tôi định sử dụng trong truy vấn tùy chỉnh Để hiển thị phân trang truy vấn tùy chỉnh này, chúng ta hãy bắt đầu bằng cách tạo một mẫu trang tùy chỉnh nơi chúng tôi sẽ thêm mã cho phân trang truy vấn tùy chỉnh Sau đây là ví dụ về mẫu trang tùy chỉnh với mã truy vấn tùy chỉnh <?php
/**
* Template Name: CQ Pagination
*
*/
get_header();
// Step 1 : Create Custom Query
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
$args = array(
'posts_per_page' => 2,// query last 5 posts
'paged' => $paged
);
$customQuery = new WP_Query($args);Mã này chỉ đơn giản là tạo một mẫu trang tùy chỉnh mà bạn có thể thấy bên dưới các thuộc tính trang như trong hình bên dưới Truy vấn có thể có một số đối số nhưng trong trường hợp này, chúng tôi chỉ giới hạn ở ‘posts_per_page’ là số lượng bài đăng chúng tôi muốn hiển thị trên trang Chúng tôi cũng có thể chỉ định loại bài đăng bằng cách sử dụng 'post_type', orderby, tác giả, v.v. Sau đây là một ví dụ về một truy vấn khác cho loại bài đăng tùy chỉnh có tên là 'cuốn sách' //Get current author to use in the query $current_author = ( isset($_GET ) ) ? get_user_by( 'slug', $author_name ) : get_userdata( intval( $author ) ); /* set the arguments for the query $args = array( 'post_type' => array( 'goal' ), 'orderby' => 'date', 'order' => 'desc', 'posts_per_page' => 10, 'paged' => get_query_var( 'page' ) ? get_query_var( 'page' ) : 1, 'author' => $current_author->ID ); // Instantiate the query $query = new WP_Query( $args ); Sau khi chúng tôi xây dựng $args và khởi tạo truy vấn, giờ chúng tôi đã sẵn sàng để hiển thị các bài đăng trong vòng lặp và thêm truy vấn tùy chỉnh trong bước tiếp theo Hiển thị bài đăng được truy vấn trong mẫu trang tùy chỉnhĐể hiển thị các bài đăng được truy vấn, mã đã được thêm vào mã mẫu tùy chỉnh ban đầu và mã đầy đủ như sau <?php
/**
* Template Name: CQ Pagination
*
*/
get_header();
// Step 1 : Create Custom Query
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
$args = array(
'posts_per_page' => 2,// query last 5 posts
'paged' => $paged
);
$customQuery = new WP_Query($args);
?>
<!-- Step 2: Display the Posts we Queried in the Step 1 -->
<div class="wrap">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php
if($customQuery->have_posts() ):
while($customQuery->have_posts()) :
$customQuery->the_post();
global $post;
?>
<div class ="inner-content-wrap">
<ul class ="cq-posts-list">
<li>
<h3 class ="cq-h3"><a href="<?php the_permalink(); ?>" ><?php the_title(); ?></a></h3>
<div>
<ul>
<div>
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a>
</div>
</ul>
<ul>
<p><?php echo the_content(); ?></p>
</ul>
</div>
</li>
</ul>
</div> <!-- end blog posts -->
<?php endwhile;
endif;
wp_reset_query();Tạo một chức năng phân trangTrong bước cuối cùng này, chúng ta cần tạo chức năng phân trang mà chúng ta sẽ sử dụng trong mẫu trang tùy chỉnh ở trên để hiển thị phân trang truy vấn tùy chỉnh. Để tạo chức năng phân trang, chúng ta cần thêm đoạn mã sau vào hàm. tập tin php // Custom pagination function
function cq_pagination($pages = '', $range = 4)
{
$showitems = ($range * 2)+1;
global $paged;
if(empty($paged)) $paged = 1;
if($pages == '')
{
global $wp_query;
$pages = $wp_query->max_num_pages;
if(!$pages)
{
$pages = 1;
}
}
if(1 != $pages)
{
echo "<nav aria-label='Page navigation example'> <ul class='pagination'> <span>Page ".$paged." of ".$pages."</span>";
if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>« First</a>";
if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>‹ Previous</a>";
for ($i=1; $i <= $pages; $i++)
{
if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
{
echo ($paged == $i)? "<li class=\"page-item active\"><a class='page-link'>".$i."</a></li>":"<li class='page-item'> <a href='".get_pagenum_link($i)."' class=\"page-link\">".$i."</a></li>";
}
}
if ($paged < $pages && $showitems < $pages) echo " <li class='page-item'><a class='page-link' href=\"".get_pagenum_link($paged + 1)."\">i class='flaticon flaticon-back'></i></a></li>";
if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) echo " <li class='page-item'><a class='page-link' href='".get_pagenum_link($pages)."'><i class='flaticon flaticon-arrow'></i></a></li>";
echo "</ul></nav>\n";
}
}
Gọi chức năng phân trang trong mẫu tùy chỉnhBước cuối cùng là gọi hàm chúng tôi đã thêm ở trên trong mẫu để phân trang được hiển thị. Để gọi chức năng này, chúng ta nên sử dụng đoạn mã sau // Step 3: Call the Pagination Function Here
if (function_exists("cq_pagination")) {
cq_pagination($customQuery->max_num_pages);
}Mã cuối cùng tạo mẫu trang tùy chỉnh với chức năng phân trang này phải như sau <?php
/**
* Template Name: CQ Pagination
*
*/
get_header();
// Step 1 : Create Custom Query
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
$args = array(
'posts_per_page' => 2,// query last 5 posts
'paged' => $paged
);
$customQuery = new WP_Query($args);
?>
<!-- Step 2: Display the Posts we Queried in the Step 1 -->
<div class="wrap">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php
if($customQuery->have_posts() ):
while($customQuery->have_posts()) :
$customQuery->the_post();
global $post;
?>
<div class ="inner-content-wrap">
<ul class ="cq-posts-list">
<li>
<h3 class ="cq-h3"><a href="<?php the_permalink(); ?>" ><?php the_title(); ?></a></h3>
<div>
<ul>
<div>
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a>
</div>
</ul>
<ul>
<p><?php echo the_content(); ?></p>
</ul>
</div>
</li>
</ul>
</div> <!-- end blog posts -->
<?php endwhile;
endif;
wp_reset_query();
// Step 3 : Call the Pagination Function Here
if (function_exists("cq_pagination")) {
cq_pagination($customQuery->max_num_pages);
}
?>
</main><!-- #main -->
</div><!-- #primary -->
</div><!-- .wrap -->
<!----end of page-------->
<?php get_footer(); ?>Nếu bạn làm theo từng bước đúng cách, bạn sẽ có phân trang như trong hình bên dưới Tạo kiểu cho phân trang truy vấn tùy chỉnhBước cuối cùng là thêm các kiểu vào phân trang tùy chỉnh để làm cho nó khớp với các kiểu và thiết kế của chủ đề. Sau đây là các kiểu CSS mà bạn nên thêm vào biểu định kiểu để tạo kiểu cho phân trang tùy chỉnh này /**
* CQ Pagination Styles
* @author Joe Njenga
*/
.pagination {
clear:both;
position:relative;
font-size:16px;
line-height:13px;
float:right;
list-style-type:none;
width:100%;
}
.pagination span, .pagination a {
display:block;
float:left;
margin: 2px 2px 2px 0;
padding:6px 9px 5px 9px;
text-decoration:none;
width:auto;
color:#fff;
background: #237697;
}
.pagination a:hover{
color:#fff;
background: #000;
}
.pagination .current{
padding:6px 9px 5px 9px;
background: #999;
color:#fff;
}Sau khi bạn thêm các kiểu phân trang này, giao diện cuối cùng của phân trang tùy chỉnh sẽ như trong hình bên dưới |
