ใน Theme ส่วนใหญ่แล้ว ด้านล่างของส่วนที่แสดงผลของ Post นั้นจะมี Navigation เพื่อไปยัง Post ก่อนหน้า และ Post ถัดไป แต่ถ้าเราอยากจะปรับแต่งมัน ให้แสดงผลลัพธ์เป็นลักษณะแบบนี้ละ
ซึ่งปรกติแล้วในส่วนนี้ของเว็บจะมีลักษณะแบบนี้
เราเข้าไปดูที่ 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
ขอบคุณครับ จะลองเอาไปประยุกต์ใช้ดู
ครับผม น่าจะนำไปประยุกต์ได้หลากหลายกว่าด้วยละครับ
แล้ว ตรง CSS เราจะไป วาง code ตรงไฟล์ใหนครับ
ใน WordPress นะครับ ตัว CSS จะชื่อ style.css ครับ ซึ่งจะอยู่ใน path เดียวกับ Theme ที่เราใช้งานอยู่ครับ