Trong bài viết này, Pen sẽ hướng dẫn các bạn tạo bài viết liên quan với hình đại diện (thumbnail) bằng cách sử dụng Plugin “Yet Another Related Post” (YARP). Chức năng này khá hữu ích với các blog chuyên về đồ họa cũng như những blog thông tin. Demo bạn có thể xem bên dưới mỗi bài viết tại PSVN.

Related Posts with Thumbnails title="Related Posts with Thumbnails" >Related Posts with Thumbnails

Bắt đầu thôi!

Đầu tiên bạn cần cài đặt và kích hoạt plugin “YARP” – Trang chủ của Plugin.

Tạo Related Post Template File  cho YARP:

Lưu đoạn code dưới đây vào file có tên “yarpp-template-thumbnails.php” sau đó up file “yarpp-template-thumbnails.php” lên thư mục chính của theme bạn!

<?php /*
Post Thumbnail Template
Author: Zach Dunn (www.buildinternet.com)
*/
?>

<h4 class="meta">Related Posts</h4>

<?php if ($related_query->have_posts()):?>

	<ol class="related-posts">
		<?php while ($related_query->have_posts()) : $related_query->the_post(); ?>

			<?php
				//Set Default Thumbnail Image URL's
				$related_thumbnail = get_post_meta($post->ID, "thumbnail_url", $single = true);
				$default_thumbnail = 'default-image.jpg';
			?>

			<li>
				<a href="<?php the_permalink() ?>" rel="bookmark">
				<?php if ($related_thumbnail != "") : ?>
					<img src="<?php echo $related_thumbnail; ?>" alt="<?php the_title(); ?>" />
				<?php else : ?>
					<img src="<?php echo $default_thumbnail; ?>" alt="<?php the_title(); ?>" />
				<?php endif; ?>

				<?php the_title(); ?></a>
			</li>

		<?php endwhile; ?>
	</ol>

<?php else: ?>

	<p>No related posts found</p>

<?php endif; ?>

Với đoạn code ở trên, biến $related_thumbnail có tác dụng hiển thị hình ảnh có URL được điền vào custom field "thumbnail_url". Biến $default_thumbnail có tác dụng hiển thị ảnh mặc định khi bài viết không có hình đại diện.

Chèn đoạn code sau vào vị trí bạn muốn hiển thị bài viết liên quan:

<?php if (function_exists('related_posts')){ ?>
      <?php related_posts();?>
<?php }?>

Tùy biến với CSS:

Chèn đoạn CSS sau vào file css của theme bạn:

/* Related Posts */
ol.related-posts {clear:both; text-align:center; margin:10px 0px 0px 0px; padding:0;}
ol.related-posts li{width:120px; float:left; display:inline; margin-right:15px;; padding:0;}
	ol.related-posts img{clear:both; padding:5px; background:#F7F7F7; border:1px solid #DDD;}
	ol.related-posts a{clear:both; display:block; border:none; text-decoration:none;}
	ol.related-posts li{font-size:12px;}

Kích hoạt file template tạo lúc nãy ở trang cấu hình plugin YARP.

Trong trang cấu hình plugin YARP, bạn đánh dấu chọn vào ô “Display using a custom template file” sau đó chọn “yarpp-template-thumbnails.php“.

Select a custom template title="Select a custom template" >Select a custom template

Lưu ý: Nếu làm theo đúng các bước trên, bạn đã có thể hiển thị bài viết liên quan với hình đại diện dưới mỗi bài viết nhưng hình ảnh sẽ không được resize một cách tự động. Nếu muốn tự động resize hình ảnh, bạn phải sử dụng Timthumb hoặc Phpthumb. Trong trường hợp này mình sử dụng timthumb.

Thay thế đoạn code ở dòng thứ 23 trong “yarpp-template-thumbnails.php” bằng dòng code hiển thị hình ảnh của timthumb:

<img src="<?php bloginfo('template_directory'); ?>/timthumb.php?src=<?php echo get_post_meta($post->ID, "thumbnail_url", $single = true); ?>&h=100&w=100&zc=1" alt="<?php the_title(); ?>" width="100" height="100" />

Tiếp theo bạn chỉ cần chỉnh giá trị w (rộng) và h (cao) trong đoạn code trên để hình ảnh hiển thị như mong muốn!!!