ใน Theme ส่วนใหญ่แล้ว ด้านล่างของส่วนที่แสดงผลของ Post นั้นจะมี Navigation เพื่อไปยัง Post ก่อนหน้า และ Post ถัดไป แต่ถ้าเราอยากจะปรับแต่งมัน ให้แสดงผลลัพธ์เป็นลักษณะแบบนี้ละ
![WordPress : ดึง Thumbnail มาใช้กับลิงก์ไปโพสถัดไปกับโพสก่อนหน้า [1]](https://rabbitinblack.com/wp-content/uploads/2011/11/nav-1.jpg "WordPress : ดึง Thumbnail มาใช้กับลิงก์ไปโพสถัดไปกับโพสก่อนหน้า")
ซึ่งปรกติแล้วในส่วนนี้ของเว็บจะมีลักษณะแบบนี้
![WordPress : ดึง Thumbnail มาใช้กับลิงก์ไปโพสถัดไปกับโพสก่อนหน้า [2]](https://rabbitinblack.com/wp-content/uploads/2011/11/nav-2.jpg "WordPress : ดึง Thumbnail มาใช้กับลิงก์ไปโพสถัดไปกับโพสก่อนหน้า"){kind=small}
เราเข้าไปดูที่ single.php นะครับ ลองมองหา Code ที่คล้าย ๆ กับอันนี้
[php]
<div class="alignleft"><?php previous_post_link(‘« %link’) ?></div>
<div class="alignright"><?php next_post_link(‘%link »’) ?></div>
[/php]
อาจจะแตกต่างกันบ้าง แต่หลัก ๆ น่าจะมี previous_post_link กับ next_post_link อยู่ด้วย ให้เรานำ Code ด้านล่างไปวางแปะแทนที่
Code
[php]
<div id="cooler-nav">
<?php $prevPost = get_previous_post(true);
if($prevPost) { ?>
<div class="nav-box-prev">
<?php $prevthumbnail = get_the_post_thumbnail($prevPost->ID, array(50,50) );
previous_post_link(‘%link’,"$prevthumbnail <p>%title</p>", TRUE); ?>
</div><!– .nav-box-prev –>
<?php }
$nextPost = get_next_post(true);
if($nextPost) { ?>
<div class="nav-box-next">
<?php $nextthumbnail = get_the_post_thumbnail($nextPost->ID, array(50,50) );
next_post_link(‘%link’,"<p>%title</p> $nextthumbnail", TRUE); ?>
</div><!– .nav-box-next –>
<?php } ?>
</div><!–#cooler-nav –>
[/php]
แล้วเขียน CSS เพื่อปรับแต่งรูปแบบของมัน
CSS
[css]
#cooler-nav {overflow:hidden;}
#cooler-nav .nav-box-prev {float:left;width:225px;}
#cooler-nav .nav-box-next {float:right;width:225px;}
#cooler-nav .nav-box-prev img {float:left;}
#cooler-nav .nav-box-next img {float:right;}
#cooler-nav .nav-box-prev p {width:155px;float:right;}
#cooler-nav .nav-box-next p {width:155px;float:left;text-align:right;}
[/css]
ในส่วนของ CSS นั้น ผมคิดว่ายังไงเราก็ต้องนำไปปรับให้เหมาะสมกับ Theme ที่เราใช้งานอยู่แล้ว ดังนั้นก็ดูไว้เป็นตัวอย่างคร่าว ๆ ก็พอ และหลังจากที่ผมนำ Code ทั้งสองส่วนไปใช้แล้ว ก็จะได้ผลลัพธ์ออกมาตามที่ต้องการแบบนี้เลยครับ
ที่มา : How to use Thumbnails with Previous and Next Post Links in WordPress
