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

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

خب برای شروع ابتدا کد زیر را در فایل 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>

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

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

اگر می‌خواهید از آخرین و محبوب‌ترین مقالات ما در ایمیل خود مطلع شوید، همین الان ایمیل خود را در کادر زیر وارد کنید:

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

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

دیدگاه‌های این نوشته جدید ترین ها شاخص

  1. سلام داداش
    بنده اینو اکی کردم کار هم میکرد اما مشکل داشت !
    وقتی صفحه بعد میرم صفحه قبلی سر جاشه و بالای سایت زیر هدر مطال صفحه دوم فراخوانی میشه !!!!!!
    اما کاملا آجاکس 😀
    حالا شما میدونید چرا صفحه قبل میمونه سر جاش ؟

  2. سلام . با استفاده از این روش شما دیگه برای مطالب بعد صفحه رفرش نمیشه ؟ من دنبال کدی هستم که بدون نیاز به رفرش صفحه مطالب رو بیاره . با تشکر از سایت خوبتون

  3. آقای حاجی محمدی لطفا آموزش استایل بندی کامنت مثل سایت خودتون رو هم بذارین . مثل شما که نظر میدین سبز میشه
    سلام

  4. سلام
    منم دقیقا سوال آقای محمد رضا رو دارم : “در انتهای هر صفحه بنویسه ۱٫۲٫۳٫۴…. صفحه بعد و صفحه قبل ”
    میشه بیشتر توضیح بدید؟!

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

  6. سلام علی جان
    بنده از این کد استفاده کردم همه چی هم جواب میده و هیچ مشکلی با مسئله ایجکس نیست
    فقط یه مشکل اساسی دارم
    با کلیک رو صفحه قبلی همون مطالب صفحه اول نشون داده میشه
    تا قبل این هم گزینه نوشته های قدیمی تر و نوشته های جدیدتر برام نمیومد!!!
    حالا باید چیکار کنم؟
    مشکل از کجاست؟

  7. salam besyar mamnon vali javab nadad

  8. سلام من می خوام در انتهای هر صفحه بنویسه 1.2.3.4…. صفحه بعد و صفحه قبل چکار باید بکنم؟ زود لطفا

  9. سلام
    من افزونه pagenavi رو نصب کردم و الان می خوام با انتخاب یک صفحه به صورت آزاکس بره به اون صفحه اگه بخوایم این کار رو بکنم چه مراحلی رو باید طی کنم . لطفا در حد دبستان توضیح بدید .

  10. سلام می خواستم خواهش کنم یک نمونه برای ما هم بزارید از این کار دستتون درد نکنه راستی قالب جدید مبارک فقط به جای اینکه این همه از جی کوئری استفاده کنید می تونید از سی اس اس 3 استفاده کنید
    فقط اگه میشه یه نمونه از این رو بزاری خیلی خوب میشه چون برای عکس ماها نشده آژاکس برای همین می گم که با نمونه بهتر میشه خودمون اشکال یابی بکنیم

  11. سلام
    واقعا کارتون درسته ممنون، فق ای کاش لودینگ یا چیزی که بیانگر در حال لود شدنه باشه اینجوری بهتره
    راستی که امکانش بود واسه این کار راهنماییم کنید(ایمیلی)

  12. سلام
    افزونه ای هست که بتونه این کار رو انجام بده؟
    مرسی

  13. دادا میگم پوسته من مال الگانته اون وقت این خودش PageNavi داره. اینو میتونی بگی چکارش کنم؟
    بعد علی جان این لینکی که به ما دادی اسمش رو درست کن دمت گرم 😀 گریفین نه گرفین

  14. سلام دوست عزیز
    یه کار خیلی جالب کردی!
    امکان داره راهنماییم کنی که چه جوری در صفحه اصلیت ، اون 7 تا مطلب آخر موضوعات را که گذاشتی ، صفحه بندی کردیش؟!
    من تو این صفحه بندی کردنش موندم!
    از rss استفاده کردی؟

  15. سلام
    ممنون زحمت کشیدی یه لطفی کن اجاکس کردن ادامه ملب رو هم اموزش بده

  16. با سلام
    مطالبتون خیلی خیلی جالب و دسته اول هست
    اما یه سوال!
    استفاده از این کد در وردپرس معمولی یا وردپرس مولتی یوزر باعث نمیشه فشار زیادی بر روی هاست و سرور بیاد؟
    خطر قطعی سایت را بالا نمی بره؟
    ممنون میشم راهنمایی کنید

  17. سلام، خسته نباشید.
    من کاملا همون طوری که در آموزش بود پیدا کردم کار رو و کدهارو قرار دادم، اما تبدیل به آژاکس نشد!

  18. امکان داره که با زدن کلیک صفحه ی دلخوا0 باز بشه ؟ اگه می شه آموزششو بزارید

  19. سلام . امکان داره افزونه ی که خودتون برای دکمه ی ادامه مطلب گذاشتین قرار بدین . همین که وقتی موس روی دکمه می ره تغییراتش چند ثانیه طول میکشه . در اصل من همین مدت زمان رو می خوام

  20. لطفا کمک کنید …. جواب سوال من را ندادید

  21. سلام . با تشکر از خدماتتون
    من این رو نصب کردم اما با زدن دکمه صفحه ی بعدی ستون های کنار رو نشون نمی ده . لطفا راهنمایی کنید .

  22. “خب برای شروع ابتدا کد زیر را در فایل header.php خود و یا هدر سایت خود قرار دهید ”
    سلام ، آقا قالب من header.php نداره و گفتید یا هدر سایت قرار دهید . هدر سایت کجاست؟اگه میشه سریعا جوابو بگید!ممنون

  23. اوکی

  24. نوکرتم

  25. سلام
    این اسکریپت رو شما دارید ؟
    http://www.stockphoto.ir/ssphotos/Default.html
    اگه می شه این رو هم برای دانلود بزارید در صورت امکان
    با تشکر

  26. سلام
    خسته نباشی
    کارت درسته 😉
    فقط چند تا اشکال توی قالب هست اونا رو برطرف کن داداش

  27. با سلام اگر برایتان مقدور است قالبی مانند قالب سایت downloadpsd.com را روی سایت قرار دهید . من چندی پیش قالبی با این سبک از سایت deviran.com دانلود کردم اما انگار مشکل داشت .

    • 9 سال عضو همیار وردپرس

      بله حتما در خدمتتون هستیم یک قالب ویژه برای سایت های گرافیک با همین سبک طراحی میکنیم و خدمت دوستا گرافیک میدیم ایشالله تا 10 تر آماده میشه (الان مثلا امتحان دارم و دارم درس میخونم 🙂 )

مطالب زیر را حتما بخوانید

    شماره صفحات ایجکسی

      ابتدا باید گفت، که این مقاله بیشتر جنبه آموزشی داره و برای استفاده از این مقاله نیاز دارید تا کمی با جی کوئری، پی اچ پی و وردپرس آشنایی...

دوره‌های آموزشی