4826 fans
1036 reader
122 followers

WordPress – Post Thumbnail

Publish by: Demon Warlock
In category: Essentials
35 comments

Trước đây tôi đã hướng dẫn bạn cách sử dụng Custom Field để tạo post thumbnail, và cách dùng PHP để tự tạo thumbnail từ hình trong bài post. Tuy nhiên với WordPress từ phiên bản 2.9+ trở lên, bạn có thể sử dụng một tính năng mới để tạo post thumbnail đơn giản hơn nhiều.

Thời lượng: 5:30

Download định dạng .mp4 chất lượng cao :MediaFire

Dung lượng: 11 MB

Code dùng trong Video

Ban đầu bạn mở file functions.php trong theme của bạn ra và thêm dòng này vào trên cùng.

add_theme_support('post-thumbnails');
//nếu bạn muốn chỉ dùng với post
add_theme_support('post-thumbnails', array('post'));
//Nếu bạn muốn chỉ dùng với page
add_theme_support('post-thumbnails', array('page'));

Tiếp theo bạn mở file single.php hoặc index.php và thêm đoạn mã sau vào TRONG WordPress Loop.

&lt;?php the_post_thumbnail();?&gt;
//Hoặc kiểm tra xem nó có tồn tại hay không trước khi in ra
&lt;?php if(has_post_thumbnail()) {the_post_thumbnail();}?&gt;

Cuối cùng bạn có thể style cho nó bằng CSS với class=’wp-post-image’

Demon Warlock

Tôi được sinh ra ở Việt Nam, nhưng hiện tại đang sống và làm việc tại Mỹ. Ngành tôi học không có liên quan gì đến thiết kế web. Nhưng đây là sở thích từ ngày còn là sinh viên du học, do vậy bây giờ dù cho đang đi làm nhưng tôi vẫn thích dùng thời gian rảnh rỗi của mình để học về thiết kế web. Như các bạn, tôi cũng việc mày mò tự học và khám phá.

logoart.vn

Lấy ảnh featured image trong vòng lặp loop while:

function get_featured_img($post_id){
$img_id = get_post_thumbnail_id($post_id); // lấy id của hình
$images = wp_get_attachment_image_src( $img_id, false, false ); // lấy link hình featured
return $images[0]; // 0: link hình ; 1: width ; 2: height
}
http://taigamehotchodienthoai.com mr.oxiu

Anh ơi, sao k được, nó bào lỗi chưa khai báo hàm.

Fatal error: Call to undefined function has_post_thumbnail() in DL\\…\wordpress\wp-content\themes\game\index.php on line 21

Anh sửa cho e với. Dường như trang của em nó k gọi được trang function.php
Dark Knight

Anh DW, anh đã làm hoàng thiện gần 1 tutorial WordPress rùi. Sao anh ko làm tiếp về phần đăng nhập và đăng ký trong WordPress lun.
Hà Ngọc Tú

đã làm đc rồi ak
Hà Ngọc Tú

mình muốn lấy hình ngoài host mà ko muốn dùng timthumb thì sao vậy bạn ?
đây là web mình http://loikinhcuocdoi.net/trangchu/
mong bạn giúp. Thân
- http://www.vnwpthemes.com tanlevis
  
  thì link tới cái hình ở host khác thôi \:d/
tập tành

rất
http://tinbongda.us linhkaka

Chào các bạn ghé thăm website của mình nhé: http://tinbongda.us/.
- tập tành
  
  đây là chổ học hành , chớ hok phải vô spam link đâu nha pa
- http://www.freshbrand.vn Bùi Văn Lợi
  
  Mẫn oi! delete cái link kìa.
Duyanh

Mình vào đâu để xem funtions của nó mọi người để thuận tiện code á
NaRuTo

sao mình sài cái post_thumbnails trên cái ser byhost ko dc vậy, ai biết chỉ mình với
http://style4u.vn STYLE 4U

Thanks, mình đã làm được rồi
http://watersportvn.com water

video rất hay ! mình đang tìm cái này . bây giờ nhờ this video . mình làm được rồi . thanks men !
- Diện
  
  “nhờ this video” nghe “tởm” quá )
CrazyBom

Hi!

Mình muốn tùy chỉnh và gọi các giá trị title, alt của ảnh thumbnail thì phải làm thế nào vậy?
http://kenhtaichinh.102.vn kenhtaichinh.102.vn

trong database của wordpress hình ảnh và post liên kết nhau như thế nào nhỉ?
em tìm hoài mà chưa thấy >< bác nào chỉ duùm em với, em cảm ơn nhiều
http://www.atunad.com Nguyễn Ngọc TUân

Chào anh DW và các bạn;

website của em là atunad.com, em sử dụng theme free của wordpress. Nhưng gần đây, website của em bị mất hết category. Có khi xuất hiện lại, nhưng được vài bữa lại biến mất.

Ngoài ra em không thể chuyển Permalink, cứ chuyển theo hướng dẫn là website hiện trắng bóc. Giờ đường link rất xấu.

Mong anh chỉ em cách khắc phục.

Trân trọng;

atun
NdhaiQt

Hay quá. Cảm ơn anh nhiều
Em cũng mới tìm hiểu wordpress
Andy

