در این مقاله از مجموعه آموزش های رایگان وردپرس قصد داریم به شما نحوه قرار دادن نوشته قبلی و بعدی همراه با تصویر در صفحات داخلی وردپرس را آموزش دهیم. این قابلیت می تواند سبب ماندگاری بازدیدکنندگان در سایت شما شود. در ادامه این آموزش با ما همراه باشید.
آموزش قرار دادن پست قبلی و بعدی در وردپرس

ابتدا لازم است که در فایل single.php و بعد از فراخوانی تابع the_content کد های زیر را قرار دهید:

<div id="cooler-nav" class="navigation">
<?php $prevPost = get_previous_post(true);
if($prevPost) {?>
<div class="nav-box previous">
<?php $prevthumbnail = get_the_post_thumbnail($prevPost->ID, array(100,100) );?>
<?php previous_post_link('%link',"$prevthumbnail <p>%title</p>", TRUE); ?>
</div>
 
<?php } $nextPost = get_next_post(true);
if($nextPost) { ?>
<div class="nav-box next" style="float:right;">
<?php $nextthumbnail = get_the_post_thumbnail($nextPost->ID, array(100,100) ); } ?>
<?php next_post_link('%link',"$nextthumbnail <p>%title</p>", TRUE); ?>
</div>
<?php } ?>
</div><!--#cooler-nav div -->

حال برای استایل دهی به این قسمت کدهای زیر را در فایل css خود قرار دهید:

#cooler-nav{clear: both; height: 100px; margin: 0 0 70px;}
#cooler-nav .nav-box{background: #e9e9e9; padding: 10px;}
#cooler-nav img{float: left; margin: 0 10px 0 0;}
#cooler-nav p{margin: 0 10px; font-size: 12px; vertical-align: middle;}
#cooler-nav .previous{float: left; vertical-align: middle; width: 250px; height: 100px;}
#cooler-nav .next{float: right; width: 250px;}

این قابلیت علاوه بر تشویق کاربران جهت خواندن سایر مطالب شما، موجب زیبا سازی قالب وردپرس شما نیز خواهد شد.

امیدوارم از این آموزش بهره لازم را برده باشید. با سایر آموزش های ما همراه باشید.