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

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

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

Trong thế giới WordPress, điều hướng hiệu quả là yếu tố then chốt để cải thiện trải nghiệm người dùng (UX) và tối ưu hóa SEO. Một trong những phương pháp đơn giản nhưng hiệu quả để đạt được điều này là thêm liên kết “Next” (Tiếp theo) và “Previous” (Trước) vào trang web của bạn. Các liên kết này cho phép khách truy cập dễ dàng di chuyển giữa các bài viết hoặc trang, giữ họ ở lại trang web lâu hơn và khám phá nhiều nội dung hơn. Bài viết này sẽ hướng dẫn bạn cách thêm liên kết Next/Previous vào WordPress một cách chi tiết và dễ hiểu.

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

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

Cải thiện trải nghiệm người dùng: Người dùng có thể dễ dàng điều hướng giữa các bài viết mà không cần quay lại trang chủ hoặc trang lưu trữ.
Tăng thời gian ở lại trang web: Khuyến khích người dùng khám phá nhiều nội dung hơn, dẫn đến thời gian ở lại trang web lâu hơn.
Tối ưu hóa SEO: Liên kết nội bộ giúp Googlebot thu thập thông tin trang web hiệu quả hơn, cải thiện thứ hạng SEO.
Giảm tỷ lệ thoát trang (Bounce Rate): Người dùng có nhiều khả năng ở lại trang web nếu họ dễ dàng tìm thấy nội dung liên quan.

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

Có nhiều cách để thêm liên kết Next/Previous vào trang web WordPress của bạn. Dưới đây là một số phương pháp phổ biến và hiệu quả nhất:

Sử dụng hàm the_post_navigation()

WordPress cung cấp hàm the_post_navigation() tích hợp sẵn để tạo liên kết Next/Previous một cách dễ dàng. Hàm này hiển thị các liên kết điều hướng đến bài viết tiếp theo và bài viết trước đó trong cùng một danh mục. Bạn có thể sử dụng hàm này trong tệp single.php của chủ đề.

Cách sử dụng:

Mở tệp single.php của chủ đề bạn đang sử dụng (truy cập thông qua Appearance > Theme Editor).
Tìm vị trí bạn muốn hiển thị liên kết Next/Previous (thường là ở cuối bài viết).
Thêm đoạn mã sau vào vị trí bạn đã chọn:

<?php the_post_navigation(); ?>

Tùy chỉnh:

Hàm the_post_navigation() có thể được tùy chỉnh bằng cách sử dụng các tham số. Ví dụ:

<?php
the_post_navigation( array(
    'prev_text' => '<span class="meta-nav" aria-hidden="true">' . __( 'Previous:', 'your-theme' ) . '</span> <span class="screen-reader-text">' . __( 'Previous post:', 'your-theme' ) . '</span> <span class="post-title">%title</span>',
    'next_text' => '<span class="meta-nav" aria-hidden="true">' . __( 'Next:', 'your-theme' ) . '</span> <span class="screen-reader-text">' . __( 'Next post:', 'your-theme' ) . '</span> <span class="post-title">%title</span>',
) );
?>

Trong ví dụ này, chúng ta đã tùy chỉnh văn bản hiển thị cho liên kết “Previous” và “Next”. Thay đổi 'your-theme' thành tên chủ đề của bạn.

Sử dụng hàm previous_post_link() và next_post_link()

Ngoài hàm the_post_navigation(), bạn cũng có thể sử dụng hai hàm riêng biệt: previous_post_link() và next_post_link(). Điều này cho phép bạn kiểm soát vị trí và định dạng của từng liên kết một cách chi tiết hơn.

Cách sử dụng:

Mở tệp single.php của chủ đề.
Tìm vị trí bạn muốn hiển thị liên kết “Previous”.
Thêm đoạn mã sau:

<?php previous_post_link( '&laquo; %link', 'Bài trước' ); ?>

Tìm vị trí bạn muốn hiển thị liên kết “Next”.
Thêm đoạn mã sau:

<?php next_post_link( '%link &raquo;', 'Bài sau' ); ?>

Giải thích:

