ایجکس در وردپرس: صفحه قبلی و بعدی

سه شنبه ۳۱ فروردین ۹۵ • اشتراک گذاری در توییتر و فیسبوک

sublimetext

اخیرا در پروژه‌ای که توسط وردپرس مدیریت می‌شد نیاز داشتم که پست‌های سایت رو به صورت ایجکس نمایش بدم، از اونجایی که قرار بود تعداد یکسانی از پست‌ها فقط در صفحه نمایش داده بشه بهترین راه استفاده از لینک‌های صفحات قبل و بعد در وردپرس بود و من فقط نیاز داشتم که صفحات محتوای اون لینک‌ها رو به صورت ایجکس لود کنم و تمام!
از همین رو دنبال افزونه‌های زیادی گشتم، بعضی‌ها که اصلا کار نمیکردند، و بعضی‌ها بقدری پیچیده بودند که هیچ جوره با قالب هماهنگ نمی‌شدند، پس بهترین راه این بود که بدون هیچگونه افزونه‌ای این قابلیت رو به صورت دیفالت به قالب اضافه کنم.

خروجی کار رو در تصویر زیر میتونید مشاهده کنید.

sublimetext

۱: کدنویسی سایت

در ابتدا ما سایت خودمون رو کدنویسی میکنیم و تگ‌های وردپرس رو هم به اون اضافه می‌کنیم:


<!doctype html>
<html>
<head>
<meta charset="utf-8">

<meta name="author" content="MohamadReza Deylami | محمدرضا دیلمی | @iShelbyBoy | http://imohamad.me">
<link href="<?php bloginfo('template_directory'); ?>/css/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.min.js"></script> 
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/script.js"></script>
<?php wp_head() ?>
</head>
<body>
<div class="warp">

<!-- main -->
<div class="main">
<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>

<!-- section -->

<section>
	<h4><?php the_title(); ?></h4>
		<?php the_content(); ?>

	<a href="#" class="read-more">Read More...</a>
</section>
<!-- /section -->

<?php endwhile; ?>
<?php endif; ?>


</div>
<!-- /main -->

</div>
<div class="more">
<?php posts_nav_link(' ', ('Prev'), ('Next')); ?>
</div>
<?php wp_footer() ?>
</body>
</html>

به وسیله posts_nav_link(' ', ('Prev'), ('Next')) در وردپرس میتونیم لینک صفحات قبل و بعد رو در اختیار داشته باشیم، این تکه کد دو تگِ a با آدرس صفحات قبل و بعد رو برای ما برمی‌گردونه.

۲: استفاده از ایجکس

به مهم‌ترین قسمت ماجرا میرسیم، ما قراره از متد load در jQuery استفاده کنیم.
کار این متد لود کردن محتوای صفحات مدنظر درون صفحه‌ی اصلی هستش، برای این کار ما نیاز داریم ابتدا کلاس یا آیدی تگی رو که قراره محتوای صفحات دیگه درونش بارگذاری بشه رو انتخاب کنیم، متد load سه پارامتر url ، data و complete میگیره که complete میتونه شامل یک function باشه:


$("#result").load(url, "data", function(){});

URL: آدرس صفحه‌ی مدنظر.
Data: مشخص میکنیم که اطلاعات قرار است از چه عنصری در صفحه html گرفته شود.
Function: عملیاتی که قرار است بعد از اتمام درخواست اجرا شود.
من در قالبی که طراحی کردم تگِ با کلاس warp رو برای بارگذاری محتوا گذاشتم و میخوام توسط متد load دستور بدم که تمام محتوای صفحاتی که درون اون‌ها تگی با کلاس main وجود داره رو در تگِ با کلاس warp صفحه‌ی اصلی من بارگذاری کنه:


$(document).ready(function(){
$('.more a').live('click', function(e){
     e.preventDefault();
     var link = $(this).attr('href'); //get link
     $('.main').fadeOut(500).load(link + ' .main section', function(){
     $('.main').fadeIn(500); 
     });
  $('.more').load(link + ' .more a'); //update pages link
 });
});

همونطور که مشاهده میکنید من در خط اول توسط ready مشخص کردم که زمانی که کل سند من بارگذاری شد خط‌های بعدی کد رو اجرا کنه.
در خط دوم من مشخص کردم که هر زمانی که روی تگ‌های a که همون لینک‌ها هستند کلیک شد یک سری کارها انجام بشه.
نکته: در بالا ما از متد live استفاده کردیم که باعث میشه کد ما داینامیک و در هر زمانی اجرا بشه.
در خط سوم توسط e.preventDefault مانع از رفرش شدن صفحه توسط لینک میشویم.
در خط چهارم توسط this همان لینکی که کلیک شده را انتخاب میکنیم و با attr مقدار اتربیوت href همان لینک کلیک شده رو بدست می‌آوریم و درون متغیری به اسم link ذخیره می‌کنیم.
در خط پنجم تگ با کلاس main که قراره محتوای اون بارگذاری بشه رو توسط fadeOut و در زمان ۵۰۰ میلی ثانیه ناپدید میکنیم و با متد load درخواست رو ارسال میکنیم.
نکته: درون متد load ما آدرس رو برابر با متغیر link قرار می‌دهیم، چون الان متغیر ما دارای لینک صفحه‌ی بعدمون هستش، در قسمت data ما مشخص کردیم که وقتی لینک رو باز کرد تمام تگ‌های section درون تگِ با کلاس main ما رو بارگذاری کنه و در آخر توسط function مشخص کردیم که بعد از انجام بارگذاری تگِ با کلاس main ما رو توسط fadeIn در ۵۰۰ میلی ثانیه ظاهر کنه.
در حال حاضر ما آدرس لینکی که روی اون کلیک شد رو بدست آورده، درخواست رو ارسال کرده و در صفحه نمایش دادیم ولی دکمه‌های ما هنوز لینک‌های سابق رو درون خودشون دارند و اگه ما دوباره روی اونها کلیک کنیم عمل نمیکنند، برای رفع این مشکل ما مثل دفعه‌ی قبل عمل می‌کنیم با این تفاوت که این‌بار تگ‌های a خودِ کلاس more که شامل لینک صفحات قبل و بعد ما هستش رو بارگذاری میکنیم تا آدرس‌های جدید رو داشته باشیم.
در آخر امیدوارم این آموزش به دردتون بخوره، میتونید این پروژه رو از گیت‌هاب دانلود کنید.

نوشته شده در آموزش ، توسعه وب

مرتبط با برچسب‌های ، ،