Truy vấn tùy chỉnh phân trang Wordpress

Tạo một chức năng phân trang

Trong 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 "\n";
        }
  }

Gọi Hàm phân trang trong Mẫu tùy chỉnh

Bướ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

 2,// query last 5 posts  
               'paged' => $paged
             );
			 
$customQuery = new WP_Query($args);


?> 




 
	

		
		

		
			have_posts() ): 
			
               while($customQuery->have_posts()) :
                   
				       $customQuery->the_post();
					   
					     global $post;
                ?>
		
		          

				  
						

						
						 

						   

								

								  

									

											
									
								  
								  
								  

											

								  
								
								
						  
						
				
 
						  
			max_num_pages); 
			 
			}
					
			?>	
	
			
			
		
			
	
	

		  

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ỉnh

Bướ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