نمایش پست قبلی و بعدی همراه با تصویر در وردپرس

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

ابتدا لازم است که در فایل 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;}

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

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

مطالب مرتبط

معرفی بهترین هاست های رایگان

معرفی بهترین هاست های رایگان

محبوبیت هاست رایگان در سال‌های اخیر بسیار افزایش‌ یافته است و دلیل آن نیز بسیار ساده است. همه ما چیزهای رایگان را دوست داریم و تا کلمه‌‌ی رایگان به گوشمان می‌خورد نمی‌توانیم جلوی خودمان را بگیریم. این طبیعت انسان است و دقیقا با توجه به همین غریزه ده‌ها شرکت پدیدار شده‌اند تا روی این غریزه […]

نمایش پست قبلی و بعدی همراه با تصویر در وردپرس

نمایش پست قبلی و بعدی همراه با تصویر در وردپرس

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

طراحی و ساخت سایت موزیک

طراحی و ساخت سایت موزیک

طراحی سایت موزیک و طراحی سایت موسیقی برای موسیقی دان ها و هنرمندان مشغول به کار در زمینه هنر موسیقی، می تواند یکی از بهترین راه ها برای ارتباط با مخاطبان و معرفی هنرمندان در فضای مجازی می باشد.   یک هنرمند با  طراحی سایت موزیک، خیلی ساده و راحت می تواند از طریق اینترنت به […]

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

محصولات ویژه