Hướng dẫn thêm link next/previous trong WordPress

4 tháng ago, Hướng dẫn WordPress, 4 Views

Giới thiệu về link Next/Previous trong WordPress

Link Next/Previous (Tiếp/Trước) là những liên kết quan trọng trên một trang web WordPress, đặc biệt là trên các trang lưu trữ (archive pages), trang danh mục (category pages), và trang tìm kiếm (search pages). Chúng cho phép người dùng dễ dàng điều hướng qua các trang nội dung khác nhau, cải thiện trải nghiệm người dùng và giúp họ khám phá nhiều nội dung hơn trên trang web của bạn. Việc thêm các liên kết này không chỉ giúp người dùng, mà còn hỗ trợ bot tìm kiếm (search engine bots) thu thập dữ liệu và lập chỉ mục trang web của bạn một cách hiệu quả hơn, từ đó cải thiện SEO.

Bài viết này sẽ hướng dẫn bạn cách thêm các liên kết Next/Previous vào trang web WordPress của bạn bằng nhiều phương pháp khác nhau, từ việc sử dụng các hàm WordPress tích hợp sẵn, đến việc tùy chỉnh code và sử dụng plugin.

Tại sao cần thêm link Next/Previous?

Việc thêm link Next/Previous mang lại nhiều lợi ích quan trọng cho trang web của bạn:

Cải thiện trải nghiệm người dùng (UX): Giúp người dùng dễ dàng điều hướng và tìm kiếm nội dung mong muốn một cách nhanh chóng và thuận tiện.
Tăng thời gian ở lại trang web: Khuyến khích người dùng khám phá nhiều trang hơn, từ đó tăng thời gian họ ở lại trang web của bạn.
Tối ưu hóa SEO: Giúp bot tìm kiếm dễ dàng thu thập dữ liệu và lập chỉ mục trang web của bạn, cải thiện thứ hạng trang web trên các công cụ tìm kiếm.
Giảm tỷ lệ thoát (Bounce Rate): Khi người dùng dễ dàng tìm thấy nội dung liên quan, họ ít có khả năng rời khỏi trang web sau khi chỉ xem một trang.

Các phương pháp thêm link Next/Previous trong WordPress

Có nhiều cách để thêm link Next/Previous vào trang web WordPress của bạn, tùy thuộc vào kiến thức kỹ thuật và mức độ tùy chỉnh bạn mong muốn:

Sử dụng các hàm WordPress tích hợp sẵn (previous_posts_link() và next_posts_link()).
Tùy chỉnh code theme.
Sử dụng plugin.

Sử dụng hàm WordPress tích hợp sẵn: previous_posts_link() và next_posts_link()

WordPress cung cấp hai hàm tích hợp sẵn là previous_posts_link() và next_posts_link() để thêm link Next/Previous vào trang web của bạn. Đây là phương pháp đơn giản và nhanh chóng nhất nếu bạn muốn sử dụng các thiết lập mặc định của WordPress.

Cách sử dụng:

Mở file theme mà bạn muốn thêm link Next/Previous vào. Thông thường, bạn sẽ muốn chỉnh sửa các file như archive.php, category.php, search.php hoặc index.php. Bạn nên sử dụng một child theme để tránh mất các thay đổi khi cập nhật theme chính.
Thêm đoạn code sau vào vị trí bạn muốn hiển thị link Next/Previous:


<div class="pagination">
<?php previous_posts_link( '<< Older posts' ); ?>
<?php next_posts_link( 'Newer posts >>' ); ?>
</div>

Giải thích:

previous_posts_link( '<< Older posts' ): Hiển thị liên kết đến trang bài viết cũ hơn (trang trước). Tham số '<< Older posts' là text hiển thị cho liên kết. Bạn có thể thay đổi text này theo ý muốn.
next_posts_link( 'Newer posts >>' ): Hiển thị liên kết đến trang bài viết mới hơn (trang sau). Tham số 'Newer posts >>' là text hiển thị cho liên kết. Bạn có thể thay đổi text này theo ý muốn.
<div class="pagination">: Đây là một thẻ div được sử dụng để bao bọc các liên kết phân trang. Bạn có thể sử dụng CSS để tùy chỉnh kiểu dáng của khu vực phân trang này.

Tùy chỉnh:

Bạn có thể tùy chỉnh text hiển thị cho các liên kết Next/Previous bằng cách thay đổi tham số truyền vào các hàm previous_posts_link() và next_posts_link(). Ví dụ:


<?php previous_posts_link( '< Trang trước' ); ?>
<?php next_posts_link( 'Trang sau >' ); ?>

Tùy chỉnh code theme

