Categories
Wordpress

WordPress : ดึง Thumbnail มาใช้กับลิงก์ไป Post ถัดไปกับ Post ก่อนหน้า

ใน Theme ส่วนใหญ่แล้ว ด้านล่างของส่วนที่แสดงผลของ Post นั้นจะมี Navigation เพื่อไปยัง Post ก่อนหน้า และ Post ถัดไป แต่ถ้าเราอยากจะปรับแต่งมัน ให้แสดงผลลัพธ์เป็นลักษณะแบบนี้ละ

ใน Theme ส่วนใหญ่แล้ว ด้านล่างของส่วนที่แสดงผลของ Post นั้นจะมี Navigation เพื่อไปยัง Post ก่อนหน้า และ Post ถัดไป แต่ถ้าเราอยากจะปรับแต่งมัน ให้แสดงผลลัพธ์เป็นลักษณะแบบนี้ละ

WordPress : ดึง Thumbnail มาใช้กับลิงก์ไปโพสถัดไปกับโพสก่อนหน้า [1]

ซึ่งปรกติแล้วในส่วนนี้ของเว็บจะมีลักษณะแบบนี้

WordPress : ดึง Thumbnail มาใช้กับลิงก์ไปโพสถัดไปกับโพสก่อนหน้า [2]

เราเข้าไปดูที่ single.php นะครับ ลองมองหา Code ที่คล้าย ๆ กับอันนี้

[php]
<div class="alignleft"><?php previous_post_link(‘&laquo; %link’) ?></div>
<div class="alignright"><?php next_post_link(‘%link &raquo;’) ?></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 ทั้งสองส่วนไปใช้แล้ว ก็จะได้ผลลัพธ์ออกมาตามที่ต้องการแบบนี้เลยครับ

WordPress : ดึง Thumbnail มาใช้กับลิงก์ไปโพสถัดไปกับโพสก่อนหน้า [1]

ที่มา : How to use Thumbnails with Previous and Next Post Links in WordPress

4 replies on “WordPress : ดึง Thumbnail มาใช้กับลิงก์ไป Post ถัดไปกับ Post ก่อนหน้า”

ครับผม น่าจะนำไปประยุกต์ได้หลากหลายกว่าด้วยละครับ

ใน WordPress นะครับ ตัว CSS จะชื่อ style.css ครับ ซึ่งจะอยู่ใน path เดียวกับ Theme ที่เราใช้งานอยู่ครับ

Leave a Reply

Your email address will not be published. Required fields are marked *