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

10 Comments
  1. anh ơi, cái 000webhost đó e đăng ký hoài nó cứ verification in progress hoài à? làm sao đây?

    • Thực tế là họ ít quan tâm đến các đăng ký đến từ một số quốc gia nào đó, Việt Nam là một trong số đó. Rất ít lượt đăng ký thành công từ trang này trong vài năm trở lại đây.

      Nếu em thật sự muốn sử dụng thì nên có thành ý một chút là gửi mail cho bộ phận hỗ trợ nhờ xét duyệt tài khoản. Một email không được thì gửi 2 mail, 2 mail không được thì 3 mail. 3 mail không được thì…bỏ cuộc là vừa.

      Email viết bằng tiếng Anh và em không cần phải viết cầu kỳ đâu, ngắn gọn và đủ thành ý là được. Như vậy, tỉ lệ “sống sót” của em sẽ cao hơn và họ sẽ quan tâm đến đơn đăng ký host của em hơn.

      Chúc thành công nhé !

      • Anh hàng xóm ơi! anh có thể đăng ký giúp em một tài khoản ở 000webhost được ko? em đăng ký nhiều lần rồi mà ko được!
        Hoặc anh có thể giới thiệu cho em một vài free host ổn định, ko quảng cáo và tốc độ nhanh nhanh một chút nhé! Thanks anh

        • Việc đăng ký tại 000webhost hơi khó khăn. Khó ở chỗ admin của họ không xét đơn đăng ký của bạn, một phần là do đơn đến từ Việt Nam. Vụ này thì anh cũng pó tay. Em thử gửi mail đến bộ phận hỗ trợ nhờ họ “quan tâm” đến đơn đăng ký của em, có thể sẽ có tác dụng đó.

          Còn việc kiếm một cái host free theo tiêu chí : ổn định, ko quảng cáo, tốc độ nhanh thì anh chỉ biết có 1 cái là…000webhost mà thôi, hehe. Hoặc em tham khảo danh sách các host miễn phí tốt nhất tại : http://www.free-webhosts.com/no-forced-ads.php

  2. Mình cảm ơn bạn đã hướng dẫn. Hôm trước mình hỏi bạn nhưng sau đó mình đã máy mò và làm được rồi. Hôm trước mình không biết nên để cái code của thumnail ở lung tung nên hình nó cũng nhảy lung tung. Sau đó mình phát hiện ra có thể tao cho mình nhiều thumbnail. Mình tạo 1 cái <img src="ID, "Thumbnail", true);?>" /> ở dưới tiêu đề bài viết và 1 cái <img src="ID, "Thumb", true);?>" /> ở dưới chỗ “Xem thêm…”, sau đó mình muốn chèn dưới tiêu đề thì trong Custom Fields mình chọn name là Thumbnail và muốn chèn dưới “Xem thêm…’ thì chọn name là Thumb. Chỉ cần sửa lại tên trong phần code chèn vào.
    Hồi trước đây mình toàn vào sửa mấy file php trên web nên toàn không được, sau này mới biết là phải dùng FileZilla tải nó về sửa lại bằng gedit (mình dùng Ubuntu) rồi mới up lên lại.
    Cảm ơn anhhangxom vì những bài viết của bạn. Dù mình dùng Ubuntu nhưng mình vẫn hay vào blog của bạn lắm. Dĩ nhiên là những phần mềm trên window thì mình không dùng nhưng mà vẫn có thói quen vào blog này.

  3. Để đăng ký 000webhost bạn có thể cài hotspot shield, hoặc dùng socks hay fake ip j đó là có thể đăng ký dể dàng. Mình đã dùng cách này và đăng ký thành công 100%, active ngay sau khi bấm nút 😀

    • Hồi trước nó yêu cầu tải một phần mềm xác minh địa chỉ IP nên cách fake IP sẽ vô dụng. Hiện tại nếu nó ko bắt tải công cụ này thì việc fake IP có thể sẽ thành công. Thanks bạn.

  4. Trong wordpress đăng ký trực tiếp với host và domain của WP thì hoàn toàn không có chức năng đó. Anh hàng xóm có cao kiến gì không?

  5. Để sử dụng chức năng CSS custom thì phải mất 30$, chắc phải chuyển qua host riêng?

  6. Mình dùng plugin related posts thumbnail để hiển thị bài viết liên quan có thumnail. Ở phần setting, mình chọn custom field để có thể lấy thumbnail từ url (ngại post ảnh lên host vì liên quan đến vấn đề chuyển host). Tất cả xong xuôi. Giờ thumbnail màu trắng xoá. Vậy mình đã làm sai hay thiếu gì vậy?

Gửi phản hồi