Bang hộiTiền mặt: 0 Xu Trò chơiHộp quà giáng sinhThứ Sáu, 20:55:54 - 29/03/2024
Mã nguồn blog WordPress

Các điều hành viên: Mod, SMod, Admin

Hướng dẫn phân trang bài viết trong Wordpress

Hướng dẫn phân trang bài viết trong Wordpress

#1 » Gửi bài gửi bởi nghiatichxanh1992 » 05/09/2015 22:28 » @417898

- Để phân trang bài viết trong wordpress bạn chỉ cần chèn một thẻ rất ngắn như sau vào đoạn muốn ngắt (chèn ở khung soạn thảo HTML):
Mã: Chọn tất cả
<!--nextpage-->


- sau khi chèn đoạn này vào chỗ cần ngắt, bạn sẽ thấy cuối bài viết sẽ hiển thị phân trang như thế này:
Hướng dẫn phân trang bài viết trong Wordpress

- Bài viết bạn càng có nhiều thẻ nextpage thì càng có nhiều trang. Nhưng nếu sau khi bạn chèn thẻ nextpage rồi mà trong bài viết của bạn vẫn chưa hiển thị thì bạn cần chèn 1 đoạn code ngắn trong theme (file single.php hoặc content-single.php) để có thể hiển thị nó:
Mã: Chọn tất cả
<?php wp_link_pages() ?>


- Nhưng bạn có thể thấy rằng mặc định các đoạn link phân trang này không được nổi bật cho lắm, nó có thể làm cho người đọc khó nhìn thấy và càng khó hơn nếu bạn có sử dụng 1 số plugin tự chèn nội dung vào cuối bài viết như plugin tạo bài viết liên quan, GD Star Rating..v.v…Vì vậy chúng ta sẽ cần phải sử dụng CSS để trang trí nó thêm đẹp mắt và nổi bật hơn.

- Mặc định các đoạn link phân trang này đều không có class riêng trong cấu trúc HTML, như vậy nếu bạn muốn sử dụng CSS riêng cho nó thì cần phải gán cho nó một class nhất định. Bạn thử chèn đoạn code sau vào file single.php hoặc content-single.php nhé
Mã: Chọn tất cả
<?php if ( !is_page() ) : ?>
   <div class="pagelink"><?php wp_link_pages('pagelink=Page %'); ?></div>
<?php endif; ?>


- Bạn thấy đó, bây giờ các đoạn link phân trang đã có một class mang tên pagelink, bây giờ chúng ta sẽ tiến hành thêm style cho nó bằng CSS là nó sẽ nổi bật ngay thôi. Các bạn tham khảo một đoạn CSS mẫu sau đây:
Mã: Chọn tất cả
.page-link {
clear: both;
display: block;
margin: 0 0 1.625em;
}
.page-link a {
background: #eee;
color: #373737;
margin: 0;
padding: 2px 3px;
text-decoration: none;
}
.page-link a:hover {
background: #888;
color: #fff;
font-weight: bold;
}
.page-link span {
margin-right: 6px;
}


Ok, bây giờ các link phân trang của bạn đã đẹp và nổi bật hơn. Bạn có thể dùng các kiến thức CSS của mình để làm đẹp nó hơn nhé. Chúc các bạn có những bài viết thú vị nhờ áp dụng tính năng này :D

Những người đã like nghiatichxanh1992 bởi bài viết có ích này (Tổng: 3):
TamhoangdkNoBiTa01Pokemon12
Rating: 0.41%
 
nghiatichxanh1992 ✅
Hình đại diện của thành viên
Rank: ☀️2/30☀️
Cấp độ:
Tu luyện:
Like:
Online:
Bang hội: Tiếu Ngạo
Xếp hạng Bang hội: ⚡5/60⚡
Level:
Chủ đề đã tạo: 🩸4142/4142🩸
Tiền mặt:
Ngân hàng:
Nhóm:
Danh hiệu: ⚝Truyền Thuyết⚝
Giới tính:
Ngày tham gia:
Đến từ:
Thiết bị:
Số điện thoại:
(Cốc Cốc 50.0.125)


Quay về WordPress

 


  • Chủ đề tương tự
    Trả lời
    Xem
    Bài viết mới nhất