post image

WordPress – Post Thumbnail

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.

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

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

«

»

30 Comments

( Comment bài này )
  1. Hà Ngọc Tú says:

    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

  2. tập tành says:

    rất

  3. linhkaka says:

    Chào các bạn ghé thăm website của mình nhé: http://tinbongda.us/.

  4. Duyanh says:

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

  5. NaRuTo says:

    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

  6. STYLE 4U says:

    Thanks, mình đã làm được rồi

  7. water says:

    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 !

  8. CrazyBom says:

    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?

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

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

  11. NdhaiQt says:

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

  12. Andy says:

    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.

    • Duc Luan says:

      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 !

    • Nguyen Duc says:

      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,”…”);

  13. thanhtungit says:

    anh ơi cho em hỏi cách đáng số cho comment vậy anh.

  14. Fukuo says:

    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

  15. Nguyễn Quang Huy says:

    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

  16. gemlam says:

    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 says:

      mình cũng có thắc mắc giống như bạn

    • tanlevis says:

      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

      • 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 :D

      • gemlam says:

        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 says:

          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 says:

            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 says:

            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.

  1. BB
  2. BB
  3. BB

arrow

Lưu ý khi post comment:

  • Không "bóc tem" topic
  • Dùng lời lẽ có văn hoá và lịch sự
  • Xem trang FAQs trước khi hỏi
  • Bạn có thể dùng thẻ HTML như:<strong>, <em>, <a>
  • Đặt code trong thẻ [php],[html],[javascript],[css]

Chọn kiểu gõ: Tự động TELEX VNI Tắt