Thêm số trang vào trong template WordPress

0
539
Kết quả

Trong Template mặc định của WordPress và rất nhiều template khác đều hiển thị các liên kết phân trang bằng cách thêm liên kết bài viết cũ hơn và bài viết liên kết Mới hơn ở dưới cùng của trang lưu trữ WordPress. Tuy nhiên, cũng có rất nhiều các trang web WordPress sử dụng liên kết phân trang (pagination) dạng số như blog của mình. Từ kinh nghiệm của blog cho thấy pagination số làm cho giao diện trở nên hấp dẫn và thân thiện với SEO hơn. Trong bài viết này, blog sẽ chỉ bạn cách làm thế nào để thêm pagination số trong theme WordPress của bạn.

Có hai phương pháp để thêm pagination số trong theme WordPress của bạn .

  • Phương pháp đầu tiên là tự thêm pagination số mà không dựa vào một plugin của bên thứ ba.
  • Phương pháp thứ hai là sử dụng một plugin của bên thứ ba để thêm pagination số.

Cách 1: Add code thủ công

Đầu tiên ta tìm file functions.php trong template bạn đang dùng, thêm đoạn code sau vào

function datnd_numeric_posts_nav() {

	if( is_singular() )
		return;

	global $wp_query;

	/** Không thực hiện lệnh nếu chỉ có 1 trang */
	if( $wp_query->max_num_pages <= 1 )
		return;

	$paged = get_query_var( 'paged' ) ? absint( get_query_var( 'paged' ) ) : 1;
	$max   = intval( $wp_query->max_num_pages );

	/**	Thêm trang hiện tại vào trong mảng */
	if ( $paged >= 1 )
		$links[] = $paged;

	/**	Thêm các trang khác vào trong mảng */
	if ( $paged >= 3 ) {
		$links[] = $paged - 1;
		$links[] = $paged - 2;
	}

	if ( ( $paged + 2 ) <= $max ) {
		$links[] = $paged + 2;
		$links[] = $paged + 1;
	}

	echo '<div class="navigation"><ul>' . "\n";

	/**	Previous Post Link */
	if ( get_previous_posts_link() )
		printf( '<li>%s</li>' . "\n", get_previous_posts_link() );

	/**	Link tới trang đầu tiên */
	if ( ! in_array( 1, $links ) ) {
		$class = 1 == $paged ? ' class="active"' : '';

		printf( '<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( 1 ) ), '1' );

		if ( ! in_array( 2, $links ) )
			echo '<li>…</li>';
	}

	/**	Link tới trang hiện tại, cộng thêm 2 trang nữa nếu cần thiết */
	sort( $links );
	foreach ( (array) $links as $link ) {
		$class = $paged == $link ? ' class="active"' : '';
		printf( '<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( $link ) ), $link );
	}

	/**	Link tới trang cuối  */
	if ( ! in_array( $max, $links ) ) {
		if ( ! in_array( $max - 1, $links ) )
			echo '<li>…</li>' . "\n";

		$class = $paged == $max ? ' class="active"' : '';
		printf( '<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( $max ) ), $max );
	}

	/**	Next Post Link */
	if ( get_next_posts_link() )
		printf( '<li>%s</li>' . "\n", get_next_posts_link() );

	echo '</ul></div>' . "\n";

}

Thêm đoạn code sau vào những trang index.php, archive.php, category.php, và những trang lưu trữ khác nữa.

<?php datnd_numeric_posts_nav(); ?>

Ta sẽ chỉnh thêm về giao diện của nó bằng cách thêm code sau vào file style.css của template đang chạy.

.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
	color: #fff;
	text-decoration:none;
}

.navigation li {
	display: inline;
}

.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
	background-color: #cccccc;
	border-radius: 3px;
	cursor: pointer;
	padding: 12px;
	padding: 0.75rem;
}

.navigation li a:hover,
.navigation li.active a {
	background-color: #dd9933;
}

Như vậy là đã hoàn tất việc thêm phân trang dạng số vào trong các trang của bạn rồi. Các bạn có thể chỉnh file css theo phong cách web, blog của các bạn.

Cách 2: Dùng plugin

Bây giờ chúng ta hãy xem làm thế nào để thêm pagination số trong theme WordPress của bạn bằng cách sử dụng một plugin có tên gọi WP – PageNavi . Điều đầu tiên bạn cần làm là cài đặt và kích hoạt WP – PageNavi plugin. Sau khi kích hoạt các plugin vào Settings » PageNavi để cấu hình cài đặt plugin.

pagenavi

Trên trang cài đặt plugin bạn có thể thay thế các văn bản mặc định và thiết lập pagination số với của riêng bạn nếu bạn muốn. Tuy nhiên , các thiết lập mặc định nên làm việc cho hầu hết các trang web.
Trong bước tiếp theo , bạn cần phải thêm code vào trong WordPress Template của bạn . Tới thư mục template của bạn và tìm thấy những dòng cho pagination cũ và mới trong các mẫu trang lưu trữ của bạn như index.php , archive.php và bất kỳ tập tin mẫu lưu trữ khác. Thêm đoạn code sau đây để thay thế các thẻ previous_posts_link và next_posts_link cũ .

<?php wp_pagenavi(); ?>

Kết quả sẽ như sau

Kết quả
Kết quả