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

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

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

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

آیا این مقاله برای شما مفید بود؟
تقریبا
خیر

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

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

398,500 نفر

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

ارسال دیدگاه به معنی این است که شما ابتدا قوانین ارسال دیدگاه را مطالعه کرده‌اید و با آن موافق هستید.

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

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

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

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

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

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

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

  7. salam besyar mamnon vali javab nadad

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

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

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

      والا شماره صفحات آژاکس مطلبی ننوشتم اما صفحه بعدی و قبلی آژاکس رو تو سایت گذاشتم !

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

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

      نمونه سایت شخصی بنده : http://www.alihm.ir

      در ضمن ممنون بابت قالب ولی شما میدونید که ما از css3 حدود 5 برابر جی کوئری استفاده نکردیم ؟!!

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

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

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

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

      خودت امیر جان اضافه کن دیگه پستش رو هم که دادم و خودت اینکاره ای!

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

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

      سلام محسن جان به زودی منتشر میکنیم اما راهنمایی میکنم rss نیست

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

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

    • در ضمن چگونه میشه در اون چند لحظه لود صفحه از یک تصویر لودینگ استفاده کرد؟
      با تشکر

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

      والا حالت این آژاکس fade هست پس نیاز به عکس نداره

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

      نه محسن جان مشکلی از این لحاظ نیست

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

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

      چرا عزیزم کمی با حوصله عمل کن نمونه استفادش تو سایت alihm.ir هست

    • فکر می کنم تو قالب من امکان اضافه کردن این قابلیت وجود نداره، به هر حال ما گذشتیم.

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

      عزیزم در همه قالب ها این امکان هست با حوصله تر کار کنید اتفاقا چندی پیش برای سایت اپل این قابلیت رو اضافه کردم

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

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

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

      عزیزم این یک خط کد سی اس اس ساده است. لطفا به آدرس wordpress98 @جیمیل میل بزنید تا براتون بفرستم

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

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

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

      سلام نه مشکلی نسیت حتما اون دوتا کد رو اشتباه گذاشتید یا اینکه قبل و بعد چرخه قرار ندادید.. من نمونش رو توی سایت شخصی خودم یعنی http://www.alihm.ir استفاده کردم میتونید ببینید

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

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

      حیف شد کاشکی داشت اما تگ را در index.php بیابید و کد مذکور رو بعد اون قرار بدید

  23. اوکی

  24. نوکرتم

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

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

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

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

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

      چشم ایشالله نسخه اصلی تا چند وقت دیگه باعث خوشحالی ماست که افراد با تجربه ای مثل شما به ما دلگرمی بدن

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

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

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

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