Previous and next post wordpress có nhiệm vụ hiển thị bài viết trước đây và bài viết mới hơn trên blog. Hầu như mọi nền tảng đều có code để hiển thị Prev / Next Post Navigation. Tuy nhiên để tùy chỉnh theo ý thích thì không phải nền tảng nào cũng hỗ trợ chẵng hạn như blogspot sẽ khó tùy chỉnh “Next Post” and “Previous Post” button theo ý muốn.
Trong bài viết này chúng ta sẽ cùng nhau tùy chỉnh Prev / Next Post Navigation theo ý của mình cho các blog làm từ nền tảng WP.
Hướng dẫn cơ bản tùy chỉnh previous and next post trong wordpress
Next post và Previous post trong cùng category
Nếu sử dụng đoạn code bên dưới các Navigation button Prev / Next Post sẽ lấy các bài viết trong cùng một chuyên mục để hiện thị.
Bạn có thể thay Previous in category và Next post in category bằng chữ hiển thị mà bạn mong muốn.
<div class="previous-post"><?php previous_post_link( '%link', __( 'Previous in category', 'textdomain' ), true ); ?></div>
<div class="next-post"><?php next_post_link( '%link', __( 'Next post in category', 'textdomain' ), true ); ?></div>Nếu bạn muốn hiển thị tiêu đề bài viết trong cùng một chuyên mục cho previous and next post wordpress thì chèn đoạn code:
<div class="previous-post"><?php previous_post_link( '%link', '%title', __( 'Previous in category', 'textdomain' ), true ); ?> </div>
<div class="next-post">
<?php next_post_link( '%link', '%title', __( 'Next post in category', 'textdomain' ), true ); ?>
</div>
Nếu bạn không muốn hiện bài viết mới hơn và bài viết cũ hơn trong một category nào đó, thì thêm id của chuyên mục đó vào sau true là ok:
<div class="previous-post"><?php previous_post_link( '%link', '%title', __( 'Previous in category', 'textdomain' ), true , '13' ); ?> </div>
<div class="next-post">
<?php next_post_link( '%link', '%title', __( 'Next post in category', 'textdomain' ), true , '13' ); ?>
</div>Ví dụ ở trên là category mình chặn có ID là 13.
Nếu bạn muốn tùy chỉnh previous and next post wordpress cùng chuyên mục và cùng một kiểu định dạng bài viết post_format (Post Attributes) thì thêm ‘post_format’ vào sau true :
<div class="previous-post"><?php previous_post_link( '%link', '%title', __( 'Previous in category', 'textdomain' ), true , 'post_format' ); ?> </div>
<div class="next-post">
<?php next_post_link( '%link', '%title', __( 'Next post in category', 'textdomain' ), true , 'post_format' ); ?>
</div>Chèn next và previous vào trang bài viết cho WordPress
Nếu bạn chỉ cần chèn next và previous vào trang bài viết cho WordPress và nó sẽ hiển thị bài viết gần nhất mới hơn và cũ hơn trong toàn bộ blog thì sử dụng đoạn code sau:
<div class="previous-post"><?php previous_post_link(); ?></div>
<div class="next-post">
<?php next_post_link(); ?></div>Hoặc code sau:
<div style="text-align:center;">
<?php posts_nav_link( ' · ', 'previous page', 'next page' ); ?>
</div>Hai đoạn code này đều dùng để điều hướng liên kết đến các bài viết trang trước và sau.
Nếu bạn muốn hiển thị tiêu đề cho thanh điều hướng next & previous post wordpress thì dùng code sau:
<div class="previous-post"><?php previous_post_link( '« %link', '%title', true ); ?></div>
|
<div class="next-post"><?php next_post_link( '%link »', '%title', true ); ?></div>Tuy nhiên đặt liên kết bằng next & previous post giúp người đọc dễ dàng chuyển đổi các bài viết hơn hầu như đều được code ở hầu hết các them, nếu chưa có hãy tìm thử phần tùy chỉnh trong them trước khi chèn thêm code vào.
Viết CSS làm đẹp previous post và next post bài viết wordpress. Nếu các bạn dùng các đoạn code ở phía trên thì thêm css này vào nhé.
.previous-post, .next-post {
color: #fff;
background-color: #c9d4de;
text-align: center;
height: 34px;
line-height: 34px;
font-size: 14px;
border: 1px solid;
padding: 0 20px;
margin-bottom: 30px;
text-transform: uppercase;
border-radius: 4px;
font-weight: bold;
}Tắt hay xóa previous and next post trong wordpress
Để xóa previous and next post trong wordpress các bạn có thể dùng css hoặc tìm đoạn code đó trong them xóa đi.
CSS xóa Previous Post, Next Post.
.navigation.pagination { display: none; }Lưu ý: Đoạn code trên có thể không đúng với theme bạn đang dùng, nhưng đây là thẻ div hay được đặt cho Previous Post, Next Post nhất.
Next and previous cho trang page
Nếu bạn cần điều hướng các trang page cũ hơn và mới hơn cho wordpress thì hãy sử dụng code bên dưới chèn vào page.php hoặc single-page.php. Code được chia sẻ bởi hostpapasupport.
<?php
$pagelist = get_pages('sort_column=menu_order&sort_order=asc');
$pages = array();
foreach ($pagelist as $page) {
$pages[] += $page->ID;
}
$current = array_search(get_the_ID(), $pages);
$prevID = $pages[$current-1];
$nextID = $pages[$current+1];
?>
<div class="navigation">
<?php if (!empty($prevID)) { ?>
<div class="alignleft">
<a href="<?php echo get_permalink($prevID); ?>"
title="<?php echo get_the_title($prevID); ?>">Previous</a>
</div>
<?php }
if (!empty($nextID)) { ?>
<div class="alignright">
<a href="<?php echo get_permalink($nextID); ?>"
title="<?php echo get_the_title($nextID); ?>">Next</a>
</div>
<?php } ?>
</div><!-- .navigation -->Nếu các bạn cần có thể tham khảo thêm previous_post_link() và next_post_link() ở trang chính thức của WP.
