Thêm thumbnail cho previous/next post WordPress

2 tuần ago, WordPress Themes, 1 Views
Thêm thumbnail cho previous/next post WordPress

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

Trong thế giới WordPress, việc tối ưu hóa trải nghiệm người dùng là vô cùng quan trọng. Một trong những cách hiệu quả để cải thiện trải nghiệm này là thêm hình thumbnail cho các bài viết “Trước” và “Sau” (Previous/Next) của bạn. Việc này không chỉ làm cho trang web của bạn trở nên hấp dẫn hơn về mặt thị giác, mà còn giúp người dùng dễ dàng điều hướng giữa các bài viết liên quan, tăng thời gian ở lại trang và giảm tỷ lệ thoát.

Bài viết này sẽ hướng dẫn bạn chi tiết các bước để thêm thumbnail vào các liên kết Previous/Next post trong WordPress, từ việc sử dụng code tùy chỉnh đến các plugin hỗ trợ.

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

Việc thêm thumbnail cho các bài viết trước và sau mang lại nhiều lợi ích quan trọng:

  • Tăng tính thẩm mỹ: Hình ảnh thu hút sự chú ý của người dùng hơn so với chỉ văn bản. Thumbnail giúp giao diện trang web trở nên sinh động và chuyên nghiệp hơn.
  • Cải thiện trải nghiệm người dùng: Thumbnail cung cấp một gợi ý trực quan về nội dung của bài viết tiếp theo, giúp người dùng dễ dàng quyết định có nên tiếp tục đọc hay không.
  • Tăng khả năng điều hướng: Người dùng có thể dễ dàng di chuyển giữa các bài viết liên quan, khám phá nội dung trang web một cách tự nhiên và trực quan.
  • Giảm tỷ lệ thoát: Bằng cách khuyến khích người dùng khám phá thêm nội dung, bạn có thể giảm tỷ lệ thoát trang và tăng thời gian ở lại trang.

Các Phương Pháp Thêm Thumbnail Cho Previous/Next Post

Có hai phương pháp chính để thêm thumbnail vào liên kết Previous/Next post trong WordPress:

  • Sử dụng code tùy chỉnh: Phương pháp này đòi hỏi bạn phải chỉnh sửa file theme của mình.
  • Sử dụng plugin: Phương pháp này đơn giản và dễ thực hiện hơn, phù hợp với người dùng không quen thuộc với code.

Phương Pháp 1: Sử Dụng Code Tùy Chỉnh

Phương pháp này yêu cầu bạn chỉnh sửa file functions.php của theme hoặc tạo một plugin tùy chỉnh. Hãy nhớ sao lưu file functions.php trước khi thực hiện bất kỳ thay đổi nào để tránh trường hợp xảy ra lỗi.

Bước 1: Xác Định Vị Trí Hiển Thị Previous/Next Post

Trước tiên, bạn cần xác định file theme nào chịu trách nhiệm hiển thị các liên kết Previous/Next post. Thông thường, nó nằm trong file single.php (cho bài viết đơn) hoặc page.php (cho trang). Kiểm tra code của file này để tìm đoạn code liên quan đến previous_post_link() và next_post_link().

Bước 2: Thêm Code vào File functions.php

Mở file functions.php của theme (hoặc plugin tùy chỉnh) và thêm đoạn code sau:

“`html


function custom_previous_next_post_nav() {
  $prev = ( is_attachment() ) ? get_post( get_post()->post_parent ) : get_adjacent_post( false, '', true );
  $next = get_adjacent_post( false, '', false );

  if ( ! $next && ! $prev ) {
    return;
  }
  ?>
  
  <?php
}

“`

Lưu ý: Thay thế 'your-theme' bằng tên theme của bạn. Đoạn code trên sẽ hiển thị thumbnail kích thước “thumbnail” (mặc định là 150×150 pixels). Bạn có thể thay đổi kích thước này bằng cách thay thế 'thumbnail' bằng kích thước khác, ví dụ: 'medium', 'large', 'full' hoặc một kích thước tùy chỉnh đã được định nghĩa trong theme của bạn.

Bước 3: Thay Thế Hàm previous_post_link() và next_post_link()

Trong file single.php (hoặc page.php), tìm đoạn code chứa hàm previous_post_link() và next_post_link(). Thay thế chúng bằng hàm tùy chỉnh mà bạn vừa tạo:

“`html


<?php custom_previous_next_post_nav(); ?>

“`

Bước 4: Tùy Chỉnh CSS (Nếu Cần)

Bạn có thể cần tùy chỉnh CSS để đảm bảo thumbnail hiển thị đúng cách. Ví dụ:

“`html


.nav-previous {
  float: left;
  width: 48%;
}

.nav-next {
  float: right;
  width: 48%;
  text-align: right;
}

.nav-previous img,
.nav-next img {
  float: left; /* or right, depending on your design */
  margin-right: 10px; /* adjust as needed */
}

“`

Thêm đoạn CSS này vào file style.css của theme (hoặc thông qua Customizer).

Phương Pháp 2: Sử Dụng Plugin WordPress

Nếu bạn không muốn chỉnh sửa code trực tiếp, có nhiều plugin WordPress có thể giúp bạn thêm thumbnail vào liên kết Previous/Next post một cách dễ dàng.

Một Số Plugin Phổ Biến

  • Previous & Next Post Navigation with Thumbnails: Đây là một plugin đơn giản và dễ sử dụng, được thiết kế riêng cho mục đích này.
  • WordPress Related Posts: Mặc dù chủ yếu được sử dụng để hiển thị bài viết liên quan, một số plugin cũng cung cấp tùy chọn để thêm thumbnail vào liên kết Previous/Next post.

Hướng Dẫn Sử Dụng Plugin

  1. Cài đặt và kích hoạt plugin: Tìm kiếm plugin mong muốn trong kho plugin của WordPress, cài đặt và kích hoạt nó.
  2. Cấu hình plugin: Hầu hết các plugin đều có trang cài đặt riêng, nơi bạn có thể tùy chỉnh các tùy chọn như kích thước thumbnail, vị trí hiển thị, và văn bản liên kết.
  3. Kiểm tra kết quả: Sau khi cấu hình plugin, hãy kiểm tra trang web của bạn để đảm bảo thumbnail hiển thị đúng cách.

Lưu Ý Quan Trọng

Dù bạn chọn phương pháp nào, hãy lưu ý những điều sau:

  • Sao lưu dữ liệu: Luôn sao lưu file functions.php và style.css trước khi thực hiện bất kỳ thay đổi nào.
  • Chọn kích thước thumbnail phù hợp: Kích thước thumbnail quá lớn có thể làm chậm tốc độ tải trang.
  • Tối ưu hóa hình ảnh: Đảm bảo hình ảnh thumbnail được tối ưu hóa để giảm dung lượng file.

Kết Luận

Việc thêm thumbnail cho các liên kết Previous/Next post là một cách tuyệt vời để cải thiện trải nghiệm người dùng và tăng tính thẩm mỹ cho trang web WordPress của bạn. Bằng cách sử dụng code tùy chỉnh hoặc plugin, bạn có thể dễ dàng thực hiện việc này và tạo ra một trang web chuyên nghiệp và hấp dẫn hơn.

Related Topics by Tag
, , , ,

..