Thiết kế theme WP: Sử dụng timthumb resize ảnh

Chào các bạn hôm nay mình muốn chia sẻ một cách resize ảnh rất hay bằng cách sử dụng file timthumb.php của google code và ứng dụng trong thiết kế theme wordpress.

Khi tạo một giao diện website bạn có thể sẽ sử dụng nhiều hình ảnh và để muốn hiển thị đúng kích thước mà bạn qui định hiển thị trong khi hình ảnh mà bạn có thì lớn hơn kích thước này bạn cần resize lại. Đây là một cách resize rất hay.

Trước hết bạn vào http://code.google.com/p/timthumb/ download file timthumb.php về và để vào thư mục gốc của theme đang sử dụng trong site WordPress.

Sử dụng tính năng Custom Fields trong WordPress

Tính năng này đã có trong WP 3.1 đây là một điều rất hay cho những ai sử dụng WordPress. Custom Fields giúp bạn thêm vào một thành phần nào đó vào trong bài viết ví dụ trong trường mình hôm nay là hiển thị hình ảnh trong bài.

Bạn bật nó lên trong bài viết bằng cách vào Screen Options và Check vào Custom Fields.

Custom Fields WordPress

Custom Fields WordPress

Sử dụng custom fields bằng cách đặt cho nó một cái tên và một value. Khi nào bạn muốn hiển thị nó ra thì gọi tên nó tự động sẽ truyền value để làm việc.

Ví dụ:

Add New Custom Fields WordPress

Add New Custom Fields WordPress

Hiển thị hình ảnh cùng với file timthumb.php

Sau khi add new một custom field như thế và bấm nút update thì trong cơ sở dữ liệu sẽ lưu name và value đó tương ứng với các bài post, công việc bây giờ là làm sao hiển thị chúng ra ngoài.

Bài trước chúng ta hiển thị hình ảnh bằng tính năng thumbnail trong WordPress, bây giờ chúng ta sẽ hiển thị bằng Custom Field và kết hợp resize bằng timthumb.

Bạn mở file index.php lên nơi mà bạn để post thumbnail hôm trước xóa đi và thay thế vào như sau:

<!--
<div class="thumb">
	<img src="<?php bloginfo('stylesheet_directory'); ?>/timthumb.php?src=<?php echo get_post_meta($post->ID,'Thumb',true)?>&w=80&h=80" border="0" /></div>
-->

Giải thích:

  • bloginfo(‘stylesheet_directory’): lấy địa chỉ thư mục gốc của theme đang sử dụng.
  • get_post_meta(): có 3 đối số $post->ID id của post hiện hành, Thumb chuổi mà bạn đặt tên trong custom field và kiểu bool true hay false.
  • &w=80&h=80: Các khai báo size cần resize ở đây hiểu là w: rộng bằng 80, h: cao bằng 80.

Xong lưu lại tất cả và test.

Demo timthumb on WordPress

Demo timthumb on WordPress

Đây là cách resize hình ảnh đơn giản và hiệu quả nhất, bạn có thể áp dụng custom fields cho nhiều trường hợp không nhất thiết là hiển thị hình ảnh. Chúc thành công!!!

Tham khảo:

VN:F [1.9.22_1171]
Rating: 8.2/10 (5 votes cast)
Thiết kế theme WP: Sử dụng timthumb resize ảnh, 8.2 out of 10 based on 5 ratings
Share This