'« %link': Định dạng liên kết “Previous”, trong đó « là ký tự mũi tên trái và %link là tiêu đề bài viết.
'Bài trước': Văn bản thay thế cho tiêu đề bài viết nếu bạn muốn hiển thị một văn bản tĩnh.
'%link »': Định dạng liên kết “Next”, trong đó %link là tiêu đề bài viết và » là ký tự mũi tên phải.
'Bài sau': Văn bản thay thế cho tiêu đề bài viết nếu bạn muốn hiển thị một văn bản tĩnh.

Tùy chỉnh:

Bạn có thể tùy chỉnh các tham số của hàm previous_post_link() và next_post_link() để thay đổi văn bản, biểu tượng và các thuộc tính khác của liên kết.

Sử dụng Plugin

Nếu bạn không muốn chỉnh sửa trực tiếp mã nguồn của chủ đề, bạn có thể sử dụng plugin để thêm liên kết Next/Previous. Có rất nhiều plugin miễn phí và trả phí có sẵn trên WordPress.org. Một số plugin phổ biến bao gồm:

Next and Previous Post Navigation: Một plugin đơn giản và dễ sử dụng để thêm liên kết điều hướng.
WP PageNavi: Một plugin mạnh mẽ để tạo phân trang nâng cao, bao gồm cả liên kết Next/Previous.
Custom Post Navigation: Cho phép bạn tùy chỉnh liên kết Next/Previous một cách chi tiết.

Cách sử dụng plugin:

Tìm và cài đặt plugin bạn muốn sử dụng từ WordPress Plugin Repository (Plugins > Add New).
Kích hoạt plugin.
Truy cập trang cài đặt của plugin (thường nằm trong menu Settings hoặc Appearance).
Cấu hình các tùy chọn theo ý muốn.
Lưu các thay đổi.

Ví dụ về cách hiển thị Link Next/Previous trong Theme

Dưới đây là một ví dụ về cách bạn có thể hiển thị liên kết Next/Previous trong chủ đề WordPress của mình bằng cách sử dụng CSS để tạo kiểu cho chúng:

Mã PHP (trong single.php):

<div class="post-navigation">
    <div class="nav-previous">
        <?php previous_post_link( '<span class="meta-nav" aria-hidden="true">&larr;</span> %link' ); ?>
    </div>
    <div class="nav-next">
        <?php next_post_link( '%link <span class="meta-nav" aria-hidden="true">&rarr;</span>' ); ?>
    </div>
</div>

Mã CSS (trong style.css):

.post-navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    padding: 20px;
    border-top: 1px solid #eee;
}

.nav-previous,
.nav-next {
    width: 48%;
}

.nav-previous {
    text-align: left;
}

.nav-next {
    text-align: right;
}

.meta-nav {
    font-size: 1.2em;
    margin-right: 5px;
    margin-left: 5px;
}

Trong ví dụ này, chúng ta đã sử dụng CSS Flexbox để căn chỉnh liên kết “Previous” và “Next” ở hai bên của bài viết. Chúng ta cũng đã thêm một đường viền trên và một chút khoảng cách để tạo sự rõ ràng.

Lưu ý quan trọng

Khi thêm liên kết Next/Previous, hãy ghi nhớ những điều sau:

Kiểm tra chủ đề con (Child Theme): Nếu bạn đang sử dụng chủ đề con, hãy chỉnh sửa tệp single.php trong chủ đề con để tránh mất các thay đổi khi cập nhật chủ đề gốc.
Sao lưu trang web: Trước khi thực hiện bất kỳ thay đổi nào đối với mã nguồn của chủ đề, hãy sao lưu trang web của bạn để phòng trường hợp xảy ra lỗi.
Kiểm tra trên nhiều thiết bị: Đảm bảo rằng liên kết Next/Previous hiển thị chính xác trên tất cả các thiết bị, bao gồm máy tính để bàn, máy tính bảng và điện thoại di động.

Kết luận

Thêm liên kết Next/Previous là một cách đơn giản nhưng hiệu quả để 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 hàm tích hợp của WordPress, plugin hoặc kết hợp cả hai, bạn có thể dễ dàng thêm các liên kết điều hướng này vào trang web của mình và giúp người dùng khám phá nhiều nội dung hơn.

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