Phân trang đẹp cho blog WordPress bằng plugin WP PageNavi

wp_page_navi_style

Chào các bạn, hôm nay mình sẽ giới thiệu một plugin giúp bạn tạo phân trang cho blog WordPress rất đẹp và tiện dụng. Khi blog của bạn có số lượng bài viết nhiều, mặc định của blog Wordpres sẽ phân trang cho bạn theo kiểu:

<< Older posts                                                                Newer posts >>

Nhìn không đẹp và không tiện dụng nếu bạn muốn chuyển ngay đến một rang bất kì. Vì vậy, mình sẽ sử dụng một plugin có tên là WP PageNavi.

Cài đặt WP PageNavi

WP PageNavi được cài đặt hoàn toàn giống với bất kì một plugins nào khác, bạn có thể tải WP PageNavi tại đây, giải nén và up lên folder plugins theo đường dẫn /wp-content/plugins/. Hoặc các bạn có thể và menu plugins > Add New > gõ vào tìm kiếm WP PageNavi và chọn cài đặt plugins này trong danh sách kết quả tìm kiếm.

Sau khi cài đặt, vào menu plugins để activate plugin này.

Sử dụng WP PageNavi

Đối với các Themes thông thường

Để sử dụng, bạn tìm đoạn code này trong themes của bạn (nằm trong file loop.php đối với themes twentyten):

<?php if ( $wp_query->max_num_pages > 1 ) : 
	?>
	<div id="nav-above" class="navigation">
		<div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">←</span> Older posts', 'twentyten' ) ); ?></div>
		<div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">→</span>', 'twentyten' ) ); ?></div>
	</div><!-- #nav-above -->
<?php endif; ?>

Và thay thế bằng code sau:

<?php if ( $wp_query->max_num_pages > 1 ) : ?>
		<div id="nav-above" class="navigation">
		<?php if(function_exists('wp_pagenavi')) {
	        wp_pagenavi();}
			else {?>
			<div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">←</span> Older posts', 'twentyten' ) ); ?></div>
			<div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">→</span>', 'twentyten' ) ); ?></div>
		<?php } ?>
		</div><!-- #nav-above -->
<?php endif; ?>

Đối với Genesis Theme

Với những bạn sử dụng theme Genesis, bạn sẽ chỉnh sữa file post.php trong folder structure theo đường dẫn genesis\lib\structure\. Bạn tìm đoạn code:

function genesis_older_newer_posts_nav() {

	$older_link = get_next_posts_link( apply_filters( 'genesis_older_link_text', g_ent( '« ' ) . __( 'Older Posts', 'genesis' ) ) );
	$newer_link = get_previous_posts_link( apply_filters( 'genesis_newer_link_text', __( 'Newer Posts', 'genesis' ) . g_ent( ' »' ) ) );

	$older = $older_link ? '<div class="alignleft">' . $older_link . '</div>' : '';
	$newer = $newer_link ? '<div class="alignright">' . $newer_link . '</div>' : '';

	$nav = '<div class="navigation">' . $older . $newer . '</div><!-- end .navigation -->';

	if ( $older || $newer )
		echo $nav;

}

Và thay thế bằng code:

function genesis_older_newer_posts_nav() {
	if(function_exists('wp_pagenavi'))
	 	wp_pagenavi();  
	else {
	$older_link = get_next_posts_link( apply_filters( 'genesis_older_link_text', g_ent( '« ' ) . __( 'Bài cũ hơn', 'genesis' ) ) );
	$newer_link = get_previous_posts_link( apply_filters( 'genesis_newer_link_text', __( 'Bài mới hơn', 'genesis' ) . g_ent( ' »' ) ) );

	$older = $older_link ? '<div class="alignleft">' . $older_link . '</div>' : '';
	$newer = $newer_link ? '<div class="alignright">' . $newer_link . '</div>' : '';

	$nav = '<div class="navigation">' . $older . $newer . '</div><!-- end .navigation -->';

	if ( $older || $newer )
		echo $nav;
	}
}

Thực chất trong đoạn code trên, ta chỉ thêm vào điều kiện nếu có cài đặt WP PageNavi thì sẽ sử dụng hàm wp_pagenavi() còn nếu không thì sẽ sử dụng theo kiểu mặc định.

