Blogging Life

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

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 như hình dưới đây.

Ad thumbnail Custom Fields

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="<?php echo get_post_meta($post->ID, "Thumbnail", true);?>" />

Đ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.

  • Share/Save/Bookmark





Article Comments4 Comments

  • Nguyên Anh

    Posted on April 17th, 2010 at 10:29 am

    Mình đã làm như bạn hướng dẫn nhưng cái hình Thumbnails to quá. Bạn có cách nào làm cho bài viết không hiển thị lại hình Thumbnails khi đọc redmore không?
    Giúp mình nhé.

  • Trầm Giang

    Posted on April 23rd, 2010 at 9:28 pm

    Chào bạn,

    Nếu làm theo cách này thì thumbnails không xuất hiện lên bài viết đâu. Có chăng là do bạn chèn thêm ảnh vào bài viết chứ nhỉ? Mình chưa hiểu ý bạn.

    Trầm Giang

  • Duongst

    Posted on May 17th, 2010 at 8:11 am

    Chào bạn nếu mình muốn Chèn Video hoặc mp3 thì code như thế nào ạ!
    Ban vui lòng hướng dẫn các bước tiếp theo khi mình mới Active plug-in video và MP3 xong thì phải làm gì nữa ạ??? Mình mới nghiên cứu nên không rành lắm, mong được giúp đỡ!
    Thanks so much!

  • Trầm Giang

    Posted on June 28th, 2010 at 6:56 am

    Chào bạn,

    Cảm ơn bạn đã ghé thăm.

    Cách đơn giản nhất để chèn nhanh các clip hoặc file MP3 thì bạn chèn trực tiếp trong phần soạn thảo.

    Bạn nhìn lên góc trái phía trên trong phần soạn thảo. Tìm đến chữ

    [Upload/Insert] và bên phải bạn thấy 4 biểu tượng mờ mơ:

    1. Chèn hình ảnh
    2. Chèn Video Clip
    3. Chèn file nhạc
    4. Chèn các file media khác.

    Bạn bấm vào biểu tượng muốn chèn và làm theo màn hình hướng dãn nhé.

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

Leave a Comment

Required
Required (Won't be published)
Optional
Avatar
Add your picture!
Join Gravatar and upload your avatar. It's free!