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ó 4847 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é.

Để duy trì blog nên mình có làm aff cho 1 số bên hosting. Nhưng dù aff mình cũng chọn 1 số nhà cung cấp uy tín về chất lượng và support nên các bạn cứ yên tâm nhé.

Nếu có mua hosting mà có trong list dưới đây các bạn click vào link trước khi mua để ủng hộ mình nhé. Mình cảm ơn nhiều

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