CHIASE123.COM - Diễn đàn chia sẻ kiến thức

Diễn đàn chia sẻ kiến thức
Thứ Sáu, 13:26:27 - 22/11/2024

Thời gian được tính theo giờ UTC + 7 Giờ




Tạo chủ đề mới Gửi bài trả lời  [ 1 bài viết ] 
Người gửi Nội dung
Gửi bàiĐã gửi: 05/09/2015 22:28 
Ngoại tuyến
☀️2/30☀️
☀️2/30☀️
Hình đại diện của thành viên

Ngày tham gia: 08/03/2012 10:56
Bài viết: 15
Đến từ: Hà Giang
Thiết bị: Nokia N96
Số điện thoại: 0367790762
- Để 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ã:
<!--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ã:
<?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ã:
<?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ã:
.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

_________________
Diễn đàn chia sẻ kiến thức máy tính:
KETNOI123.COM

Ấn hiện ra để xem chữ ký của mình:


Đầu trang
 Xem thông tin cá nhân Gửi Email  
 
Hiển thị những bài viết cách đây:  Sắp xếp theo  
Tạo chủ đề mới Gửi bài trả lời  [ 1 bài viết ] 

Thời gian được tính theo giờ UTC + 7 Giờ


Chủ đề tương tự
 Chủ đề   Người gửi   Trả lời   Xem   Bài viết mới nhất 
Không có bài viết chưa xem mới nào trong chủ đề này. [Theme Wordpress] Share theme wordpress Bbit phiên bản mới nhất

nghiammo1992

4

2414

31/10/2015 13:06

Mjhtriuday Xem bài viết mới nhất vừa gửi

Không có bài viết chưa xem mới nào trong chủ đề này. Hướng dẫn anh em cài WordPress Tiếng Việt

Vuonghh1998

1

1263

12/07/2017 21:12

bimbon01 Xem bài viết mới nhất vừa gửi

 


Ai đang trực tuyến?

Đang xem chuyên mục này: Không có thành viên nào đang trực tuyến1 khách


Bạn không thể tạo chủ đề mới trong chuyên mục này.
Bạn không thể trả lời bài viết trong chuyên mục này.
Bạn không thể sửa những bài viết của mình trong chuyên mục này.
Bạn không thể xoá những bài viết của mình trong chuyên mục này.

Tìm kiếm với từ khoá:
Chuyển đến:  
Đã tích hợp phpBB® Forum Software © phpBB Group
Vietnamese language pack for phpBB 3.0.x download and support.
CHIASE123.COM - Diễn đàn chia sẻ kiến thức