رفتن به صفحه قبل و بعد با کمک آژاکس ساده

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

خب برای شروع ابتدا کد زیر را در فایل header.php خود و یا هدر سایت خود قرار دهید :

<script type="text/javascript" charset="utf-8" src="<?php bloginfo(url); ?>/wp-includes/js/jquery/jquery.js"></script>
	<script type="text/javascript" charset="utf-8">
		jQuery(document).ready(function(){

			jQuery('#postPagination a').live('click', function(e){
				e.preventDefault();
				var link = jQuery(this).attr('href');
				jQuery('#content').fadeOut(500).load(link + ' #contentInner', function(){ jQuery('#content').fadeIn(500); });

			});

		});
	</script>

خب برای مرحله بعد به سراغ فایل index.php و یا هرفایلی که میخواهید آژاکس به کار برده شود بروید , سپس کد زیر را قبل از شروع حلقه پست قرار دهید .
یعنی مثلا کد زیر را بیابید :

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

و کد زیر را قبل از کد بالا قرار دهید :

<div id='content'>
    <div id='contentInner'>

خب آخر حلقه را هم بیابید و کد های بالا را ببندید :
برای مثال کد زیر را بیابید :

<?php endif; ?>

و بعد از آن کد زیر را قرار دهید :

</div>
</div>

خب حالا کافیست کد زیر را در هر جاکه میخواهید صفحات قبلی / بعدی نمایش داده شود قرار دهید (درون حلقه پست باشد )

<div id='postPagination'>
	<?php posts_nav_link('  ', ('&laquo; صفحه بعدی'), ('صفحه قبلی &raquo;')); ?>
</div>

تموم شد. اگر توضیحاتم خوب نبود میتوانید نمونه قالب استفاده شده را از اینجا دانلود کنید (زبان انگلیسی میباشد)