Thêm thumbnail cho previous/next post WordPress

Thêm Thumbnail Cho Previous/Next Post WordPress: Hướng Dẫn Chi Tiết

Khi xây dựng một trang web WordPress chuyên nghiệp, việc cải thiện trải nghiệm người dùng (UX) là vô cùng quan trọng. Một trong những cách để làm điều này là thêm hình thu nhỏ (thumbnail) vào liên kết bài viết trước/sau (previous/next post). Thumbnail giúp người đọc dễ dàng hình dung nội dung và quyết định có nên click vào bài viết đó hay không, từ đó tăng thời gian ở lại trang web và giảm tỷ lệ thoát trang.

Bài viết này sẽ hướng dẫn bạn chi tiết cách thêm thumbnail cho liên kết bài viết trước/sau trong WordPress, bao gồm cả cách thủ công và sử dụng plugin.

Tại Sao Nên Thêm Thumbnail Cho Previous/Next Post?

Việc thêm thumbnail cho liên kết bài viết trước/sau mang lại nhiều lợi ích đáng kể:

Cải thiện trải nghiệm người dùng: Hình ảnh trực quan giúp người dùng dễ dàng nhận biết và lựa chọn bài viết liên quan.
Tăng tỷ lệ click-through rate (CTR): Thumbnail hấp dẫn có thể thu hút sự chú ý của người dùng và khuyến khích họ nhấp vào liên kết.
Giảm tỷ lệ thoát trang: Bằng cách cung cấp nội dung liên quan một cách trực quan, bạn có thể giữ chân người dùng lâu hơn trên trang web.
Tăng tính thẩm mỹ cho website: Thumbnail được thiết kế đẹp mắt sẽ góp phần tạo nên giao diện chuyên nghiệp và hấp dẫn hơn.

Cách Thêm Thumbnail Cho Previous/Next Post Bằng Code (Thủ Công)

Phương pháp này yêu cầu bạn chỉnh sửa trực tiếp file theme của WordPress. Hãy chắc chắn rằng bạn đã tạo bản sao lưu (backup) trước khi thực hiện bất kỳ thay đổi nào để tránh làm hỏng website.

Bước 1: Xác Định File Theme Cần Chỉnh Sửa

Thông thường, bạn cần chỉnh sửa file single.php hoặc file template tùy chỉnh dành cho bài viết đơn (single post). Bạn có thể tìm thấy các file này trong thư mục theme của bạn (wp-content/themes/your-theme-name/).

Bước 2: Tìm Vị Trí Để Thêm Code

Xác định vị trí bạn muốn hiển thị liên kết bài viết trước/sau. Thường thì nó nằm ở cuối bài viết, trước phần bình luận.

Bước 3: Thêm Code Vào File Theme

Chèn đoạn code sau vào vị trí bạn đã xác định:

    
<div class="post-navigation">
  <div class="previous-post">
    <?php
    $prev_post = get_previous_post();
    if ( $prev_post ) {
      $prev_thumbnail = get_the_post_thumbnail( $prev_post->ID, 'thumbnail' );
      $prev_permalink = get_permalink( $prev_post->ID );
      $prev_title = get_the_title( $prev_post->ID );

      echo '<a href="' . esc_url( $prev_permalink ) . '">';
      echo '<div class="thumbnail">' . $prev_thumbnail . '</div>';
      echo '<div class="title">' . esc_html( $prev_title ) . '</div>';
      echo '</a>';
    }
    ?>
  </div>

  <div class="next-post">
    <?php
    $next_post = get_next_post();
    if ( $next_post ) {
      $next_thumbnail = get_the_post_thumbnail( $next_post->ID, 'thumbnail' );
      $next_permalink = get_permalink( $next_post->ID );
      $next_title = get_the_title( $next_post->ID );

      echo '<a href="' . esc_url( $next_permalink ) . '">';
      echo '<div class="thumbnail">' . $next_thumbnail . '</div>';
      echo '<div class="title">' . esc_html( $next_title ) . '</div>';
      echo '</a>';
    }
    ?>
  </div>
</div>

Giải thích code:

get_previous_post() và get_next_post(): Lấy thông tin của bài viết trước và sau.
get_the_post_thumbnail( $post_id, 'thumbnail' ): Lấy hình thu nhỏ của bài viết với kích thước ‘thumbnail’. Bạn có thể thay đổi kích thước này (ví dụ: ‘medium’, ‘large’, ‘full’).
get_permalink( $post_id ): Lấy URL của bài viết.
get_the_title( $post_id ): Lấy tiêu đề của bài viết.
Đoạn code trên sử dụng HTML để tạo cấu trúc cho liên kết và thumbnail, bao gồm các class post-navigation, previous-post, next-post, thumbnail, và title để bạn có thể tùy chỉnh bằng CSS.

