Plugin WP-PageNavi là rất đơn giản, và cực kỳ tốt nếu các bạn muốn phân trang cho WordPress. Tuy nhiên không hẳn ai cũng thích các trình cắm Plugin vì nhiều lý do. Ví dụ như mình, chỉ thích lấy code rồi bỏ vào chứ rất ít khi sử dụng các trình cắm. Đó là 1 cách tập làm quen với cấu trúc WordPress và làm chủ WordPress dễ hàng hơn.
Hôm nay mình chia sẻ với các bạn thủ thuật WordPress là một đoạn code để các bạn có thể phân trang cho WordPress mà không cần dùng thêm bất cứ Plugin nào khác.
Khi sử dụng Plugin thường WordPress sẽ nặng nề hơn, và các bạn bị phụ thuộc vào việc cập nhật plugin của tác giả.
Đầu tiên các bạn mở tệp index.php hoặc archive.php hoặc bất kỳ tệp nào, có phần các bạn cần phân trang. Như ở đây của mình hướng dẫn các bạn để trong tệp archive.php
Các bạn có thể xem hình như bên dưới, chú ý vào các mũi tên.
Đây là đoạn code mình sử dụng để phân trang WordPress
[code]
<nav id="navigation">
<div class="wp-pagenavi">
<?php
global $wp_query;
$big = 999999999; // code Theson.net
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>
[/code]
Các bạn có thể thay từ Mới hơn hoặc Tiếp theo tùy vào sở thích của các bạn. Đoạn code trên là code chuẩn được WordPress cung cấp nên các bạn hoàn toàn có thể yên tâm về đoạn code phân trang WordPress này nhé
Các bạn lưu ý mình sử dụng html 5 nên mình dùng theo thẻ <nav></nav> các bạn dùng html thường thì có thể thay bằng thẻ <div></div> cho đồng bộ theo themes của các bạn nhé.
Theo xu hướng các bạn nên thiết kế theme WordPress bằng html 5 vì việc viết theme khá dễ và html 5 hỗ trợ smartphone tốt hơn
Với các bạn có thể code css thì việc thay đổi id hay class theo ý các bạn là được. Còn các bạn muốn “ăn luôn”, thì có thể sử dụng đoạn code hiện tại mình đang sử dụng nhé.
Đoạn css để hiển thị phân trang WordPress đẹp hơn
[code]
#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;
}
[/code]
Về phần css các bạn có thể chỉnh lại đẹp hơn theo ý của các bạn. Điều đó là rất tuyệt vời. Nếu có 1 đoạn css nào đẹp hơn thì nhớ để lại ở phần comment nhé bạn. Mình sẽ thấy rất vui vì điều đó.
Như vậy là hoàn thành bài viết, chúc các bạn một ngày nghỉ cuối tuần vui vẻ nhé! Hãy ghé thăm web của mình thường xuyên để nhận những thủ thuật WordPress hay nhé. Liên tục cập nhật mà 🙂