Cách thêm post thumbnails trong WordPress

7 giờ ago, WordPress Themes, Views

Giới thiệu về Post Thumbnails (Ảnh Đại Diện Bài Viết) trong WordPress

Post thumbnails, hay còn gọi là featured images, là những hình ảnh đại diện cho bài viết, trang hoặc các loại bài đăng khác trong WordPress. Chúng đóng vai trò quan trọng trong việc thu hút sự chú ý của người đọc, tạo ấn tượng trực quan và cải thiện trải nghiệm người dùng trên website của bạn. Ảnh đại diện bài viết thường được hiển thị trên trang chủ, trang lưu trữ, trang danh mục và trong các plugin liên quan đến bài viết.

Việc sử dụng post thumbnails mang lại nhiều lợi ích, bao gồm:

Tăng tính thẩm mỹ cho website.
Cải thiện tỷ lệ nhấp (CTR) khi hiển thị trên mạng xã hội hoặc kết quả tìm kiếm.
Giúp người dùng dễ dàng nhận diện và phân biệt các bài viết.
Nâng cao trải nghiệm người dùng bằng cách cung cấp thông tin trực quan.

Kích hoạt tính năng Post Thumbnails trong Theme

Trước khi có thể thêm post thumbnails, bạn cần đảm bảo theme WordPress của bạn hỗ trợ tính năng này. Hầu hết các theme hiện đại đều hỗ trợ sẵn, nhưng nếu theme của bạn không hỗ trợ, bạn có thể thêm nó bằng cách chỉnh sửa file functions.php của theme.

Lưu ý quan trọng: Luôn tạo bản sao lưu (backup) cho file functions.php trước khi thực hiện bất kỳ thay đổi nào. Nếu bạn không quen thuộc với việc chỉnh sửa code, hãy nhờ đến sự giúp đỡ của một nhà phát triển WordPress.

Để kích hoạt post thumbnails, hãy thêm đoạn code sau vào file functions.php:


function theme_setup() {
    add_theme_support( 'post-thumbnails' );
}
add_action( 'after_setup_theme', 'theme_setup' );

Nếu bạn muốn chỉ định kích thước mặc định cho post thumbnails, bạn có thể sử dụng hàm set_post_thumbnail_size(). Ví dụ:


function theme_setup() {
    add_theme_support( 'post-thumbnails' );
    set_post_thumbnail_size( 150, 150, true ); // Kích thước 150x150 pixels, crop
}
add_action( 'after_setup_theme', 'theme_setup' );

Tham số thứ ba trong hàm set_post_thumbnail_size() (trong ví dụ là true) xác định xem hình ảnh có được cắt (crop) để vừa với kích thước hay không. Nếu đặt là false, hình ảnh sẽ được thu nhỏ theo tỷ lệ ban đầu.

Thêm Post Thumbnail vào Bài Viết

Sau khi kích hoạt tính năng post thumbnails, bạn có thể thêm ảnh đại diện cho mỗi bài viết theo các bước sau:

Mở bài viết cần thêm ảnh đại diện trong trình chỉnh sửa WordPress.
Tìm đến hộp “Ảnh đại diện” (Featured Image) ở cột bên phải (nếu không thấy, hãy vào “Tùy chọn hiển thị” (Screen Options) ở góc trên bên phải và tích vào “Ảnh đại diện”).
Nhấp vào liên kết “Đặt ảnh đại diện” (Set featured image).
Chọn ảnh từ thư viện media (Media Library) hoặc tải ảnh mới lên.
Nhấp vào nút “Chọn” (Choose) hoặc “Đặt làm ảnh đại diện” (Set featured image).
Cập nhật hoặc đăng bài viết.

Hiển thị Post Thumbnails trong Theme

Sau khi đã thêm post thumbnails vào bài viết, bạn cần chỉnh sửa theme để hiển thị chúng. Vị trí và cách hiển thị post thumbnails phụ thuộc vào thiết kế của theme.

