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

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?

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!

Mẫu website nổi bật của tôi

Dự án website bán laptop surface

Mẫu website bán thiết bị nhà bếp, nhà tắm, thiết bị vệ sinh tuyệt đẹp

Mẫu website bán hàng giống shopee

Mẫu website bán đồ gỗ, đồ thờ, đồ phòng thủy