Hướng Dẫn Tạo Chức Năng Điều Hướng Next/Prev Bài Viết Trong WordPress

Trong WordPress, chức năng Next/Prev bài viết thường được sử dụng để điều hướng giữa các bài viết trong cùng một danh mục hoặc loại bài viết tùy chỉnh. Đây là một tính năng cơ bản giúp tăng cường trải nghiệm người dùng bằng cách cho phép họ dễ dàng chuyển từ bài viết này sang bài viết khác mà không cần quay lại trang chính hoặc trang lưu trữ.

Dưới đây là cách bạn có thể thực hiện chức năng này trong WordPress:

1. Sử dụng Hàm previous_post_link() và next_post_link()

WordPress cung cấp sẵn hai hàm cơ bản để hiển thị liên kết đến bài viết trước và sau:

• previous_post_link(): Hiển thị liên kết tới bài viết trước.
• next_post_link(): Hiển thị liên kết tới bài viết sau.

Ví dụ sử dụng:

<div class="post-navigation">
    <div class="prev-post">
        <?php previous_post_link('%link', 'Bài viết trước'); ?>
    </div>
    <div class="next-post">
        <?php next_post_link('%link', 'Bài viết sau'); ?>
    </div>
</div>

Trong đoạn mã này:

• %link là giá trị mặc định sẽ được thay thế bằng tiêu đề của bài viết liên kết.
• 'Bài viết trước' và 'Bài viết sau' là văn bản mà bạn muốn hiển thị cho người dùng.

2. Hiển thị Nút Điều Hướng với Tiêu Đề Bài Viết

Nếu bạn muốn hiển thị tiêu đề của bài viết kế tiếp hoặc trước đó thay vì văn bản cố định, bạn có thể tùy chỉnh như sau:

<div class="post-navigation">
    <div class="prev-post">
        <?php previous_post_link('%link', '← %title'); ?>
    </div>
    <div class="next-post">
        <?php next_post_link('%link', '%title →'); ?>
    </div>
</div>

Trong đoạn mã trên, %title sẽ tự động được thay thế bằng tiêu đề của bài viết liên kết.

3. Điều Hướng Giới Hạn Trong Cùng Danh Mục

Để giới hạn việc điều hướng trong cùng một danh mục (điều này rất hữu ích nếu bạn muốn người dùng chỉ duyệt qua các bài viết trong cùng một chuyên mục), bạn có thể sử dụng tham số thứ ba của hàm previous_post_link() và next_post_link().

Ví dụ:

<div class="post-navigation">
    <div class="prev-post">
        <?php previous_post_link('%link', '← %title', true); ?>
    </div>
    <div class="next-post">
        <?php next_post_link('%link', '%title →', true); ?>
    </div>
</div>

Tham số thứ ba (true) giới hạn bài viết trước và bài viết sau trong cùng danh mục của bài viết hiện tại.

4. Tùy Biến Thêm Class và ID cho Nút Điều Hướng

Để có thể tùy chỉnh giao diện nút điều hướng bằng CSS hoặc JavaScript, bạn có thể thêm class hoặc id vào các liên kết. Bạn có thể dùng đoạn mã sau để thêm class cho các nút điều hướng:

<div class="post-navigation">
    <div class="prev-post">
        <?php previous_post_link('<span class="prev">%link</span>', '← %title', true); ?>
    </div>
    <div class="next-post">
        <?php next_post_link('<span class="next">%link</span>', '%title →', true); ?>
    </div>
</div>

Ở đây, bạn đã thêm một class prev cho liên kết bài viết trước và next cho bài viết sau.

5. Sử Dụng Plugin Nếu Cần

Nếu bạn không muốn tự viết mã, có nhiều plugin hỗ trợ chức năng này. Một số plugin phổ biến bao gồm:

• WP Post Navigation: Plugin này cung cấp khả năng tùy chỉnh liên kết “Previous/Next” bài viết mà không cần viết code.
• WP-Paginate: Hỗ trợ cả phân trang và điều hướng giữa các bài viết.

Kết Luận

Việc thêm chức năng Next/Prev bài viết trong WordPress giúp cải thiện điều hướng trên trang web, mang lại trải nghiệm người dùng tốt hơn. Bạn có thể tùy chỉnh mã để phù hợp với yêu cầu cụ thể của trang web và phong cách giao diện bạn đang sử dụng.

• Wordpress