Mọi người cho E hỏi nếu mà muốn làm cái giao diện như kiểu magazine thì làm thế nào để khi show bài trích dẫn ra thì được đúng 1 đoạn như mình mong muốn. Ví dụ là 180 kí tự. Với lại muốn show những tiêu đề bài viết cũ hơn thì làm như thế nào.
- http://simontran.com Duc Luan
  
  Chào anh DW – chào mọi người.
  
  Anh DW ơi hôm trước em xem có cái video có 1 đoạn hường dẫn chỉnh link menu ( category) trang hiện tai thì nó sẽ css khác đi . Mà em tìm lại rùi – tìm hoài ko thấy – ko biết nó là video nào a chỉ giúp em nha.
  
  Mọi người ai biết thì replay cho mình nha.
  
  thanks !
- http://www,themetiger.com Nguyen Duc
  
  Bạn viết một hàm PHP làm việc này, đây là 1 ví dụ:
  
  <?php
  function cut_string($str,$len,$more){
  if ($str=="" || $str==NULL) return $str;
  if (is_array($str)) return $str;
  $str = trim(strip_tags($str));
  if (strlen($str)
  
  Sử dụng (Với WP, ở đây giả sử nội dung cần cắt là the_content()):
  
  echo cut_string(get_the_content(),180,”…”);
  - http://wpcreative.info Lê Hoài Ân
    
    Chỉ cần add_filter cho hook the_excerpt là ok bạn à, hook thì nó hay hơn và có tác dụng trên toàn site.
    
    Bạn tham khảo thêm ở ste dưới :
    http://chrismeller.com/2007/06/changing-the-length-of-the_excerpt-in-wordpress
http://thanhtungit.net thanhtungit

anh ơi cho em hỏi cách đáng số cho comment vậy anh.
http://12-15.ìno Fukuo

Cám ơn DW đã có nhiều video hướng dẫn rất hay và dễ hiểu.

Trong phần Post Thumbnail này mình đóng góp 1 tí về cách resize ảnh trong chức năng này của WP

Việc resize thumbnail đc WP hỗ trợ, chỉ cần thêm 2 dòng sau vào file functions.php

add_theme_support( ‘post-thumbnails’ );

set_post_thumbnail_size( width, height, true ); // Normal post thumbnails
add_image_size( ‘single-post-thumbnail’, width, height ); // Permalink thumbnail size
- http://wpcreative.info Lê Hoài Ân
  
  Một post của mình liên quan đến topic này, các bạn có thể tham khảo.
  http://wpcreative.info/blog/wordpress/tip-trick-wordpress/using-post-thumbnail-wordpress-2-9-plus/
Nguyễn Quang Huy

Thanks anh DW nhiều,đây đúng là cái em đang cần,hehe
Mong anh có nhiều bài về wp hơn,Em cám ơn
gemlam

Thank anh DW !
Muốn lấy tên nhiều bài post trong 1 categories như thế nào vầy anh. Trong khi em đã dùng vòng lặp để hiển thị các bài post cho người dùng xem ra ngoài trang chủ rồi. Mong anh và các bạn giúp đỡ.
- Khánh
  
  mình cũng có thắc mắc giống như bạn
- http://www.izwebz.com tanlevis
  Thử sử dụng đoạn code sau xem thế nào
```
query_posts('cat=2&showposts=10');
if(have_posts()){
   while(have_posts()){
      the_post();
      echo '<h2>' . get_the_title() . '</h2>';
   }
}
wp_reset_query();
```
  Thử và cho kết quả xem
  - http://www.izwebz.com Demon Warlock
    
    Nhớ thay cat=2 thành id của category mà em muốn hiển thị post. À đoạn get_the_title() thì đổi thành the_title() thì tốt hơn. Hàm get_the_title() hơi khác chút
  - gemlam
    
    Thanks bạn và anh DW, đoạn code này hiển thị được title bài post. Ah, nếu mình muốn hiển thị thêm các title của categories khác mình cũng dùng đoạn code như trên, như vậy có tốt không, khi sủ dụng loop giống như vậy
    - tanlevis
      
      Vậy là U muốn lấy hết các category à, vậy thì xài get_categories(); tham khảo thêm ở code codex.
      http://codex.wordpress.org/Function_Reference/get_categories
      - gemlam
        
        Mình chỉ muốn lấy một vài categories thôi. Cho mình hỏi thêm, mình có tạo một vài link như: about, contact, author….trong Pages, nhưng khi click vào nó không chuyển đến trang signle.php ma vẫn ở trang index, mà mình đã dùng css style cho các post để display trong trang index.php rồi, mình muốn hỏi có cách nào để có thể css riêng cho các mục trong Pages không hay phải tạo about, contact, author… trong categories. Cảm ơn !
      - tanlevis
        
        wp k hiển thi page ở trang single.php mà hiển thị ở trang page.php. Nếu k có page.php thì sẽ redirec to index.php. U tham khảo thêm cách viết theme của wp. Còn muốn style riêng cho page đó thôi thì có thể dùng code style css luôn trong html của page cũng dc. Giống như code style css ở phần head đó thôi.

Izwebz store

Các series nên xem trên izwebz cho newbie

Khi vào izwebz chắc nhiều bạn cho rằng các bài viết trên izwebz đều không có hệ thống gì cả? Thực chất, các bài biết đều đi theo một series của riêng nó, ví dụ như PHP, HTML & CSS, PSD2HTML, Photoshop, illustrator,… Trong bài viết này, mình sẽ tổng hợp lại các series bài viết cần thiết cho một newbie.