Sự kiện

Tạo phân trang bằng số thứ tự trong trang WordPress

Danh mục: Wordpress
 

Thông thường, khi chúng ta sử dụng những template có sẵn ở bên ngoài, thì việc phân trang đã được đánh số thứ tự bằng các con số hẳn hoi. Tuy nhiên, không phải theme nào cũng hỗ trợ tính năng này, nhất là khi các bạn sử dụng các blank theme để tự tay tạo theme cho trang WordPress của mình.

paging, phân trang WordPress, Hacks, phân trang, WordPress

Ngoài ra các bạn cũng có thể sử dụng plugin cho việc đánh số thứ tự phân trang, nhưng sẽ tốt hơn nếu chúng ta tự tay làm, vì nó cũng không phải là cái gì quá to tát hay quá khó. Các bạn chỉ cần việc copy đoạn code bên dưới và dán nó vào file functions.php.

<?php

function numbered_pagination(){

    global $wp_query;

    $big = 99999999;

    echo paginate_links(array(

        'base' => str_replace($big, '%#%', get_pagenum_link($big)),

        'format' => '?paged=%#%',

        'total' => $wp_query->max_num_pages,

        'current' => max(1, get_query_var('paged')),

        'show_all' => false,

        'end_size' => 2,

        'mid_size' => 3,

        'prev_next' => true,

        'prev_text' => 'Prev',

        'next_text' => 'Next',

        'type' => 'list'

    ));

}

?>

Kế tiếp, các bạn copy đoạn css bên dưới vào file style.css trong folder theme mà các bạn đang dùng.

ul.page-numbers {

  list-style: none;

  margin: 1em auto;

  padding: 0;

  text-align: center;

  color: #555555;

  text-transform: uppercase;

  font-size: 90%;

}

ul.page-numbers li {

  display: inline;

}

ul.page-numbers a.page-numbers {

  -webkit-border-radius: 3px;

  -moz-border-radius: 3px;

  -o-border-radius: 3px;

  border-radius: 3px;

  -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);

  -moz-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);

  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);

  background-color: #676767;

  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f9f9f9), color-stop(100%, #eaeaea));

  background-image: -webkit-linear-gradient(#f9f9f9, #eaeaea);

  background-image: -moz-linear-gradient(#f9f9f9, #eaeaea);

  background-image: -o-linear-gradient(#f9f9f9, #eaeaea);

  background-image: linear-gradient(#f9f9f9, #eaeaea);

  margin: 2px;

  padding: 5px 10px;

  display: inline-block;

  border-top: 1px solid #fff;

  text-decoration: none !important;

  color: #555555 !important;

  font-size: smaller !important;

  text-shadow: white 0 1px 0;

}

ul.page-numbers a.page-numbers:first-child, ul.page-numbers a.page-numbers.first {

  margin-left: 0;

}

ul.page-numbers a.page-numbers:last-child, ul.page-numbers a.page-numbers.last {

  margin-right: 0;

}

ul.page-numbers a.page-numbers:hover, ul.page-numbers a.page-numbers:focus {

  color: #333333;

  border-color: #fff;

  background-color: #fdfdfd;

  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fefefe), color-stop(100%, #fafafa));

  background-image: -webkit-linear-gradient(#fefefe, #fafafa);

  background-image: -moz-linear-gradient(#fefefe, #fafafa);

  background-image: -o-linear-gradient(#fefefe, #fafafa);

  background-image: linear-gradient(#fefefe, #fafafa);

}

ul.page-numbers a.page-numbers.more {

  -webkit-box-shadow: none;

  -moz-box-shadow: none;

  box-shadow: none;

  border: 0 none !important;

  background: transparent !important;

  margin-left: 0;

  margin-right: 0;

}

ul.page-numbers a.page-numbers.active {

  -webkit-box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.75);

  -moz-box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.75);

  box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.75);

  border-color: #505050 !important;

  color: #f2f2f2 !important;

  text-shadow: black 0 1px 0;

  background-color: #676767;

  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5f5f5f), color-stop(100%, #5c5c5c));

  background-image: -webkit-linear-gradient(#5f5f5f, #5c5c5c);

  background-image: -moz-linear-gradient(#5f5f5f, #5c5c5c);

  background-image: -o-linear-gradient(#5f5f5f, #5c5c5c);

  background-image: linear-gradient(#5f5f5f, #5c5c5c);

}

ul.page-numbers .prev:before {

  content: "\2039";

  padding-right: 0.5em;

}

ul.page-numbers .next:after {

  content: "\203A";

  padding-left: 0.5em;

}

ul.page-numbers .dots {

  -webkit-box-shadow: none;

  -moz-box-shadow: none;

  box-shadow: none;

  border: 0 none !important;

  background: transparent !important;

  color: #999999 !important;

  margin-left: 0.25em;

  margin-right: 0.25em;

}

ul.page-numbers .current {

  -webkit-border-radius: 3px;

  -moz-border-radius: 3px;

  -o-border-radius: 3px;

  border-radius: 3px;

  -webkit-box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.75);

  -moz-box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.75);

  box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.75);

  background-color: #676767;

  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5f5f5f), color-stop(100%, #5c5c5c));

  background-image: -webkit-linear-gradient(#5f5f5f, #5c5c5c);

  background-image: -moz-linear-gradient(#5f5f5f, #5c5c5c);

  background-image: -o-linear-gradient(#5f5f5f, #5c5c5c);

  background-image: linear-gradient(#5f5f5f, #5c5c5c);

  margin: 2px;

  padding: 5px 10px;

  display: inline-block;

  border-top: 1px solid #fff;

  text-decoration: none !important;

  font-size: smaller !important;

  border-color: #505050 !important;

  color: #f2f2f2 !important;

  text-shadow: black 0 1px 0;

}

Và bây giờ , các bạn chỉ việc dán đoạn code <?php numbered_pagination(); ?> vào bất kì file nào trong theme mà các bạn muốn hiển thị phân trang là được.

 



BÀI VIẾT KHÁC
CODE GỢI Ý
BÌNH LUẬN

BẢN QUYỀN ®
MANGUON.COM đã đăng kí quyền tác giả: AR1682/GP-STTTP
Mọi chia sẻ nội dung thuộc tác quyền của MANGUON.COM phải ghi rõ "Nguồn MANGUON.COM"