XEM NGAY

Bài viết mới

Code WordPress phân trang không dùng plug-in

Đoàn Long | 5 April, 2015 - 8035 Lượt xem

Doanduylong.com – Code WordPress phân trang không dùng plug-in. Có rất nhiều plug-in trong thư viện của WordPress giúp bạn có thể làm việc phân trang một chuyên mục hoặc 1 trang chủ.

Code WordPress phân trang không dùng plug-in

Thường các webmaster sử dụng plug-in Wp-pagenavi để dễ dàng phân trang mà không cần đụng đến code; Nhưng với tính cách của mỗi coder, cách sử dụng code không dùng plug-in là chuyện rất dễ hiểu. Coder có thể tùy biến hoặc chỉnh sửa theo ý mình mà không bị gò bó theo khuôn mẫu mà nhà phát triển ứng dụng wordpress đưa ra. Cách sử dụng code WordPress phân trang không dùng plug-in có thể là một cách làm tốt cho những ai muốn tìm hiểu sâu hơn về tính năng, cấu trúc hoạt động của WordPress.

Vinatech sẽ hướng dẫn bạn cách sử dụng code WordPress phân trang không dùng plug-in.

Thường thì mình thấy nhiều website có thể phân trang ở file index.php (Trang chủ) hoặc archive.php (Trang chuyên mục) ở trong đoạn code dưới đây bạn có thể đặt ở vị trí bạn muốn hiển thị phân trang:

<nav id="navigation">
<div class="wp-pagenavi">
<?php
global $wp_query;
 
$big = 999999999; // code doanduylong.com
 
echo paginate_links( array(
    'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
    'format' => '?paged=%#%',
        'prev_text'    => __('« Mới hơn'),
    'next_text'    => __('Tiếp theo »'),
    'current' => max( 1, get_query_var('paged') ),
    'total' => $wp_query->max_num_pages
) );
?>
<div class="clear"></div>
</div>
</nav>

Khi bạn đã gán code vào vị trí cần hiển thị,nó sẽ rất thô và có thể không nằm đúng chỗ mà bạn quy định nhưng không sao, sau đây là một bước rất quan trong giúp bạn có thể làm đẹp những nút chuyển trang bằng cách gán đoạn css dưới đây vào file style.css hoặc một file .css bất kỳ:

#navigation {margin-bottom:10px;padding: 0 20px; line-height: 46px; text-align: center; }
#navigation a {padding:5px 20px; margin: 0 3px ; font-weight: bold; background:#fff; color:#333; border:1px solid #d1d1d1;
   /* optional rounded corners for browsers that support it */
  -moz-border-radius: 5px;
  -khtml-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
#navigation a:hover {background:#F5AE42; color:#fff; border:1px solid #aaa;}
 
#navigation  span.current {padding:5px 20px; margin: 0 5px ; font-weight: bold; background:#F5AE42; color:#fff; border:1px solid #d1d1d1;
   /* optional rounded corners for browsers that support it */
  -moz-border-radius: 5px;
  -khtml-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  }

Với hai thao tác sao chép và dán code bên trên bạn đã có được chức năng phân trang trên website như bạn mong muốn. Mọi thắc mắc các bạn có thể comment ở bên dưới mình sẽ giúp bạn hoàn thiện hơn.

Chúc bạn thành công!

DOANDUYLONG.COM

Bình luận trên Facebook