Hình ảnh chỉ mang tính chất minh họa ^^

Thật ra việc này Hutek đã làm cho webzine rồi nhưng phần ảnh minh họa Hutek lại dùng js có tên là phpThumb để crop ảnh cho đúng kích thước yêu cầu nhưng js này có một nhược điểm là không thể crop hình ở các site ngoài được mà chỉ crop được hình trên host mình thôi. Chính vì vậy khá nhiều bạn có mong muốn Webzine có thể hỗ trợ lấy thumbnail từ bên ngoài. Mình cũng đang xem xét và có thể sẽ đưa vào trong phiên bản 0.3 còn trong bài viết này mình sẽ hướng dẫn các bạn cách tạo một layout như vậy để các bạn có thể áp dụng vào cho blog hoặc theme của mình.

Thực ra để làm được điều này cũng khá đơn giản. Bạn chỉ cân 2 plugin là Get the image của Justin Tailock và plugin thứ 2 là Limit Posts của Alfonso Sánchez

Plugin Get the image có nhiệm vụ tạo ảnh minh họa còn plugin Limit post có nhiệm vụ chỉ lấy ra một số ký tự nhất định của bài viết.

Plugin Get the image tương đối mạnh, nó có thể lấy ảnh từ file attach, từ custom field hoặc scan trong bài viết và lấy ảnh ra. Thứ tự ưu tiên là custom field rồi đến attach, cuối cùng mới là scan. Như vậy là có thể đáp ứng được hết các yêu cầu của các bạn làm blog hiện nay. Phần tính năng chi tiết các bạn có thể tìm hiểu thêm ở blog của Justin, ở đây mình chỉ hướng dẫn cách kết hợp hai plugin này với nhau để tạo được layout như yêu cầu ở trên thôi. Dưới đây là toàn bộ đoạn code đầy đủ để có thể tạo được một layout như hình minh họa

<div class="magazine">
//đoạn này là để lấy ảnh
 
 true, 'custom_key' =&gt; array( 'thumb' ), 'default_size' =&gt; 'medium', 'width' =&gt; '200', 'height' =&gt; '200', 'image_class' =&gt; 'thumb','image_scan' =&gt; true  ) ); ?&gt;
 
/*****************************************
Trong đó: attachment: sử dụng attach hay không (true or false)
custom_key: tên của custom key chứa đường dẫn ảnh
default_size: kích thước ảnh file attach mà bạn muốn lấy
width,height: kích thước của ảnh (đơn vị px)
image_class: thêm class cho ảnh để bạn có thể tha hồ quản lý bằng css
image_scan: nếu không có ảnh từ custom_key và attach thì sẽ tự động scan ảnh trong bài viết đưa vào, kích thước và class như trên
******************************************/
//Tiêu đề của bài viết
<h2><a title="&lt;?php the_title_attribute(); ?&gt;" rel="bookmark" href="&lt;?php the_permalink(); ?&gt;"></a></h2>
//Trích đoạn bài viết
<div class="entry">
 
   //120 là số ký tự bạn muốn hiển thị, còn Đọc tiếp là chữ bạn muốn hiện thị để link đến bài viết chi tiết, nếu để trắng thì sẽ là ký tự [...]
 
   //Nếu plugin limit post không được active thì sẽ dùng hàm the_excerpt</div>
</div>

Ok, như vậy là bạn đã có đoạn code mà bao gồm một ảnh minh họa, một tiêu đề và một mô tả ngắn. Bạn có thể đặt ở bất cứ chỗ nào bạn thích, ngoài trang chủ, sidebar ….

Related posts

1. 2 plugin giúp nâng tầm sidebar của bạn Trong bài viết này Hutek sẽ hướng dẫn các bạn...
2. Áp dụng magazine theme cho blog của bạn khi nào? Khi thiết kế một template mới hoặc trên một template...
3. 20 website được thiết kế với phong cách tối giản Mimimalist Design (phong cách thiết kế tối giản) đang là...