Tạo Featured Image cho bài viết trên blog WordPress

Như các bạn đã biết, Featured Image của bài viết là hình ảnh đại diện cho bài viết đó. Ảnh này có thể được sử dụng trong một số theme có hiển thị ảnh đại diện cho mỗi bài viết ở trang index, hoặc có thể sử dụng làm ảnh thumbnail ở các mục bài viết liên quan, bài viết mới, bài viết ngẫu nhiên…Ở bài viết này, mình sẽ giới thiệu một số kỹ thuật nhỏ giúp bạn tạo Featured Image bằng phương pháp thủ công hoặc tự động và một số kỹ thuật liên quan đến ảnh thumbnail của bài viết.

Xem thêm: Tạo nhiều ảnh thumbnail cho bài viết WordPress

Tạo Featured Image cho bài viết

Để tạo featured image cho mỗi bài viết bằng phương pháp thủ công, trong quá trình soạn thảo bài viết, bạn chú ý đến mục Featured Image ở ngay bên dưới mục Tags.

featured imageClick vào Set featured image và chọn một ảnh trong Library hoặc upload một ảnh mới.
set featured imageCuối cùng bạn sẽ được như thế này:

set featured image 2Nếu bạn muốn chọn một ảnh khác, bạn click vào Remove featured image để xóa hình vừa chọn và làm lại từ đầu.

Set Featured Image tự động

Kỹ thuật nhỏ sau đây sẽ giúp bạn tự động tạo featured image cho mỗi bài viết bằng cách lấy hình ảnh đầu tiên trong bài viết làm featured image. Tất nhiên là bài viết của bạn phải có sử dụng hình ảnh thì mới có thể áp dụng kỹ thuật này, với những bài viết không có hình ảnh, bạn phải làm thủ công giống như bên trên.

Ta sử dụng đoạn code sau chèn vào file functions.php trong theme của bạn:

add_action( 'save_post', 'raynoblog_set_featured_image' );
function raynoblog_set_featured_image() {
	if ( ! isset( $GLOBALS['post']->ID ) )
		return NULL;		
	if ( has_post_thumbnail( get_the_ID() ) )
		return NULL;			
		$args = array(
			'numberposts'    => 1,
			'order'          => 'ASC', // DESC for the last image
			'post_mime_type' => 'image',
			'post_parent'    => get_the_ID(),
			'post_status'    => NULL,
			'post_type'      => 'attachment'
		);			
		$attached_image = get_children( $args );
		if ( $attached_image ) {
			foreach ( $attached_image as $attachment_id => $attachment )
				set_post_thumbnail( get_the_ID(), $attachment_id );
		}			
}

Chú ý là featured image chỉ được tạo sau khi bạn click Publish hoặc Update bài viết. Trong trường hợp bài viết của bạn có  sử dụng hình ảnh nhưng bạn không thích sử dụng ảnh đầu tiên làm featured image thì bạn có thể xóa nó và chọn lại ảnh khác như bên trên.

Tạo ảnh thumbnail mặc định cho bài viết

Kỹ thuật này sẽ giúp bạn tạo ra hình ảnh thumbnail mặc định cho các bài viết không có feature image. Ta sử dụng code sau:

add_filter( 'post_thumbnail_html', 'raynoblog_post_thumbnail' );
function raynoblog_post_thumbnail( $html ) {
    if ( empty( $html ) )
        $html = '<img src="' . trailingslashit( get_stylesheet_directory_uri()) . 
                 'images/default-thumbnail.png' . '" alt="" />';
    return $html;
}

Bạn phải đặt tên cho ảnh bạn sử dụng làm ảnh thumbnail là  default-thumbnail.png và up vào folder images trong theme của bạn.

Featured Image và ảnh thumbnail nếu được sử dụng hợp lý sẽ tạo ra những nét độc đáo cho blog của bạn. Hy vọng các kỹ thuật nhỏ này có thể hổ trợ cho bạn phần nào. Chúc bạn thành công!

Đánh giá bài viết này

Tìm trên Google
  • cách để feature picture không hiện trong post

Chú ý - WordPress Hosting 1$/tháng - miễn phí tên miền

Bạn có biết GoDaddy đang có khuyến mãi WordPress hosting chỉ còn 1$/tháng kèm theo một tên miền .COM .NET .ORG miễn phí. Hãy đăng ký ngay để tiết kiệm chi phí nhất nhé.
Xem ngay

ĐĂNG KÝ NHẬN TIN QUA EMAIL

