Chèn Thumbnail cho bài viết với Custom fields

Posted on

Trong bài này, chúng ta sẽ làm quen với việc chèn thêm Thumbnail cho mỗi bài viết với chức năng mở rộng Custom Fields của Wrodpress.

Tìm hiểu về Custom Fields

Hiện nay một số theme có thiết lập sẵn chức năng chèn Thumbnail cho mỗi bài viết và có hướng dẫn sử dụng chúng. Nếu bạn đang dùng theme loại này, bạn chỉ cần mở file readme để xem và thực hiện theo hướng dẫn. Bài này mình tập hợp một số hướng dẫn về chèn thumbnail cho những theme không tích hợp sẵn tính năng này.

Về cơ bản, Custom fields cho phép chúng ta bổ sung một số tính năng cho bài viết của blog. Cụ thể là khả bổ sung các tính năng sau:

  • Thumbnail
  • Hình ảnh

Việc chèn thumbnail hoặc hình ảnh vào bài viết được thực hiện khá đơn giản bởi WordPress “sinh ra” đã cho phép blogger làm điều đó (mặc định). Nhưng nếu bạn muốn chèn thêm thumbnail vào bài viết trên trang chính (Index) chứ không phải trang đơn lẻ (Single). Thì chức năng Custom Fields sẽ cho chúng ta làm điều đó.

Thêm thẻ Custom Field

Để thêm tính năng custom fields, bạn tạo một Post bình thường như bao bài viết khác. Sau đó di chuyển xuống dưới và tìm đến phần Advanced Options .

Bạn bấm vào dòng chữ [Enter new] để thêm vào từ khóa “Thumbnail” vào ô trống [Name]. Nhìn sang bên phải bạn thấy một ô khá lớn [Value]. Ô này dùng để điền đường dẫn tới file hình ảnh mà bạn muốn sử dụng làm Thumbnail cho bài viết đang soạn. Bạn chỉ vào mục Media và copy đường dẫn hình ảnh và chép vào ô trống nói trên. Sau đó bấm vào phần [Add Custom Field] để lưu lại. Từ khóa “Thumbnail” này sẽ được lưu lại và tồn tại mãi ở đó. Khi nào cần sử dụng, bạn bấm vào ô [Name] để “lôi” nó ra.

Chèn mã tạo Thumbnails

Việc tiếp theo là chúng ta bổ sung một đoạn code dưới đây vào trong file index.php

Trong Dashboard, bạn tìm đến phần [Apperances] -> [Editor]-> Di chuyển sang lề bên phải, tìm file có phần mở rộng php với tên (thường là) Index.php, bấm chọn để chỉnh lại code của nó.
Bạn tìm đến dòng lệnh:

< ?php while (have_posts()) : the_post(); ?>
...
< ?php endwhile; ?>

Đoạn mã ở giữa là nội dung mà Theme sẽ “ra lệnh” tạo các Post trên trang chính (trang nhất) của blog. Bạn chèn vào giữa đoạn mã sau để tạo Thumbnail.

<img src="ID, " alt="" />

Đoạn mã này có chức năng xuất hình ảnh theo đường dẫn mà bạn đã copy và dán vào ô [Value] ở phần trên. Bạn có thể để nó ở đâu cũng được giữa vòng lập while … loop.

Sau khi dán đoạn mã trên, bạn di chuyển xuống phía dưới và nhấn vào phần [Update Files] để lưu lại. Bây giờ thì bài viết mới của bạn đã xuất hiện “Thumbnail” bên cạnh (như bạn xem trên blog này vậy).

Chúc các bạn thành công.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s