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

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

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

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

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

مطالب مرتبط

تفاوت UI و UX در طراحی سایت چیست؟

تفاوت UI و UX در طراحی سایت چیست؟

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

رپورتاژ آگهی چیست؟

رپورتاژ آگهی چیست؟

شاید تاکنون عنوان رپورتاژ آگهی را شنیده باشید و برایتان سؤال شده باشد که رپورتاژ آگهی چیست و منظور از رپورتاژ آگهی، محتوای ویدئویی است یا محتوای متنی و یا محتوای صوتی؟ اکثر شرکت ها سعی دارند با به کار گرفتن مطالب و موضوعاتی در زمینه روابط عمومی و همکاری از طریق فضای مجازی، سایت […]

Doorway Page چیست؟

Doorway Page چیست؟

در ابتدا قصد داریم قبل از اینکه راجع به مفهوم Doorway Page صحبت کنیم به طور جداگانه لغات آن را بررسی کنیم. بدون شک میدانید که کلمه Door در زبان فارسی به معنای درب، دروازه و ورودی می‌باشد و کلمه Way نیز به معنای مسیر و راه است. بنابراین طبق توضیحات داده شده به طور […]

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

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

محصولات ویژه