Thiết kế theme WP: sử dụng post thumbnail image

Hôm nay mình muốn giới thiệu đến các bạn cách sử dụng post thumbnail image trong wordpress. Đây là tính nằng khá tốt của wordpress, tính năng này giúp bạn hiển thị hình đại diện cho bài viết tương tự như trang chủ của bcdonline.net.

Khai báo sử dụng post thumbnails

Đầu tiên bạn mở file functions.php của theme bạn lên khai báo cho wordpress bít là bạn sẽ sử dụng tính năng post thumbnail image.

  add_theme_support( 'post-thumbnails' ); 
Sử dụng featured image trong bài viết

Tính năng này được tạo ra khi bạn sử dụng post thumbnails, sau khi khai báo trên bạn vào add new post một bài mới bạn sẽ thấy mục hỗ trợ featured image

Set featured image WordPress

Set featured image WordPress

Bạn bấm vào Set featured image trình duyệt sẽ mở chọn bạn chọn file image để upload. Sau đó bấm vào Use as featured image và save lại.

Use as featured image wordpress

Use as featured image wordpress

Lúc này update bài viết lại.

Hiển thị featured image

Công việc bây giờ là hiển thị featured image ra ngoài giao diện trang chủ hay bài viết của bạn. Bạn mở file index.php lên trước content hôm trước bạn gõ đoạn code sau vào.

<!--
<?php 
     if ( has_post_thumbnail() ) {
           the_post_thumbnail();
} 
?>
-->

Hàm này kiểm tra nếu tồn tại post thumbnail thì hiển thị ra. Lúc này save lại và chạy thử ta được.

Index post thumbnail wordpress demo

Index post thumbnail wordpress demo

Giờ thì style lại là đẹp như mơ thôi hehe…

Kết luận:

Vậy coi như ta đã thêm được một tính năng cho theme mình làm cho phong phú thêm. Bạn có thể ứng dụng linh hoạt và sử dụng nhiều lần trong bài viết.

VN:F [1.9.22_1171]
Rating: 10.0/10 (4 votes cast)
Thiết kế theme WP: sử dụng post thumbnail image, 10.0 out of 10 based on 4 ratings
Share This