Hướng dẫn phân trang gọn đẹp cho Website với plugin WP PageNavi

phan trang dep

Chào mọi người, hôm nay Tuấn Anh xin giới thiệu đến mọi người một plugin giúp bạn có thể tạo phân trang cho blog Website rất đẹp và tiện dụng của mình. Khi khách truy cập vào Website của bạn mà trên đó đã có số lượng bài viết khá nhiều, mặc định của blog Wordpres sẽ phân trang cho bạn theo kiểu như sau:

<< Older posts                      Newer posts >>

Nhìn không đẹp và không được thoải mái trường hợp bạn muốn chuyển ngay tới một trang bất kì mà bạn muốn. Bởi vậy, mình sẽ dùng đến 1 plugin có tên gọi là WP PageNavi.

Tiến hành cài đặt Plugin 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, chúng ta có thể tải WP PageNavi tại trang chủ WordPress, giải nén và up lên folder plugins theo đường dẫn /wp-content/plugins/. Hoặc người dùng hoàn toàn có thể vào mục Menu plugins (Gói mở rộng) > Add New > gõ vào mua kiếm WP PageNavi và tìm cài đặt plugins này trong danh sách kết quả chọn kiếm.
Sau khi cài đặt, vào menu plugins để activate plugin này.

Sử dụng Plugin WP PageNavi

Đối với những Themes thông thường

Để sử dụng tính năng phân trang thì thông thường chúng ta sẽ tìm đoạn code này trong themes của mình (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; ?>

Sau dó thay thế nó bằng đoạn:

<?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 ai đã sử dụng theme Genesis, chúng ta sẽ chỉnh sửa trong file post.php trong folder structure theo đường dẫn genesis\lib\structure\. Bạn hãy tìm đến đ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;
 
}

Sau dó thay thế nó với đoạn code như sau:

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 thì ở đoạn code trên, chúng ta chỉ thêm vào điều kiện if có cài đặt WP PageNavi thì sẽ sử dụng thêm thuộc tính wp_pagenavi() còn nếu không thì sẽ sử dụng theo kiểu mẫu mặc định.

Đối với Genesis ChildTheme

Tiếp tục nếu các bạn sử dụng một Child Theme dành cho Genesis, chúng ta chỉ đơn giản là mở file funstion.php trong childtheme ra rồi thêm vào đoạn code như 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 tìm style cho WP PageNavi

Mặc định style của WP PageNavi sẽ không được bắt mắt, bạn có thể chỉnh sửa một đôi chút để nó trông đẹp hơn. Để làm được việc này, bạn hãy thao tá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ế mọi 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 hoàn toàn có thể chỉnh sửa lại cho thích hợp với website WordPress của mình.

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

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

WP PageNavi

Nếu bạn không ưng ý các style đã có sẵn, trong mục Select StyleSheet, bạn hãy chọn Custom để tự design riêng cho mình một style phù hợp nhé.
Cảm ơn các bạn đã đọc bài viết này!

Bạn đang xem bài viết Hướng dẫn phân trang gọn đẹp cho Website với plugin WP PageNavi

Add Comment