Đối với Genesis ChildTheme

Hoặc nếu các bạn sử dụng một Child Theme cho Genesis, các bạn chỉ cần mở file funstion.php trong childtheme ra và thêm vào đoạn code sau:

remove_action( 'genesis_after_endwhile', 'genesis_posts_nav' );
add_action('genesis_after_endwhile','rayno_posts_nav');
function  rayno_posts_nav(){
	if(function_exists('wp_pagenavi'))
	 	wp_pagenavi();  
	else {
		genesis_older_newer_posts_nav();
}}

Lựa chọn style cho WP PageNavi

Mặc định style của WP PageNavi không đẹp, bạn có thể chỉnh sửa một chút để nó đẹp hơn. Để làm việc này, bạn có hai cách:

1. Chỉnh sửa file pagenavi-css.css

Bạn mở file pagenavi-css.css trong folder wp-pagenavi, thây thế toàn bộ nội dung file này bằng code css sau:

/* CSS Document */
.wp-pagenavi { 
	padding: 20px; 
	display:block; 
	clear:both;
	font-size: 14px;}
.wp-pagenavi a, .wp-pagenavi a:link { 
	padding: 11px 15px 11px 15px !important; 
	margin: 2px !important; 
	text-decoration: none !important; 
	border:1px solid #666666 !important; 
	color: #FF0000 !important; 
	background:url(images/pagination-bg.png) repeat-x !important; 
	font-weight: bold !important; }
.wp-pagenavi span.pages { 
	padding: 11px 15px 11px 15px !important; 
	margin: 2px !important ; 
	border: none !important; 
	color: #333333 !important; 
	background: none !important;
	font-weight: bold; }
