Hướng dẫn sử dụng chức năng tạo thumbnail của WP2.9

05-04-2010 | 931 views | 0 phản hồi » |

Hôm nay tôi sẽ hướng dẫn bạn cách làm ảnh thumb cho giao diện của bạn với wp2.9. Trong bài hướng dẫn này tôi sẽ sử dụng giao diện mặc định của wordpress để trình bày chi tiết những việc phải làm. Tương tự như các bước tôi trình bày trong bài viết này, bạn có thể ứng dụng nó cho giao diện của mình đang sử dụng.

Bước 1: Chỉnh sửa tập tin functions.php

Bạn hãy copy và past đoạn code sau vào tập tin functions.php.

1 // Enable support for post-thumbnails

`2`	`add_theme_support('post-thumbnails');`

`3`	`// If we want to ensure that we only call this function if`

`4`	`// the user is working with WP 2.9 or higher,`

`5`	`// let's instead make sure that the function exists first`

`6`	`if ( function_exists('add_theme_support') ) {`

`7`	`add_theme_support('post-thumbnails');`

8 }

Sau khi thêm đoạn code đó vào tập tin functions.php, bạn sẽ có thêm 1 menu Post Thumbnail trong trang viết bài mới như hình bên dưới.

Bước 2: Chỉnh sửa trang chủ, ở đây tôi có tập tin index.php.

1<?php the_post_thumbnail(); ?>

Tôi sẽ chèn đoạn code trên vào vị trí như trong hình bên dưới.

Bước 3: Upload hình ảnh.

Đầu tiên tất nhiên là phải Viết bài mới rồi đúng không nào . Trong trang viết bài mới, sau khi viết xong Title và nội dung của bài viết bạn click chọn Set thumbnail trong menu Post Thumbnail và chọn một file ảnh mà bạn muốn dùng làm thumb. Sau quá trình upload thành công sẽ có bảng thông báo như hình bên dưới, bạn click chọn Use as thumbnail và cuối cùng click Save all changes.

Bây giờ bạn hãy Publish bài viết của mình và quay ra trang chủ xem có sự thayđổi như thế nào nhé.

Bây giờ thì hình ảnh đã hiển thị ra ngoài trang chủ rồi. Nhưng sao nó to và xấu thế nhỉ? Không sao cả, chỉ cần thêm vài lệnh CSS đơn giản là ta sẽ làm cho nó có vị trí đẹp lại thôi mà.

Bước 4: View Source trang của bạn.

Dùng chức năng View Source của trình duyệt ta sẽ tìm được class chứa ảnh thumbnail trên giao diện của mình.

Với giao diện mặc định tôi tìm được class của nó là wp-post-image.

Bước 5: Chỉnh sửa CSS

Việc hiển thị ảnh thumb hiện giờ trên trang của tôi quá xấu nên tôi sẽ trình bày lại ảnh thumb của mình trên trang chủ cho đẹp hơn. Bạn hãy mở tập tin style.css của giao diện lên và thêm class mà ta đã tìm được ở bước trên vào và thêm các thuộc tính tùy theo ý thích của bạn nhé.

Ở hình trên tôi đã cho hình ảnh thumb có chiều ngang và dài là 100 pixel, canh trái, có khoảng cách bên phải và bên trên là 15px. Và đây là kết quả mà tôi thu được.