Nếu bạn muốn có nhiều quyền kiểm soát hơn đối với cách hiển thị và hoạt động của các liên kết Next/Previous, bạn có thể tùy chỉnh code theme của mình. Phương pháp này yêu cầu bạn có kiến thức về PHP và HTML.

Ví dụ:


<div class="pagination">
<?php
global $wp_query;

$big = 999999999; // cần một số lớn

echo paginate_links( array(
'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
'format' => '?paged=%#%',
'current' => max( 1, get_query_var('paged') ),
'total' => $wp_query->max_num_pages,
'prev_text'    => '&laquo; Trang trước',
'next_text'    => 'Trang sau &raquo;',
) );
?>
</div>

Giải thích:

global $wp_query;: Khai báo biến toàn cục $wp_query, chứa thông tin về query hiện tại.
$big = 999999999;: Khai báo một biến có giá trị lớn để sử dụng trong hàm paginate_links().
paginate_links(): Hàm này tạo ra các liên kết phân trang.
'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ): Thiết lập URL cơ bản cho các liên kết phân trang.
'format' => '?paged=%#%': Thiết lập định dạng của URL phân trang.
'current' => max( 1, get_query_var('paged') ): Xác định trang hiện tại.
'total' => $wp_query->max_num_pages: Xác định tổng số trang.
'prev_text' => '« Trang trước': Thiết lập text hiển thị cho liên kết “Trang trước”.
'next_text' => 'Trang sau »': Thiết lập text hiển thị cho liên kết “Trang sau”.

Ưu điểm của phương pháp này:

Tùy chỉnh cao: Bạn có thể tùy chỉnh hoàn toàn cách hiển thị và hoạt động của các liên kết phân trang.
Kiểm soát code: Bạn có toàn quyền kiểm soát code, giúp bạn hiểu rõ hơn về cách hoạt động của các liên kết phân trang.

Sử dụng plugin

Có rất nhiều plugin WordPress miễn phí và trả phí có thể giúp bạn thêm link Next/Previous vào trang web của bạn một cách dễ dàng. Sử dụng plugin là một lựa chọn tốt nếu bạn không muốn chỉnh sửa code theme hoặc không có kiến thức về PHP.

Một số plugin phổ biến:

WP-PageNavi: Một plugin phân trang đơn giản và dễ sử dụng, cho phép bạn tùy chỉnh kiểu dáng và text của các liên kết phân trang.
Advanced Post Pagination: Plugin này cho phép bạn tạo các liên kết phân trang nâng cao, bao gồm cả phân trang cho các bài viết đơn lẻ.
Alphabetic Pagination: Plugin này tạo ra các liên kết phân trang theo bảng chữ cái, giúp người dùng dễ dàng tìm kiếm nội dung theo chữ cái đầu tiên.

Cách sử dụng plugin:

Cài đặt và kích hoạt plugin bạn muốn sử dụng.
Truy cập trang cài đặt của plugin và cấu hình các thiết lập theo ý muốn.
Thêm shortcode hoặc đoạn code PHP do plugin cung cấp vào vị trí bạn muốn hiển thị các liên kết phân trang.

Lời khuyên khi sử dụng link Next/Previous

Dưới đây là một số lời khuyên khi sử dụng link Next/Previous để tối ưu hóa trải nghiệm người dùng và SEO:

Sử dụng text rõ ràng và dễ hiểu: Sử dụng các text như “Trang trước”, “Trang sau”, “<< Older posts”, “Newer posts >>” để người dùng dễ dàng nhận biết chức năng của các liên kết.
Đảm bảo các liên kết hoạt động chính xác: Kiểm tra kỹ lưỡng các liên kết để đảm bảo chúng dẫn đến đúng trang.
Tùy chỉnh kiểu dáng cho phù hợp với theme: Sử dụng CSS để tùy chỉnh kiểu dáng của các liên kết phân trang cho phù hợp với theme của bạn.
Sử dụng responsive design: Đảm bảo các liên kết phân trang hiển thị tốt trên mọi thiết bị, từ máy tính để bàn đến điện thoại di động.

Kết luận

Việc thêm link Next/Previous là một bước quan trọng để cải thiện trải nghiệm người dùng và tối ưu hóa SEO cho trang web WordPress của bạn. Bằng cách sử dụng các phương pháp được trình bày trong bài viết này, bạn có thể dễ dàng thêm các liên kết phân trang vào trang web của mình và tùy chỉnh chúng cho phù hợp với nhu cầu của bạn.

#ezw_tco-2 .ez-toc-widget-container ul.ez-toc-list li.active::before { background-color: #ededed; } aa