Nếu thấy bài viết trên blog có ích cho bạn, hãy đăng ký nhận tin qua email để cập nhật bài viết mới nhanh nhất và thỉnh thoảng nhận quà bất ngờ!

Comments

  1. Cảm ơn bạn nhiều lắm, trước giờ mình toàn làm thủ công mệt quá

  2. Nguyễn Đình Phú says:

    bài viết rất chất lượng {c27} cả ngày hôm nay chưa ghé thăm blog của bạn {c2}
    Đặt cục gạch {c5}

  3. Mình cũng đang tập tọe về wordpress. nói chung là đang trong quá trình học hỏi nên khá chăm tìm kiếm thông tin. Thank bác về bài viết hay. Bác và em trao đổi liên kết nha {c6}

  4. Hỏi ngoài lề bác tí, bác có plugin nào để tạo ra cái ” Click để đăng ký host gato giảm giá 30%” ở cột bên phải, sau đó hiện ra mã bấm OK rồi ra link thế bác. chia sẻ anh em mới tập tọe làm web

    • Cái đó không cần dùng plugin đâu bác ơi, chỉ cần dùng code HTML này thôi

      <input onclick="window.open('http://raynoblog.com/go/hostgator');  s=prompt('Sử dụng coupon giảm giá bên dưới khi thanh toán:','HG30')" type="button" value="Click để đăng ký HostGator giảm giá 30%" >
      
  5. Hỏi hơi phiền bác tí, là phải điền bằng ta nếu mình muốn đặt đoạn đó vào một bài viết bất kỳ phải không bác.

  6. Insta Member says:

    Trước giờ mình toàn dùng bằng tay để chèn ảnh thấy rất thời gian. Mình đã thử và áp dụng thành công theo hướng dẫn của bạn. Thanks bạn đã chia sẻ.

  7. Hung Tran says:

    mình làm rồi.. mà tại sao hk hiện nè .. bạn ghé qa xem giùm mìh với .. hoặc cho mình yahoo để liên hệ nhé

  8. Dùng wordpress mà bây giờ mới biết điều này :v
    Cảm ơn bác. Bài viết rất có ích

  9. làm được rùi thích quá giờ đi nghịch thui

  10. Cho mình hỏi chút! ví dụ mình sử dụng Plugins: Auto_post_Thumbnail rồi! các Popular đã hiển thị ảnh thumb! Nhưng mình lại muốn phần các trang hiển thị bên ngoài ví dụ http://apkmani.co chẳng hạn! ảnh cỡ lớn rõ ràng và không muốn bị chèn thêm ảnh thumb nhỏ vào trên đỉnh ảnh lớn trông rất xấu! bạn có cách nào khắc phục không? Tức là phần RandomPost vẫn có ảnh thumb nhưng phần như Apps, Theme, Game…. thì chỉ có ảnh lớn lúc post mà không có ảnh thumb! thank’s

  11. Cho mình hỏi chút! ví dụ mình sử dụng Plugins: Auto_post_Thumbnail rồi! các Popular đã hiển thị ảnh thumb! Nhưng mình lại muốn phần các trang hiển thị bên ngoài ví dụ http://apkmani.co chẳng hạn! ảnh cỡ lớn rõ ràng và không muốn bị chèn thêm ảnh thumb nhỏ vào trên đỉnh ảnh lớn trông rất xấu! bạn có cách nào khắc phục không? Tức là phần RandomPost vẫn có ảnh thumb nhưng phần như Apps, Theme, Game…. thì chỉ có ảnh lớn lúc post mà không có ảnh thumb! thank’s

  12. Đặt gạch hóng mới đc

  13. Thanks Admin.
    Mình thấy dùng plugin Auto Post Thumbnail cũng tiện lắm

  14. Bác ơi cho em hỏi tí: em đang xài theme này: Esplanade. Không biết có phải do nó ko mà cái widget Featured Image trong phần soạn thảo bài mới nó ko thể mở rộng, tắt xong bật lại trong Screen Option cũng ko ăn thua.

  15. Nhược Đồng says:

    mình đã làm theo chỉ dẫn nhưng vẫn k dc bạn ơi! chẳng biết bị sao ý huhuhu

  16. Bài viết hay và dễ hiểu, thank bạn đã chia sẻ {c27}

  17. nguyen van says:

    Bạn ơi vậy mình sử dụng nhu thế nào vậy chỉ mình với mình ..mình mới vào nghề.

    cảm ơn admin và các bạn

  18. cho mình hỏi là mình muốn đặt ảnh đại diện nhưng không muôn nó hiện bên trong bài viết của mình thì có cách nào làm được không vậy bạn.

    • Bạn chỉ cần thêm Tạo Featured Image cho bài viết như ở trên mình hướng dẫn, đừng chèn ảnh vào bài viết là được mà. Nhưng có một số theme sẽ hiển thị ảnh Featured Image trong bài viết, bạn vào file single.php tìn xem có không rồi xóa nó đi

  19. bài viết rất hay,cảm ơn 🙂

  20. Mình dùng plugin: Auto_post_Thumbnail rồi, đã hiện ra Thumbnail, nhưng mình muốn chèn thẻ alt vào các thumbnail này ko biết thế nào, admin giúp cho site mình với nhé. Mò mẫm mãi mà ko biết chỉnh chỗ nào đang chán wa

    • Để thêm thẻ alt vào ảnh bạn có thể sử dụng thử plugin SEO Friendly Images

      • Mình thêm cái SEO Friendly Images rồi, nhưng chỉ được trong phần bài chi tiết, còn mấy cái ảnh thumbnail thì chưa được không hiểu vì sao? Cái này chắc fai chỉnh sửa trong phần thubnail mới được, nhưng mình mò mẫm mãi mà không ra

  21. luutoan says:

    Chào bạn. Web của mình đã làm như bạn hướng dẫn mà vẫn không hiện ảnh thumb ở trang chủ đc. web http://candykidshop.com mình cài lỗi từ timthumb mà mình loay hoay mãi chưa xong . thankss

  22. Chào bạn, rất vui được ghé blog của bạn. Bài viết rất hữu ích, cảm ơn bạn. Mình đã làm được với ảnh up lên host. Nếu lấy ảnh trong bài viết mà là 1 link ở trang khác thì code sẽ như thế nào hả bạn? Cảm ơn bạn rất nhiều!

  23. Mới làm cái hướng dẫn có liên quan đến điều này. Bổ sung cập nhật thêm tính năng nếu copy đường dẫn hình ảnh từ bên ngoài đi bạn.

  24. Linh FPT says:

    Nếu không muốn hiện ảnh thumb này ở post thì làm tn bác nhỉ

  25. làm mãi không được chán wa. slide ảnh toàn bị nhỏ

  26. Úi trước giờ toàn làm thủ công, cảm ơn bác đã soi sáng cho em

  27. Hay quá! Có thể Set Featured Image tự động. Trước mình cũng toàn làm thủ công, cảm ơn bài viết của bác!

  28. Cám ơn anh vì chia sẻ.. Một bài viết quá hay…Em có chút suy nghĩ..Không biết mình có thể mặc đinh là ảnh thumabil, nếu không có ảnh thumabail thì lấy ảnh đầu tiên cho ảnh luôn…Kiểu if ..else à..Không biết phải thế nào ? Mong anh hỗ trợ {c20}

  29. bạn cho hỏi, mình mới thay theme cho site. Cái featured image nó ko hiển thị bên trái của nội dung nữa, mà nó nằm ngay đầu trang bên trái, toàn bộ nội dung nằm ở dưới. Phải vào đâu chỉnh sửa vậy bạn. Cám ơn

  30. Hic. Trước giờ làm bằng tay mỏi mệt. Blog của bạn rất hữu ích

  31. Trần Hồ Thanh Nhàn says:

    Chào Bạn !

    Bạn có thể giúp mình cùng Anh/Chị/Em trên mạng ngày biết nhiều hơn đến Blog của bạn:

    Bạn chỉ giúp ! mình muốn tạo đường dẫn URL trên hình đại diện của trang báo sử dụng wordpress – khi kích vào hình đại diện

    featured image nó sẽ dẫn đến một trang báo của trang web khác được không ?

  32. Chào bạn!
    Mình muốn hiển thị ảnh tiêu biểu lên bài viết. Mình click vào phần chọn ảnh, upload được ảnh rồi nhưng ảnh vẫn không hiển thị được. Mong được sự giúp đỡ từ bạn. Thanks

  33. Chào raynoblog,
    Mình muốn tắt luôn ảnh này đc không? Nếu không chắc dùng css để display nó quá, nhìn không thích lắm. Theme mình dùng, mặc định hiện hình này, không chọn nó sẽ cho ra cái hình mặc định của nó, Nhiều bài viếc không có hình nhìn xấu quá.
    Cám ơn tác giả.

Gửi bình luận

Lưu ý: Không sử dụng keyword để thay cho tên của bạn, hãy sử dụng tên thật. Cảm ơn bạn đã tham gia bình luận trên blog!