Thêm hình thumbnail cho bài viết dễ dàng với plugin fw-post-image – Phần 1



Sau khi Việt Coding chuyển sang dùng theme Thesis, có nhiều comment hỏi về cách thêm hình đại diện (thumbnail) cho bài viết vì như các bạn cũng thấy là Thesis mặc định không có phần này. Thật ra, nếu chịu khó tìm kiếm, các bạn sẽ dễ dàng tìm thấy khá nhiều bài viết nói về chủ đề này như bài Tự lấy ảnh trong bài viết của Hư Trúc. Về cách hook thì khá tương đồng chỉ khác nhau ở kỹ thuật lấy hình ảnh.

Ảnh thumbnail giúp blog của bạn sinh động hơn

Ảnh thumbnail giúp blog của bạn sinh động hơn

Đa số các bài viết khác đều sử dụng phpThumb, ở đây Việt Coding sử dụng một plugin là fw-post-image. Các bạn có thể đọc qua mô tả của tác giả:

This plugin does not work with WordPress version prior to 2.9 !
Since WordPress 2.9, you can choose which image will represent a post and will be displayed as thumbnail. This plugin allows backward compatibility for your former posts.
it filters on the_post_thumbnail() function. If no post thumbnail is defined, the plugin will get first image belonging to post. If it still doesn’t find any image, it will scan for the first image found post content.

The image will be displayed according to the arguments (size and attributes) set when calling the_post_thumbnail().

Như vậy, phương thức lấy ảnh của fw-post-image là hoàn tự động theo thứ tự ưu tiên sau:

  1. Lấy ảnh ở phần Post Thumbnail mà bạn chọn khi post bài (chỉ có từ WordPress phiên bản 2.9 về sau)
  2. Lấy hình ảnh đầu tiên trong bài viết
  3. Quẻt toàn bộ và lấy ảnh đầu tiên trong phần nội dung bài viết.

Theo đánh giá của Việt Coding đây là một plugin khá tốt, ngoài khả năng lấy hình ảnh trong bài viết mà tác giả đã mô tả ở trên, plugin này còn có khả năng lấy được ảnh bên ngoài hosting. Chức này khá là tiện lợi cho các bạn chơi autoblog (các bạn có thể xem demo tại ADNews – Trang tin tức Tổng hợp dành cho người Việt) Tuy nhiên, nó có một nhược điểm là không tự resize được với ảnh ngoài host. Giới thiệu vậy Việt Coding nghĩ là đủ, chúng ta đi vào nội dung chính nhé.

Trước hết, các bạn download plugin và kích hoạt nó. Bước tiếp theo là hướng dẫn thêm thumbnail cho các theme thông thường và Thesis.

Phần 1: Thêm thumbnail vào theme bình thường.

Đầu tiên, chúng ta thêm đoạn code sau vào cuối tập tin Theme Functions (/wp-content/themes/theme-bạn-đang-dùng/functions.php)

[php]
<?php
if ( function_exists("add_theme_support") )
{
add_theme_support("post-thumbnails");
}
?>
[/php]

Tiếp đó, chúng ta thêm đoạn code sau vào Main Index Template (/wp-content/themes/theme-bạn-đang-dùng/index.php) – nơi mà bạn muốn thumbnail hiển thị. Cái này tuỳ vào theme bạn đang dùng mà có chọn lựa thích hợp.

[php]
<?php
if ( function_exists("has_post_thumbnail") && has_post_thumbnail() )
{
the_post_thumbnail(array(200,100), array("class" => "alignleft post_thumbnail"));
}
?>
[/php]

Bước cuối cùng là đảm bảo Stylesheet (/wp-content/themes/theme-bạn-đang-dùng/index.php) của bạn đã có khai báo định dạng cho thumbnail. Mở và kiểm tra xem đã có khai báo alignleft hay chưa. Đó là một khai báo mặc định của WordPress nên thường 99% các theme đã có sẵn, 1% còn lại sẽ không có. Vì vậy bạn có thể thêm 1 dòng khai báo vào Stylesheet như sau:

[css]
.alignleft { float:left; } /* Khai báo vị trí của thumbnail */
[/css]

Bạn có thể tuỳ chỉnh thêm như margin, padding, border,… để có một thumbnail hài hoà với các phần khác trên blog.

Đến đây đã hoàn tất, bạn thử kiểm tra lại trang index của blog đã hiển thị thumbnail chưa nào 🙂

Mời các bạn đón xem tiếp phần 2 của bài viết nhé. Phần 2 sẽ hướng dẫn các bạn thao tác trên Thesis theme.

About Author

Tuấn Anh

Là một người đam mê lập trình, hiện tập trung mảng phát triển ứng dụng web dựa trên nền tảng của WordPress. Đồng thời, nhằm đạt sự trọn vẹn trong công việc freelance, tôi đang học đồ hoạ, để có thể tự mình thiết kế layout, logo và những thứ khác liên quan đến đồ họa. Mục tiêu vài năm tới: Tôi sẽ là Full Web Developer = Graphics Design + Coding. Vietcoding Blog viết về WordPress, chia sẻ kinh nghiệm, mẹo vặt, viết plugin, làm theme và ôm ấp ý tưởng viết một Web Application Framework dựa trên WordPress. Đồ hoạ là chuyên mục đang được chuẩn bị trong tương lai.



