Thêm nút next và previous vào trang single WordPress

Cập nhật lần cuối 22/04/2015 by trong WordPress vào 15/04/2015 có 4364 Views

Khi các bạn viết blog thì nút chuyển sang bài khác rất hữu ít và tiện dụng. Vậy làm sao để chèn nó vào?

them_nut_next_previous_vao_single_wp

Cách này dùng cho bạn nào tự viết theme nhé.

Chèn nút next và previous

Trước hết bạn chèn đoạn code sau vào file single.php trong vòng loop nhé.

<nav class="nav-single">
 <span class="nav-previous">
 <?php previous_post_link( '%link', '<span class="meta-nav">' . _x( '&larr; PREVIOUS', 'Previous post link', '' ) . '</span> %title' ); ?>
 </span>
 <span class="nav-next">
 <?php next_post_link( '%link', '<span class="meta-nav">' . _x( 'NEXT &rarr;', 'Next post link', '' ) . '</span> %title' ); ?>
 </span>
 </nav><!-- .nav-single -->

Thế là đã được rồi đó.

Style cho đẹp

Bước này làm thêm thôi. bạn style sao cho đẹp là dc. Như hình thì mình style như sau 🙂

.nav-single {
 width: 100%;
 border-top: 1px solid rgba(97, 8, 8, 0.2);
 padding-top: 20px;
 margin: 20px 0;
}
.nav-single:after{
 display: table;
 content: "";
 clear: both;
}
.nav-single .nav-previous,
.nav-single .nav-next{
 width: 50%;
 float: left;
 position: relative;
 padding-right: 15px;
}
.nav-single .nav-next{
 text-align: right;
 float: right;
 padding:0 0 0 15px;
}
.nav-single span,
.nav-single a{
 display: block;
}
.nav-single a{
 color: #0b1c5f;
}
.nav-single a:hover{
 color: #610808;
}
.nav-single a span{
 font-weight: 700;
}

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

 

4.7/5 - (4 votes)
  • Bình luận
Sản phẩm nổi bật của Toản
x