Bước 4: Thêm CSS Để Tạo Kiểu (Styling)

Để định dạng cho liên kết và thumbnail, bạn cần thêm CSS vào file style.css của theme (hoặc file CSS tùy chỉnh của bạn).

Ví dụ:

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

.previous-post,
.next-post {
  width: 48%;
  display: flex;
  align-items: center;
}

.previous-post .thumbnail,
.next-post .thumbnail {
  width: 80px;
  height: 80px;
  margin-right: 10px;
  overflow: hidden;
  border-radius: 5px;
}

.previous-post .thumbnail img,
.next-post .thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.previous-post .title,
.next-post .title {
  font-size: 14px;
  line-height: 1.4;
}

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

.next-post {
  text-align: right;
  justify-content: flex-end;
}

.next-post .thumbnail {
  margin-left: 10px;
  margin-right: 0;
}

Bạn có thể tùy chỉnh CSS này để phù hợp với thiết kế của website.

Cách Thêm Thumbnail Cho Previous/Next Post Sử Dụng Plugin

Nếu bạn không muốn chỉnh sửa code trực tiếp, bạn có thể sử dụng plugin để thêm thumbnail cho liên kết bài viết trước/sau.

Lựa Chọn Plugin Phù Hợp

Có nhiều plugin miễn phí và trả phí giúp bạn thực hiện việc này. Một số plugin phổ biến bao gồm:

Previous & Next Post Navigation: Plugin đơn giản, dễ sử dụng, tập trung vào việc thêm thumbnail và tiêu đề.
Related Posts by Taxonomy: Mặc dù chủ yếu tập trung vào bài viết liên quan, plugin này cũng có thể tùy chỉnh để hiển thị bài viết trước/sau với thumbnail.
Custom Post Navigation: Plugin cho phép tùy chỉnh sâu hơn về cách hiển thị liên kết bài viết trước/sau.

Cài Đặt và Kích Hoạt Plugin

Sau khi chọn được plugin phù hợp, bạn tiến hành cài đặt và kích hoạt plugin như bình thường (Plugins > Add New).

Cấu Hình Plugin

Mỗi plugin sẽ có các tùy chọn cấu hình riêng. Thông thường, bạn sẽ cần:

Chọn vị trí hiển thị (trước hoặc sau nội dung bài viết).
Chọn kích thước thumbnail.
Tùy chỉnh CSS (nếu plugin cho phép).
Chọn hiển thị tiêu đề bài viết hay không.

Tham khảo tài liệu hướng dẫn của plugin để biết cách cấu hình chi tiết.

Lưu Ý Khi Thêm Thumbnail

Dưới đây là một vài lưu ý quan trọng khi thêm thumbnail cho liên kết bài viết trước/sau:

Kích thước thumbnail: Chọn kích thước thumbnail phù hợp để đảm bảo hình ảnh hiển thị rõ ràng nhưng không làm chậm tốc độ tải trang. Kích thước ‘thumbnail’ mặc định của WordPress thường là 150×150 pixels, nhưng bạn có thể thay đổi trong Settings > Media.
Tối ưu hóa hình ảnh: Tối ưu hóa hình ảnh (ví dụ: sử dụng định dạng WebP, nén ảnh) để giảm dung lượng file và cải thiện hiệu suất website.
Thiết kế nhất quán: Đảm bảo thumbnail có phong cách thiết kế nhất quán với giao diện tổng thể của website.
Kiểm tra trên nhiều thiết bị: Kiểm tra cách hiển thị thumbnail trên nhiều thiết bị (desktop, mobile, tablet) để đảm bảo trải nghiệm người dùng tốt nhất.

Kết Luận

Thêm thumbnail cho liên kết bài viết trước/sau 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ăng tính thẩm mỹ cho website WordPress của bạn. Bạn có thể lựa chọn phương pháp thủ công hoặc sử dụng plugin tùy theo kỹ năng và nhu cầu của mình. Hãy nhớ tối ưu hóa hình ảnh và thiết kế thumbnail một cách cẩn thận để đạt được hiệu quả tốt nhất.

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

Thêm thumbnail cho previous/next post WordPress