Tạo link phân trang trong WordPress mà không cần đến plugin là một kỹ thuật được nhiều lập trình viên và quản trị viên website ưa chuộng. Việc này không chỉ giúp giảm tải cho website, tăng tốc độ mà còn cho phép bạn toàn quyền tùy biến giao diện, đồng thời là một yếu tố quan trọng trong việc tối ưu phân trang trong SEO.
Nhiều người thường tìm đến các plugin như WP-PageNavi vì sự tiện lợi, nhưng việc giảm bớt plugin không cần thiết luôn là một lựa chọn thông minh. Trong bài viết này, Thiết kế WordPress sẽ hướng dẫn bạn 2 cách tạo phân trang thủ công bằng code, từ cơ bản đến nâng cao, được cập nhật cho phiên bản WordPress mới nhất.
Tại Sao Nên Tạo Phân Trang WordPress Thủ Công?
Trước khi đi vào phần kỹ thuật, hãy cùng tìm hiểu lý do tại sao bạn nên cân nhắc việc tự code chức năng phân trang:
- Tăng Tốc Độ Tải Trang: Mỗi plugin được cài đặt đều thêm các file CSS, JS và các truy vấn cơ sở dữ liệu, có thể làm website chậm đi. Loại bỏ plugin phân trang giúp website nhẹ và nhanh hơn.
- Bảo Mật Tốt Hơn: Giảm thiểu số lượng plugin đồng nghĩa với việc giảm thiểu các lỗ hổng bảo mật tiềm ẩn từ code của bên thứ ba.
- Toàn Quyền Tùy Biến: Bạn có thể tùy chỉnh cấu trúc HTML và CSS của thanh phân trang một cách chính xác theo thiết kế của theme mà không bị giới hạn bởi các tùy chọn của plugin.
- Học Hỏi Thêm: Đây là cơ hội tuyệt vời để hiểu sâu hơn về cách WordPress hoạt động và cải thiện kỹ năng lập trình của bạn.
2 Cách Tạo Link Phân Trang WordPress Không Dùng Plugin
Dưới đây là hai phương pháp hiệu quả bạn có thể áp dụng ngay, phù hợp với cả người mới bắt đầu và người dùng nâng cao.
Cách 1: Sử Dụng Hàm the_posts_pagination() (Khuyến Nghị)
Đây là cách đơn giản, nhanh chóng và được WordPress khuyến nghị nhất. Hàm the_posts_pagination() đã được tích hợp sẵn từ phiên bản WordPress 4.1, giúp tạo ra một hệ thống phân trang chuẩn SEO và dễ dàng tùy biến.
Bước 1: Chèn hàm vào Theme
Bạn cần xác định vị trí muốn hiển thị thanh phân trang trong các file template của theme (thường là sau vòng lặp while(have_posts()) và trước endwhile;). Các file thường chỉnh sửa là:
index.phparchive.phpcategory.phptag.phpsearch.php
Mở file tương ứng và dán đoạn code sau vào vị trí mong muốn:
<?php
the_posts_pagination( array(
'mid_size' => 2,
'prev_text' => __( '« Trang trước', 'textdomain' ),
'next_text' => __( 'Trang sau »', 'textdomain' ),
) );
?>
Bước 2: Tùy chỉnh CSS (Tùy chọn)
WordPress sẽ tự động tạo ra các class CSS rất tiện lợi. Bạn chỉ cần thêm đoạn CSS sau vào file style.css của theme và chỉnh sửa màu sắc, kích thước cho phù hợp.
.pagination .nav-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin-top: 2rem;
}
.pagination .page-numbers {
display: inline-block;
padding: 8px 15px;
border: 1px solid #ddd;
border-radius: 4px;
color: #337ab7;
text-decoration: none;
transition: background-color .3s, color .3s;
}
.pagination .page-numbers:hover {
background-color: #f5f5f5;
}
.pagination .page-numbers.current {
background-color: #337ab7;
color: #fff;
border-color: #337ab7;
cursor: default;
}
.pagination .dots {
padding: 8px 10px;
}
Cách 2: Xây Dựng Hàm Phân Trang Tùy Chỉnh (Nâng Cao)
Nếu bạn cần một cấu trúc HTML hoàn toàn khác biệt mà the_posts_pagination() không đáp ứng được, bạn có thể tự xây dựng hàm riêng. Đây là phiên bản nâng cấp và tối ưu của đoạn code trong bài viết cũ.
Bước 1: Thêm hàm vào functions.php
Sao chép và dán đoạn code sau vào cuối file functions.php của theme (hoặc child theme của bạn):
function custom_page_navigation() {
if ( is_singular() ) {
return;
}
global $wp_query;
// Dừng nếu chỉ có 1 trang
if ( $wp_query->max_num_pages <= 1 ) {
return;
}
$paged = get_query_var( 'paged' ) ? absint( get_query_var( 'paged' ) ) : 1;
$max = intval( $wp_query->max_num_pages );
// Bắt đầu output
echo '<nav class="custom-pagination">';
// Link về trang đầu và trang trước
if ( $paged > 1 ) {
echo '<a class="page-link prev" href="' . get_pagenum_link( $paged - 1 ) . '">Trang trước</a>';
}
// Hiển thị các số trang
for ( $i = 1; $i <= $max; $i++ ) {
if ( $i == $paged ) {
echo '<span class="page-link current">' . $i . '</span>';
} else {
echo '<a class="page-link" href="' . get_pagenum_link( $i ) . '">' . $i . '</a>';
}
}
// Link đến trang sau và trang cuối
if ( $paged < $max ) {
echo '<a class="page-link next" href="' . get_pagenum_link( $paged + 1 ) . '">Trang sau</a>';
}
echo '</nav>';
}
Bước 2: Gọi hàm trong file Template
Tương tự cách 1, bạn chèn đoạn code sau vào các file template như index.php, archive.php…
<?php custom_page_navigation(); ?>
Bước 3: Thêm CSS cho giao diện
Thêm đoạn CSS này vào file style.css để định dạng cho thanh phân trang mới:
.custom-pagination {
display: flex;
justify-content: center;
align-items: center;
margin-top: 30px;
font-family: Arial, sans-serif;
}
.custom-pagination .page-link {
color: #6FB7E9;
padding: 10px 15px;
margin: 0 4px;
text-decoration: none;
border: 1px solid #ddd;
border-radius: 5px;
transition: all 0.3s ease;
}
.custom-pagination .page-link:hover {
background-color: #3C8DC5;
color: #fff;
border-color: #3C8DC5;
}
.custom-pagination .current {
background-color: #3C8DC5;
color: #fff;
border-color: #3C8DC5;
cursor: default;
}
Tối Ưu Phân Trang Trong SEO: Những Điều Cần Biết
Việc tạo link phân trang không chỉ giúp người dùng điều hướng mà còn ảnh hưởng trực tiếp đến SEO. WordPress đã xử lý khá tốt các vấn đề này, nhưng bạn vẫn cần lưu ý:
- Thu thập dữ liệu (Crawling): Phân trang giúp các công cụ tìm kiếm như Google khám phá các bài viết cũ hơn nằm sâu trong cấu trúc website của bạn.
- Thẻ
rel="next/prev": Mặc dù Google đã thông báo không còn sử dụng thẻ này như một tín hiệu xếp hạng, các hàm phân trang mặc định của WordPress vẫn tạo ra chúng. Đây vẫn được xem là một thực hành tốt cho ngữ nghĩa web. - Thẻ Canonical: Mỗi trang trong chuỗi phân trang (trang 2, 3, 4…) sẽ có một thẻ
canonicaltrỏ về chính nó. Điều này báo cho Google biết rằng đây là các trang riêng biệt và không phải là nội dung trùng lặp.
Để đảm bảo các yếu tố trên được tối ưu, bạn nên sử dụng một plugin SEO tốt. Plugin SEO WordPress SEO by Yoast miễn phí tốt nhất WordPress là một lựa chọn hàng đầu giúp bạn kiểm soát các thẻ meta này một cách hiệu quả.
Câu Hỏi Thường Gặp (FAQ)
1. Phân trang thủ công có làm chậm website không? Không. Ngược lại, việc sử dụng code thay vì plugin sẽ loại bỏ các tài nguyên thừa, giúp website của bạn nhẹ và tải nhanh hơn.
2. Nên hiển thị bao nhiêu bài viết trên một trang?
Không có con số tuyệt đối. Thông thường từ 10-15 bài viết/sản phẩm mỗi trang là hợp lý. Bạn có thể điều chỉnh trong Cài đặt > Đọc > Số bài viết hiển thị nhiều nhất tại các trang của blog.
3. Làm thế nào để áp dụng phân trang cho Custom Post Type?
Cả hai phương pháp trên đều hoạt động tốt với Custom Post Type, miễn là bạn đặt code vào đúng file template của archive Custom Post Type đó (ví dụ: archive-sanpham.php).
Việc tạo link phân trang trong WordPress không cần plugin là một kỹ năng hữu ích, giúp bạn tối ưu hóa website một cách toàn diện. Với hai phương pháp trên, hy vọng bạn có thể dễ dàng áp dụng cho dự án của mình.
Nếu bạn gặp khó khăn hoặc cần hỗ trợ chuyên sâu về tối ưu WordPress, đừng ngần ngại liên hệ với chúng tôi. Cần hỗ trợ inbox ngay tại đây!
