Loading...

Phân trang WordPress không dùng plugin

Phân trang WordPress không dùng plugin
Rate this post

Nếu bạn đang muốn dùng chèn pagination  vào web wordpress nhưng không dùng plugin thì hãy đọc bài viết này. Ngoài các plugin PageNavi nổi tiếng chúng ta cũng có thẻ dùng code tay để chèn vào. Đây là cách giúp web giảm được tốc độ tải trang khi không dùng css bên ngoài.

WordPress cung cấp cho chúng ta một chức năng tuyệt vời “paginate_links”. Nó được thêm ào từ version 2.1.0 và sẽ cho phép bạn chuyển hướng tho kiểu paginated  cho bất kỳ truy vấn nào trên web. Tôi sẽ cung cấp cho bạn 1 đoạn code đơn giản hỗ trợ:

Code php

// Numbered Pagination
if ( !function_exists( 'wpex_pagination' ) ) {
	
	function wpex_pagination() {
		
		$prev_arrow = is_rtl() ? '→' : '←';
		$next_arrow = is_rtl() ? '←' : '→';
		
		global $wp_query;
		$total = $wp_query->max_num_pages;
		$big = 999999999; // need an unlikely integer
		if( $total > 1 )  {
			 if( !$current_page = get_query_var('paged') )
				 $current_page = 1;
			 if( get_option('permalink_structure') ) {
				 $format = 'page/%#%/';
			 } else {
				 $format = '&paged=%#%';
			 }
			echo paginate_links(array(
				'base'			=> str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
				'format'		=> $format,
				'current'		=> max( 1, get_query_var('paged') ),
				'total' 		=> $total,
				'mid_size'		=> 3,
				'type' 			=> 'list',
				'prev_text'		=> $prev_arrow,
				'next_text'		=> $next_arrow,
			 ) );
		}
	}
	
}

CSS

ul.page-numbers {
    list-style: none;
    margin: 0;
}

.page-numbers:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

ul.page-numbers li {
    display: block;
    float: left;
    margin: 0 4px 4px 0;
    text-align: center;
}

.page-numbers a,
.page-numbers span {
    line-height: 1.6em;
    display: block;
    padding: 0 6px;
    height: 18px;
    line-height: 18px;
    font-size: 12px;
    text-decoration: none;
    font-weight: 400;
    cursor: pointer;
    border: 1px solid #ddd;
    color: #888;
}

.page-numbers a span { padding: 0 }

.page-numbers a:hover,
.page-numbers.current,
.page-numbers.current:hover {
    color: #000;
    background: #f7f7f7;
    text-decoration: none;
}

.page-numbers:hover { text-decoration: none }

Sử dụng

Cách sử dụng rất đơn giản, bạn hãy bỏ đoạn code bên dưới vào bất cứ chỗ nào bạn muốn hiển thì pagination. Những trang phổ biến dùng phân trang nhất chính là index.php, home.php, achive.php, search.php.

<? php wpex_pagination (); ?>

Custom Queries

Nếu bạn đang truy vấn sử dụng WP_Query, chức năng này sẽ không hoạt động . Vì vậy tôi tạo ra truy vấn mới như sau:

$wpex_query = new WP_Query( $args );

Khi đó chúng ta cũng phải sửa chức năng phân trang chính:

global $wp_query, $wpex_query;
if ( $wpex_query ) {
    $total = $wpex_query->max_num_pages;
} else {
    $total = $wp_query->max_num_pages;
}

Chúng ta sẽ phải style css để giao diện đẹp hơn.

Có thể bạn quan tâm

Loading...
Bài cũ hơnViết cho Xử Nữ 18/9
Bài mới hơnTuổi 20 mộng mơ và quyết liệt