آموزش نمایش لینک مطلب قبلی و بعدی در ادامه مطلب وردپرس

آموزش نمایش لینک مطلب قبلی و بعدی در ادامه مطلب وردپرس

بدون شک وقتی در انتهای هر مطلب ، طمالب قبل و بعد نشان داده شود شاید کاربر ترغیب شود که مطلب دیگری از سایت شما را نیز مطالعه نماید که این کار بسیار مفید میباشد و باعث میشود بازدید سایت بیشتر شود.

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

کد ساده نمایش :

<?php previous_post_link(); ?> 
<?php next_posts_link(); ?>

نمایش لینک مطالب قبلی و بعدی با متن دلخواه:

<?php previous_post_link( 'مطلب قبلی سایت »', 0 ); ?>
<?php next_posts_link( '» مطلب بعدی سایت', 0 ); ?>

دستور شرطی در صورت وجود داشتن مطلب :

<?php if( get_previous_posts_link() ) : previous_posts_link( 'مطلب قبلی سایت »', 0 ); endif; ?>
<?php if( get_next_posts_link() ) : next_posts_link( '» مطلب بعدی سایت', 0 ); endif; ?>

نمایش مطلب قبلی و بعدی بر اساس دسته بندی مطلب فعلی :

<?php previous_post_link('%link', 'مطلب قبلی در دسته بندی سایت', TRUE); ?> 
<?php next_post_link('%link', 'مطلب بعدی در دسته بندی سایت', TRUE); ?>

نمایش مطلب قبلی و بعدی با استایل زیبا :

کد زیر را باید بعد از تابع 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 -->

سپس کد زیر را در Style.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;}