Tạo hình thumbnail cho blog bằng Custom fields trong WordPress

Các bạn thân mến. Đôi khi tôi nhận được comment của các bạn nhưng không thể nào trả lời nhanh được bởi vì không có điều kiện. Ví dụ, lúc tôi viết bài về việc kết nối 2 máy tính thông qua sóng wifi hoặc chia sẽ kết nối internet cho 2 laptop…thì tôi có thể trả lời các câu hỏi ngay lập tức sau khi tìm hiểu bởi vì “dụng cụ” đều đang sẵn có. Còn sau đó vài tháng, nếu bài viết đó có comment hỏi về vấn đề gì đó, tôi không dám trả lời bởi vì không có điều kiện để tìm nguyên nhân dựa trên câu hỏi mà các bạn nêu ra.

Hiện tại, laptop của tôi đã cho thằng em họ mượn rồi nên nếu gặp các câu hỏi liên quan đến wifi thì pó tay là cái chắc. Với vấn đề kết nối thì tôi cũng chả biết đào đâu ra cái laptop thứ 2 để test nữa, Haizzz. Mới nhất, tôi nhận được comment của bạn “HoangMy” (nhớ tên luôn) hỏi về cách gỡ HotSpot Shield ra khỏi máy tính. Và tôi đang cài máy ảo để test thử rồi mới trả lời. Haizz. Tôi sẽ cố gắng trả lời hết nhưng mong các bạn thông cảm, có những câu hỏi yêu cầu tôi phải test lại bài viết mới có thể trả lời được.

Tôi đang cố trả lời comment và bài viết này là câu trả lời cho một comment hỏi về cách tạo hình thumbnail cho bài viết trên blog WordPress. Cách đây 1 tháng, tôi cũng đã hướng dẫn các bước thực hiện qua Yahoo cho một bạn nào đó rồi nhưng hình như là…không thành công thì phải !? Hehe, nghe đồn là bạn đó cài WordPress Offline. Tôi vẫn tự tin giới thiệu bởi vì tôi đã làm cách này lâu lắm rồi và thực hiện cho rất nhiều theme WordPress, tất cả đều chạy tốt. Vì vậy, hôm nay tôi giới thiệu cách làm.

Trước hết, bạn có thể hình dung bằng cách truy cập vào trang chủ của blog và xem thử : dưới chữ “Đọc tiếp….” hay có một tấm hình -> đó chính là hình thumbnail của bài viết mà tôi muốn hiển thị. Thực tế, bạn chỉ cần thêm một đoạn mã vào theme mà thôi. Cách làm như sau :

Tạo hình thumbnail cho blog bang custom field

Lưu ý : Nếu bạn copy đoạn code được giới thiệu dưới đây thì nhớ so sánh với hình minh họa được chụp bên trên để sửa lại cho chính xác nhé, tôi sợ đoạn code bị sai do lỗi hiển thị.

Mở theme của blog, tìm tập tin “index.php”, dùng notepad để mở nó ra. Tìm đến đoạn :
while (have_posts()) : the_post(); ?> (được tô màu đen trong hình minh họa)

Ngay dưới đoạn code bên trên, bạn thêm vào dòng sau (tô màu đỏ trong hình minh họa) :
<?php $Thumbnail = get_post_meta($post->ID, ‘Thumbnail’, $single = true); ?>

Đoạn code bên trên có nhiệm vụ tìm giá trị của biến “Thumbnail” được gán trong bài viết (sử dụng Custom fields), giá trị của nó chính là đường dẫn của tấm hình (được người viết chèn vào khi viết bài sử dụng Custom Fields).

Tiếp theo, tìm đến đoạn (tô màu đen) :
<?php
if (is_search()){
the_excerpt();
}else{
the_content(‘>> Đọc tiếp…’);
}
?>

Ngay dưới đoạn code bên trên, thêm đoạn code :
<?php if($Thumbnail !== ”) { ?≷
<img src=”<?php echo $Thumbnail;?<” /≷
<?php } ?≷

Đoạn code trên dùng để hiển thị tấm hình với đường link được lưu trữ trong biến “Thumbnail” được lấy ra ở bên trên. Đoạn hiển thị này bạn có thể đặt ở bất kỳ đâu, ở đây, tôi đặt nó ở dưới chữ “Đọc tiếp…” mà bạn thấy ở trang chủ.

Vậy là xong phần cấu hình. Giờ để nó hoạt động, bạn vào phần soạn thảo bài viết, sẽ thấy phần Custom Fields. Nếu chưa thấy thì bạn xem bài viết “Custom fields đã biến mất ?” để biết cách làm nó xuất hiện.

Để sử dụng, bạn bấm vào dòng chữ “Enter new”, và nhập vào chữ “Thumbnail” ở ô Name. Nhập xong bấm nút “Add Custom Field” để thêm mới, phần Value cứ để rỗng.

Tạo hình thumbnail cho blog bang custom field

Tạo hình thumbnail cho blog bang custom field

Sau khi add nó vào, từ giờ trở đi, muốn sử dụng, bạn bấm vào combo hiện ra và chọn “Thumbnail”, sau đó nhập đường dẫn của tấm hình vào ô Value, sau đó bấm “Add Custom Field” là xong.

Tạo hình thumbnail cho blog bang custom field