21 thoughts on “Thêm hình thumbnail cho bài viết dễ dàng với plugin fw-post-image – Phần 1

  1. BKMetalx says:

    Chờ phần dành cho thesis của bác 😀

    1. Việt Coding sẽ cố gắng viết tiếp trong vài ngày tới 😀

      1. BKMetalx says:

        Lâu có phần tiếp theo thế bác 😀
        .-= BKMetalx´s last blog ..Những Bài Viết Của Chú DCL =-.

  2. thesis của bác sẽ lên hạng alexa vù vù cho xem, thesis và alexa bắt tay nhau.
    .-= Sức khoẻ gia đình´s last blog ..Eva Mendes khoe vòng một nóng bỏng =-.

    1. Bác có thể nói rõ hơn việc “bắt tay” là sao không ? Việt Coding chưa nghe nói đến bao giờ ?

      1. Theo cảm nhận của mình, tất cả bạn bè xài thesis đều tăng hạng chóng mặt, do SEO tốt, ví dụ trang sức khoẻ của mình xài theme tự làm có bình quân hơn 100 người online cùng lúc, tuy nhiên thua trang web chỉ có độ 10 người online xài thêm thesis và trang web chỉ mới tạo chừng 3 tháng.
        .-= Sức khoẻ gia đình´s last blog ..Cặp song sinh duy nhất có một não bộ suy nghĩ =-.

    2. Hùng says:

      Hai thằng này liên quan gì với nhau nhỉ?
      .-= Hùng´s last blog ..Quảng Cáo Miễn Phí =-.

      1. Mr.tỏi@wordpressviet.info says:

        Chắc bác ấy nói đùa ấy mà, mà em thấy các bác dùng thesis lên alexa cũng nhanh lắm, đúng là thesis có #, em thì cứ one-theme 2.0 mà phang
        .-= Mr.tỏi@wordpressviet.info´s last blog ..10+ cách để tạo nguồn traffic lớn cho blog =-.

  3. Quoc Hung says:

    MÌnh dùng Wp 2.8.3. Vậy là ko dùng được phải ko:(?. CHo mình hỏi có plugin nào tương tự như thế này active trên wp cũ hơn ko bạn. Thanks

    1. Phiên bản của bạn quá cũ rồi, sao không nâng cấp lên mới nhất ?

  4. Quoc hùng says:

    Mình vừa nâng cấp xong:). Vì sợ update lên sợ sơ suất gì nên lâu nay ko nâng cấp. Mới xài Wp đc. 1 tháng thui hà. Thanks bạn^^

  5. Chờ bác hack thêm dc mấy thủ thuật nữa mới áp dụng.
    .-= Tôi Yêu Google´s last blog ..Sử Dụng Google Voice Không Cần Thư Mời =-.

  6. Nguyên Anh says:

    Dù rất yêu thích mục này nhưng không phù hợp với trang của em. Thanks anh đã chia sẻ

  7. nhật tuấn says:

    anh Tuấn Anh cho em hỏi…em đã làm theo các bước trên mà vẩn không được, em đang dùng theme church 4.0 anh có thể giúp em được không ?….anh có thể cho em xin nick yahoo của anh để tiện liên lạc không ạh 😀

  8. Không Sai says:

    Cái tính năng upload của WordPress mình cảm thấy hơi phiền phức.. Upload 1 cái ảnh vào bài viết, nếu muốn hiển thị thumb thì ảnh phải là ảnh upload khi viết bài. Và sau khi upload xong, wordpress tự resize thành thêm 1 cái ảnh nữa trên hosting,để làm ảnh thumb. Như vậy là lãng phí dung lượng host, lãng phí băng thông ( vì ảnh phải load 1 cái thành 2 cái )
    Rất là khó chịu. Hi vọng cái plugin này giải quyết được vấn đề đau đầu của mình.

    1. Nếu vậy thì cái plugin này không đáp ứng được nhu cầu của bạn rồi 🙂 Vì nó làm chính xác những gì bạn miêu tả ở trên 😀

  9. tuabc says:

    bạn ơi cái bước điền đoan :
    <?php
    2. if ( function_exists("has_post_thumbnail") && has_post_thumbnail() )
    3. {
    4. the_post_thumbnail(array(200,100), array("class" => "alignleft post_thumbnail"));
    5. }
    6.?>

    minhf ko biết điền vào đâu đấy là file index.php của mình bạn điền hộ mình cái

    <a href="” rel=”bookmark” title=”Permanent Link to “>

    //

    ID, ‘thumbnail’, ‘alt=”‘ . $post->post_title . ‘”‘); ?>

    <a href="” rel=”bookmark” title=”Continue reading “>

    No posts found.

    1. Bạn gửi file index qua email để Việt Coding xem rõ hơn, chứ bạn chỉ post 1 đoạn ngắn thì Việt Coding không chắc chắn lắm.

  10. tuabc says:

    ko post được rùi
    Tiếp đó, chúng ta thêm đoạn code sau vào Main Index Template (/wp-content/themes/theme-bạn-đang-dùng/index.php) – nơi mà bạn muốn thumbnail hiển thị. Cái này tuỳ vào theme bạn đang dùng mà có chọn lựa thích hợp.

    thif cái cái vị trí ấy chọn thế nào hả bạn

  11. du hoc nhat ban says:

    cảm ơn bác nhiều nhé 😀

  12. cường says:

    Chào anh,thumbnail thì em làm được rồi nhưng mà sao cái của em nó nằm phía trên bài viết chứ không phải nằm bên cạnh như cái ảnh của anh,anh chỉ giúp em cho nó nằm bên cạnh bài viết và kích thước khoảng 150 x150 thôi demo trang em nè http://chaomaohot.net/


Got Something To Say:

Your email address will not be published. Required fields are marked *

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

GENESIS FRAMEWORK