.wp-pagenavi span.current, .wp-pagenavi span.extend, .wp-pagenavi a:active, .wp-pagenavi a:hover { 
	padding: 11px 15px 11px 15px !important; 
	margin: 2px; 
	font-weight: bold; 
	background:url(images/pagination-bg.png) repeat-x !important; 
	border:1px solid #333333 !important; 
	color:#8c9c9c !important; }
.wp-pagenavi a, .wp-pagenavi a:link, .wp-pagenavi span.current, .wp-pagenavi span.extend, .wp-pagenavi a:active { 
	-moz-border-radius: 50%; 
	-webkit-border-radius: 50%; 
	border-radius: 50%; }
.wp-pagenavi a:hover { 
	color: #000 !important; }

Bạn có thể chỉnh sửa lại cho phù hợp với blog của mình.

2. Sử dụng plugin  WP PageNavi Style để bổ sung style

Bạn có thể tải plugin này tại đây. Tiến hành cài đặt và activate. Sau khi activate, trong danh sách menu sẽ có thêm mục PageNavi Style. Bạn vào mục này để lựa chọn cho mình một style vừa ý.

pw pagenavi style

Nếu không thích các style được cung cấp sẵn, trong mục Select StyleSheet, bạn chọn Custom để tự thiết kế một style phù hợp.

Cảm ơn bạn đã đọc bài viết!

Phân trang đẹp cho blog WordPress bằng plugin WP PageNavi
4.44 (88.89%) 18 votes

Tìm trên Google
  • phân trang trong wordpress
  • phân trang wordpress
  • plugin phân trang cho wordpress
  • plugin phan trang trong wordpress

Chú ý - WordPress Hosting 1$/tháng - miễn phí tên miền

Bạn có biết GoDaddy đang có khuyến mãi WordPress hosting chỉ còn 1$/tháng kèm theo một tên miền .COM .NET .ORG miễn phí. Hãy đăng ký ngay để tiết kiệm chi phí nhất nhé.
Xem ngay

ĐĂNG KÝ NHẬN TIN QUA EMAIL

Nếu thấy bài viết trên blog có ích cho bạn, hãy đăng ký nhận tin qua email để cập nhật bài viết mới nhanh nhất và thỉnh thoảng nhận quà bất ngờ!

Comments

  1. Phạm Tấn Đạt says:

    Nhưng dùng nó sao anh ! {c26}

  2. Phạm Tấn Đạt says:

    Không phải anh ơi ! {c14} Ý em hỏi về cách sử dụng để phân trang kìa ! {c15} Em có dùng mà không thấy nó phân trang ! {c26}

    • Bán sử dụng cho trang mega-blog hả? Hình như trang của bạn chử đủ bài viết để phân trang mà

      • Phạm Tấn Đạt says:

        Khoảng mấy bài nó mới phân trang vậy anh !

      • Nhiều hơn số bài bạn chọn hiển thị trên trang chủ. Bạn có thể vào settings -> reading chỉnh số bài này

        • Phạm Tấn Đạt says:

          Wow ! {c33} Em đã phân trang thành công rồi ! {c21} Cảm ơn anh nhé ! {c1}

          • Phạm Tấn Đạt says:

            Nhân tiện để cảm ơn anh {c1} , em muốn hỏi anh có muốn cần thêm phần mềm hay game ..etc.. không ? Nếu anh cần anh có thể qua trang me-blog.besaba.com của em để tải ! ( Nhưng vì blog mới được tạo nên vẫn còn hạn chế về số lượng bài viết )

    • Ko có gì đâu, sẽ ghé thăm blog của bạn {c27}

      • Phạm Tấn Đạt says:

        Thanks anh nhé ! Mặt dù nó vẫn chưa hoàn thành ! Nhưng ít ra vẫn có gì đó cho anh để cám ơn !

  3. mình cần nhờ bạn về theme genesic . mình ko tìm thấy background khi cài child . bạn giúp nhé

    • Bạn tìm trong file functions.php xem có đoạn code này chưa:

      add_custom_background();

      Nếu có rồi thì thôi còn chưa có thì thêm vào. Sau đó vào Appearance ->background rồi chọn Background Color là được.

  4. Mình phân trang nhưng sao bấm vào trang nào nó cũng chỉ ra trang mới nhất nhỉ
    http://hyt4ever.com

  5. Thank bạn nhiều

  6. trần văn cường says:

    bác có thể hướng dẫn cách làm đối với themes Twenty Twelve vì nó không có file loop.php

  7. Mình tưởng chỉ add cái Plugin này vào là dùng được thôi chứ

  8. Plugin này thường hiển thị ko ổn định được ngay fai sửa nhiều với các theme khác nhau, mình tìm được cái Page Navi Slider thay thế cũng rất ổn mà khả năng tuỳ biến cao.

  9. Cảm ơn bạn đã hướng dẫn.
    Nhưng cho mình hỏi thêm chút. Mình đang muốn phân trang cho Blog mà không cần dùng Plugin. Mình không muốn dùng nhiều Plugin quá.

    Cảm ơn bạn nhiều.! {c2}

  10. Mien Tay says:

    Cảm ơn bạn đã hướng dẫn. {c27}

  11. Bác có bài viết nào nói về phân loại theme không nhỉ. Em dùng theme Green Chilli mà chả biết nó là loại nào để cài plugin này nữa

  12. Cái này mình mới up, chưa có nhiều tính năng lắm, sẽ bổ sung vào các phiên bản sau, mọi người dùng thử nhé:

    http://wordpress.org/plugins/sb-paginate/

  13. Mình sử dụng theme http://www.s5themes.com/theme/journalcrunch/

    Cho mình hỏi cách phân trang ở theme này nhé. Mình đã thêm code remove_action( ‘genesis_after_endwhile’, ‘genesis_posts_nav’ );
    add_action(‘genesis_after_endwhile’,’rayno_posts_nav’);
    function rayno_posts_nav(){
    if(function_exists(‘wp_pagenavi’))
    wp_pagenavi();
    else {
    genesis_older_newer_posts_nav();
    }}

    vào function.php nhưng không đc. Mình đã cài plugin wp pagenavi cũng ko đc.

    Mình cài trên localhost

    Thanks!

  14. Mình ko biết thế nào là theme genesis nữa cả. Mình sử dụng các theme khác trên wordpress.org rồi sử dụng plugin wp pagenavi ko thấy phân trang j cả? Vậy phải làm sao bạn?

Gửi bình luận

Lưu ý: Không sử dụng keyword để thay cho tên của bạn, hãy sử dụng tên thật. Cảm ơn bạn đã tham gia bình luận trên blog!