Hướng dẫn thêm ảnh đại diện hay Thumbnail vào bài viết trên WordPress

Hình ảnh đại diện (Post Thumbnail) là một trong những tính năng phổ biến và khá cần thiết kể cả khi bạn mới bắt đầu sử dụng các WordPress Themes.  Hầu hết các  WordPress themes về nhiếp ảnh, nhà hàng và lễ hội đều đã được hỗ trợ để xuất ra ảnh thumbnails. Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách làm thế nào để thêm ảnh đại diện vào bài viết trong WordPress.

Tính năng Thumbnails xuất hiện lần đầu trong phiên bản  WordPress 2,9 với tên gọi  Post thumbnails. Tuy nhiên bản cập nhật sau đó đã đổi tên thành featured image.

Hướng dẫn tạo ảnh đại diện trong WordPress cho người mới bắt đầu.

Trước tiên, ta cần biết rằng ảnh đại diện là một themes tính năng, tương tự với Genesis là một themes về hình ảnh khác được xuất hiện mặc định.

Để biết được rằng themes của bạn có hỗ trợ ảnh đại diện hay không, ta cần đi tới trình chỉnh sửa văn bản của bài viết. Đơn giản là chỉ cần tạo bài viết mới, di chuyển xuống 1 chút để xem nếu có hộp thoại Featured Image hiện ra phía bên phải màn hình thì bài viết của bạn đã được hỗ trợ tính năng này.

Video hướng dẫn:

Nếu bạn vẫn còn thấy thắc mắc, hãy đọc tiếp các hướng dẫn sau.

Thêm hình ảnh đại diện vào WordPress

Để thêm ảnh đại diện vào bài viết, bạn chỉ cần chọn vào liên kết “Set Featured Image” bên trong hộp thoại Featured Image chúng ta đã thấy ở trên. Bạn sẽ thấy popup WordPress Media Uploader được mở lên. Ở đây ta có thể tuỳ chọn tải lên hình ảnh khác từ máy tính hay chọn ảnh hiện có trên thư viện sẵn có của bạn. Chọn vào hình ảnh bạn muốn và thiết lập nó thành ảnh Post Thumbnails.

Hình ảnh sẽ xuất hiện trong hộp thoại hình Featured Image như này.

Lưu ý: hình ảnh có thể xuất hiện khác một chút trong themes của bạn , tùy vào cách themes của bạn xử lý ảnh đại diện như thế nào.

Một số themes về báo chí có thể dùng hình ảnh nhỏ hơn, đi kèm cùng các bản tóm tắt về bài viết lên trên trang chính và một bản đầy đủ hơn ở chế độ xem bài viết. Ngoài ra, cách xuất hiện ảnh đại diện của bạn còn tuỳ thuộc vào các thiết lập được xác định bởi nhà phát triển themes. Tuy nhiên bạn có thể chỉnh sửa được các tuỳ chọn đó bằng cách thực hiện theo các bước sau.

Lưu ý: Để làm được theo cách sau thì bạn cần biết chút ít kiến thức cơ bản về lập trình.

Đăng ảnh đại diện trong WordPress theo cách của lập trình viên

Mặc dù Post thumbnails là tính năng phổ biến và cần thiết, nhưng không phải Themes WordPress nào cũng được hỗ trợ để sử dụng tính năng này. Trong trường hợp này, bạn có thể thêm ảnh đại diện vào bài viết một cách tuỳ chỉnh theo ý muốn qua vài dòng code đơn giản.

Bạn cần thêm dòng code này vào file functions.php của themes để hỗ trợ tính năng ảnh đại diện cho tất cả bài viết của bạn.

1
add_theme_support( 'post-thumbnails' );

Dòng code này sẽ bật tính năng tạo ảnh đại diện lên cho bài viết. Bây giờ bạn có thể vào bài viết bất kì và thấy tuỳ chọn Post Thumbnails đã được kích hoạt sẵn. Tuy nhiên, khi bạn thiết lập ảnh đại diện, ảnh sẽ không tự động hiển thị ngay trong themes WordPress. Thêm đoạn code dưới đây vào để tạo ảnh Post Thumbnails vào bất kì đâu bạn muốn hiển thị nó.

1
<?php the_post_thumbnail(); ?>

Tuỳ vào file themes của bạn, đoạn code sẽ thay đổi vị trí được thêm vào. Dòng code này chính là chức năng cơ bản để hiển thị và hỗ trợ thêm cho các hình ảnh Post thumbnails. Để đặt kích thước cho ảnh đại diện bạn vừa tải lên, thêm tiếp dòng code sau vào file functions.php

1
set_post_thumbnail_size( 50, 50);

Các thông số được đặt cho set_post_Post thumbnails_size lần lượt là chiều rộng và chiều cao. Hoặc thêm đoạn code sau để có thể tuỳ biến ảnh Post Thumbnails nhiều hơn.

1
2
// Image size for single posts
add_image_size( 'single-post-thumbnail', 590, 180 );

Trong ví dụ trên, Single-post-thumbnail là kích thước của hình ảnh mới với chiều cao 590px và chiều rộng là 180px. Để sử dụng kích thước này trong themes của bạn, bạn cần thêm nó vào file themes thích hợp. Nếu gặp vấn đề về kích thước hình ảnh, bạn có thể đọc qua hướng dẫn của chúng tôi về kích thước hình ảnh bổ sung trong WordPress. Nếu kích thước của hình ảnh tải lên không phù hợp, bạn cần chỉnh sửa  kích thước ảnh phù hợp mục đích sử dụng hơn

1
<?php the_post_thumbnail( 'single-post-thumbnail' ); ?>

Trên đây là đoạn code ví dụ về việc tạo ảnh đại diện với kích thước cho sẵn. Đó chỉ là 1 trong số rất nhiều tính năng mà bạn có thể tuỳ biến được như  tạo hình ảnh mặc định cho thumbnail của bài viết, hiển thị ảnh đại diện với phụ đề hoặc thậm chí thêm nhiều hình thu nhỏ bài đăng hoặc với đại diện.

Qua bài viết này, chúng tôi hy vọng bạn đã nắm được cách thêm ảnh Post thumbnails vào bài viết trong WordPress. Hoặc có thể xem qua danh sách 14 plugin hình ảnh đại diện đẹp nhất và hướng dẫn cho WordPress.

Nếu thích bài viết này, vui lòng đăng ký Kênh YouTube của chúng tôi để xem thêm các video hướng dẫn. Bạn cũng có thể theo dõi chúng tôi trên TwitterFacebook.