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

Published by Việt Coding on

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)

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.

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:

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.

Quảng cáo tài trợ

Đăng ký nhận bài mới qua email

Nhập email của bạn vào đây để nhận được thông báo khi có bài viết mới. Hoàn toàn MIỄN PHÍ !!!


Việt Coding

Là một người đam mê lập trình, tôi vọc vạch đủ thứ liên quan đến lập trình cho thoả chí tò mò. Hiện làm chủ yếu ở mảng phát triển ứng dụng di động cho iOS và Android với React Native.Thỉnh thoảng vọc vạch mấy thứ liên quan đến Internet of Things như Smart Home. Đang nghịch mấy con Raspberry Pi và thấy nó cũng thú vị :)

21 Comments

BKMetalx · 15/06/2010 at 10:06

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

    Việt Coding · 15/06/2010 at 20:47

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

      BKMetalx · 23/06/2010 at 15:36

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

Sức khoẻ gia đình · 15/06/2010 at 20:12

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

    Việt Coding · 15/06/2010 at 20:49

    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ờ ?

      Sức khoẻ gia đình · 20/06/2010 at 16:24

      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ĩ =-.

    Hùng · 18/06/2010 at 20:12

    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í =-.

      Mr.tỏ[email protected] · 18/06/2010 at 23:26

      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ỏ[email protected]´s last blog ..10+ cách để tạo nguồn traffic lớn cho blog =-.

Quoc Hung · 19/06/2010 at 12:43

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

    Việt Coding · 20/06/2010 at 09:45

    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 ?

Quoc hùng · 20/06/2010 at 12:27

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^^

Tôi Yêu Google · 23/06/2010 at 18:13

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

Nguyên Anh · 21/07/2010 at 12:49

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ẻ

nhật tuấn · 22/08/2010 at 18:34

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 😀

Không Sai · 03/10/2010 at 15:41

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.

    Việt Coding · 04/10/2010 at 19:42

    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 😀

tuabc · 24/10/2010 at 00:11

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.

    Việt Coding · 24/10/2010 at 15:13

    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.

tuabc · 24/10/2010 at 00:12

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

du hoc nhat ban · 30/07/2013 at 11:53

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

cường · 31/03/2014 at 12:05

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/

Leave a Reply

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