Để hiển thị post thumbnail trong bài viết đơn (single post), bạn có thể thêm đoạn code sau vào file single.php hoặc file template tương ứng:


<?php
if ( has_post_thumbnail() ) {
    the_post_thumbnail();
}
?>

Để hiển thị post thumbnail trên trang chủ, trang lưu trữ, hoặc trang danh mục, bạn có thể thêm đoạn code sau vào file index.php, archive.php, category.php hoặc file template tương ứng:


<?php
if ( has_post_thumbnail() ) {
    <a href="<?php the_permalink(); ?>">
        <?php the_post_thumbnail(); ?>
    </a>
}
?>

Đoạn code này kiểm tra xem bài viết có thumbnail hay không. Nếu có, nó sẽ hiển thị thumbnail và liên kết đến bài viết.

Sử dụng Kích Thước Thumbnail Khác Nhau

WordPress cung cấp nhiều kích thước thumbnail mặc định, bao gồm thumbnail, medium, large và full. Bạn cũng có thể tạo kích thước thumbnail tùy chỉnh.

thumbnail: Kích thước mặc định, thường là 150×150 pixels.
medium: Kích thước trung bình, thường là 300×300 pixels.
large: Kích thước lớn, thường là 1024×1024 pixels.
full: Kích thước gốc của hình ảnh.

Để sử dụng kích thước thumbnail khác nhau, bạn có thể chỉ định kích thước trong hàm the_post_thumbnail(). Ví dụ:


<?php the_post_thumbnail( 'medium' ); ?>

Để tạo kích thước thumbnail tùy chỉnh, bạn có thể sử dụng hàm add_image_size() trong file functions.php.


function theme_setup() {
    add_theme_support( 'post-thumbnails' );
    add_image_size( 'custom-size', 800, 600, true ); // Kích thước 800x600 pixels, crop
}
add_action( 'after_setup_theme', 'theme_setup' );

Sau đó, bạn có thể sử dụng kích thước tùy chỉnh này trong hàm the_post_thumbnail():


<?php the_post_thumbnail( 'custom-size' ); ?>

Xử lý các Vấn đề Thường Gặp

Post thumbnails không hiển thị:

Kiểm tra xem theme của bạn đã kích hoạt tính năng post thumbnails chưa.
Kiểm tra xem bạn đã thêm ảnh đại diện cho bài viết chưa.
Kiểm tra xem bạn đã thêm code hiển thị post thumbnails vào theme chưa.
Kiểm tra xem kích thước thumbnail có tồn tại không (nếu sử dụng kích thước tùy chỉnh).

Kích thước thumbnail không đúng:

Kiểm tra xem bạn đã sử dụng kích thước thumbnail đúng trong hàm the_post_thumbnail() chưa.
Kiểm tra xem kích thước thumbnail tùy chỉnh đã được tạo đúng cách chưa.
Thử tái tạo lại thumbnails bằng plugin Regenerate Thumbnails.

Chất lượng thumbnail kém:

Sử dụng hình ảnh có độ phân giải cao hơn.
Đảm bảo hình ảnh không bị nén quá mức.
Sử dụng plugin tối ưu hóa hình ảnh.

Plugin Hỗ Trợ Quản Lý Post Thumbnails

Ngoài việc chỉnh sửa theme bằng code, bạn cũng có thể sử dụng các plugin để quản lý post thumbnails một cách dễ dàng hơn. Một số plugin phổ biến bao gồm:

Regenerate Thumbnails: Tái tạo lại tất cả các thumbnails sau khi thay đổi kích thước hoặc theme.
Auto Featured Image: Tự động tạo ảnh đại diện từ hình ảnh đầu tiên trong bài viết.
Featured Image From URL: Cho phép bạn sử dụng URL của hình ảnh từ bên ngoài làm ảnh đại diện.

Việc lựa chọn plugin phù hợp phụ thuộc vào nhu cầu và yêu cầu cụ thể của bạn. Hãy tìm hiểu kỹ về các tính năng và đánh giá của plugin trước khi cài đặt và sử dụng.

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