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

نمایش مطالب بیشتر با Ajax بدون افزونه در وردپرس

یکشنبه 24 فروردین 1399

در این مقاله قصد داریم نحوه‌ی نمایش مطالب بیشتر با Ajax را به صورت مرحله به مرحله بررسی کنیم. به کمک این کد می‌توانید برای صفحات وب‌سایت لود بی‌نهایت ایجاد کنید. یعنی زمانی که اسکرول به انتهای صفحه رسید، تعدادی پست جدید بارگذاری می‌شود. این کار تا جایی ادامه دارد که پست‌های مد نظر ما به اتمام برسند.

چنین مواردی را در جستجوی تصاویر گوگل مشاهده کرده‌اید. در جستجوی تصاویر گوگل هر بار که به انتهای صفحه می‌رسید مجدداً تصاویر جدیدی بارگذاری می‌شوند طوری که انگار صفحه پایانی ندارد!
تمام این موارد بدون رفرش صفحه انجام می‌گیرد که به فناوری آجاکس ارتباط دارد!

Ajax چیست و چه کاربردی دارد؟

برای انجام این کار مراحل زیر را دنبال کنید:

نحوه‌ی نمایش مطالب بیشتر با Ajax (لود بی نهایت)

مرحله‌ی اول) اضافه کردن فایل جی‌کوئری به وردپرس

برای شروع کار در قالب خود یک فایل به نام myloadmore.js بسازید. در این فایل فعلاً کدی قرار نمی‌دهیم. فقط در این مرحله می‌خواهیم به کمک یک تابع وردپرسی فایل myloadmore.js را به قالب خود اضافه کنیم.

بنابراین وارد فایل functions.php قالب سایت خود شوید و کد زیر را در آنجا paste‌ کنید:

function as_my_load_more_scripts() {
 
	global $wp_query; 
	wp_enqueue_script('jquery');
 
	wp_register_script( 'my_loadmore', get_stylesheet_directory_uri() . '/myloadmore.js', array('jquery') );
 
	wp_localize_script( 'my_loadmore', 'as_loadmore_params', array(
		'ajaxurl' => site_url() . '/wp-admin/admin-ajax.php', // WordPress AJAX
		'posts' => json_encode( $wp_query->query_vars ), // everything about your loop is here
		'current_page' => get_query_var( 'paged' ) ? get_query_var('paged') : 1,
		'max_page' => $wp_query->max_num_pages
	) );
 
 	wp_enqueue_script( 'my_loadmore' );
}
 
add_action( 'wp_enqueue_scripts', 'as_my_load_more_scripts' );

function as_my_load_more_scripts() {

global $wp_query;

wp_enqueue_script('jquery');

wp_register_script( 'my_loadmore', get_stylesheet_directory_uri() . '/myloadmore.js', array('jquery') );

wp_localize_script( 'my_loadmore', 'as_loadmore_params', array(

'ajaxurl' => site_url() . '/wp-admin/admin-ajax.php', // WordPress AJAX

'posts' => json_encode( $wp_query->query_vars ), // everything about your loop is here

'current_page' => get_query_var( 'paged' ) ? get_query_var('paged') : 1,

'max_page' => $wp_query->max_num_pages

) );

wp_enqueue_script( 'my_loadmore' );

}

add_action( 'wp_enqueue_scripts', 'as_my_load_more_scripts' );

این قطعه کد کوچک به ما اجازه می‌دهد پارامترهای مورد نیاز فایل جی‌کوئری را تنظیم و ارسال کنیم. توجه کنید که اگر فایل myloadmore.js را داخل فولدر یا مسیر دیگری ایجاد کرده‌اید این آدرس را در wp_register_script قرار دهید.

مرحله دوم) ایجاد فایل myloadmore.js برای ایجاد ajax در اسکرول

در فایل جی‌کوئری که در مرحله‌ی قبل ساخته بودید، کدهای زیر را قرار دهید:

jQuery(function($){
	var canBeLoaded = true, // this param allows to initiate the AJAX call only if necessary
	    bottomOffset = 1000; // the distance (in px) from the page bottom when you want to load more posts
 
	$(window).scroll(function(){
		var data = {
			'action': 'loadmore',
			'query': as_loadmore_params.posts,
			'page' : as_loadmore_params.current_page
		};
		if( $(document).scrollTop() > ( $(document).height() - bottomOffset ) &amp;&amp; canBeLoaded == true ){
			$.ajax({
				url : as_loadmore_params.ajaxurl,
				data:data,
				type:'POST',
				beforeSend: function( xhr ){
					// you can also add your own preloader here
					canBeLoaded = false; 
				},
				success:function(data){
					if( data ) {
						$('#main').find('article:last-of-type').after( data ); // where to insert posts
						canBeLoaded = true; // the ajax is completed 
						as_loadmore_params.current_page++;
					}
				}
			});
		}
	});
});

jQuery(function($){

var canBeLoaded = true, // this param allows to initiate the AJAX call only if necessary

bottomOffset = 1000; // the distance (in px) from the page bottom when you want to load more posts

$(window).scroll(function(){

var data = {

'action': 'loadmore',

'query': as_loadmore_params.posts,

'page' : as_loadmore_params.current_page

};

if( $(document).scrollTop() > ( $(document).height() - bottomOffset ) && canBeLoaded == true ){

$.ajax({

url : as_loadmore_params.ajaxurl,

data:data,

type:'POST',

beforeSend: function( xhr ){

// you can also add your own preloader here

canBeLoaded = false;

success:function(data){

if( data ) {

$('#main').find('article:last-of-type').after( data ); // where to insert posts

canBeLoaded = true; // the ajax is completed

as_loadmore_params.current_page++;

}

});

}

});

این کد مشخص می‌کند زمانی که اسکرول به ۱۰۰۰ پیکسلی انتهای صفحه رسید درخواست آجاکس ارسال شود. می‌توانید این اندازه را باتوجه به نیاز خود تغییر دهید.

در خط ۲۲ این قطعه کد، آیدی تگی را وارد کنید که قرار است پست‌های جدید به آن اضافه شوند. مثلاً اگر در صفحه‌ی آرشیو خود می‌خواهید پست‌ها به داخل تگ ul اضافه گردنند برای ul یک آیدی در نظر بگیرید و آن را به جای main# بنویسید. به جای کلمه‌ی article هم تگ نگهدارنده‌ی هر پست را وارد کنید. مثل li

مرحله سوم) ایجاد handler برای آجاکس

در این مرحله باید کد آجاکس مخصوص به وردپرس را بنویسیم. کافیست تابع زیر را در فایل functions.php قالب خود قرار دهید:

function as_loadmore_ajax_handler(){
 
	// prepare our arguments for the query
	$args = json_decode( stripslashes( $_POST['query'] ), true );
	$args['paged'] = $_POST['page'] + 1; // we need next page to be loaded
	$args['post_status'] = 'publish';
 
	query_posts( $args );
 
	if( have_posts() ) :
 
		// run the loop
		while( have_posts() ): the_post();
 

			get_template_part( 'template-parts/post/content', get_post_format() );
 
		endwhile;
	endif;
	die;
}
 
 
add_action('wp_ajax_loadmore', 'as_loadmore_ajax_handler'); // wp_ajax_{action}
add_action('wp_ajax_nopriv_loadmore', 'as_loadmore_ajax_handler'); // wp_ajax_nopriv_{action}

function as_loadmore_ajax_handler(){

// prepare our arguments for the query

$args = json_decode( stripslashes( $_POST['query'] ), true );

$args['paged'] = $_POST['page'] + 1; // we need next page to be loaded

$args['post_status'] = 'publish';

query_posts( $args );

if( have_posts() ) :

// run the loop

while( have_posts() ): the_post();

get_template_part( 'template-parts/post/content', get_post_format() );

endwhile;

endif;

die;

}

add_action('wp_ajax_loadmore', 'as_loadmore_ajax_handler'); // wp_ajax_{action}

add_action('wp_ajax_nopriv_loadmore', 'as_loadmore_ajax_handler'); // wp_ajax_nopriv_{action}

به کمک این تابع مشخص می‌کنیم که باهر بار لود به صورت آجاکس، چه مطالبی نمایش داده شوند. کافیست در خط ۱۶، کد مربوط به نمایش پست‌های خود را قرار دهید.

دو اکشن وجود در این قطعه کد مشخص می‌کنند که نمایش مطالب بیشتر با Ajax برای چه کاربرانی باشد! در واقع کاربران لاگین کرده و وارد نشده را می‌توان به کمک این actionها جدا کرد!

حالا بعد از ذخیره سازی فایل‌های بالا صفحه‌ی موردنظر خود را رفرش کنید و پست‌های مدنظر را با ajax به صورت لود بی نهایت دریافت کنید!

8 پاسخ به “نمایش مطالب بیشتر با Ajax بدون افزونه در وردپرس”

sunshine گفت:
۶ بهمن ۱۳۹۹ در ۱۱:۳۶ ق٫ظ
سلام. یک سوال . میشه درباره قسمتی که گفتید (در خط 16 کد مربوط به نمایش پست‌های خود را قرار دهید) توضیح بیشتری بدید. متوجه نمیشم چه کدی از قالبم را باید به کجای خط 16 اضاف کنم ؟ خود خط 16 کد داره ایا باید پاک بشه و جایگزین شه
- مریم جعفرپور گفت:
  ۶ بهمن ۱۳۹۹ در ۱۲:۰۹ ب٫ظ
  سلام دوست عزیز، این بخش برای نمایش پست‌ها هستش. میتونید این خط رو پاک کنید و کد نمایش محتوا رو قرار بدید. یعنی میتونید چند خط html اضافه کنید داخلش عنوان و تصویر پست‌ها رو دریافت کنید و نمایش بدید. این بخش داخل حلقه مدام تکرار میشه و هر بار پست‌های بیشتری لود میشن
sanja گفت:
۵ دی ۱۳۹۹ در ۱۱:۴۵ ب٫ظ
همین رو بخوایم به نظرات comments_template تغییر بدیم چیکار کنیم ؟ یعنی نظرات با این اجکس لود شن …
- مریم جعفرپور گفت:
  ۷ دی ۱۳۹۹ در ۱۱:۱۷ ق٫ظ
  سلام تقریبا مراحل همینه اما جزییات کار کمی متفاوته. در قالب یه کامنت نمیشه این موضوع رو توضیح داد سعی می‌کنیم یه آموزش‌ هم برای این موضوع قرار بدیم ولی اگر الان بهش نیاز دارید به انگلیشی سرچ کنید آموزش‌هاش وجود داره.
میلاد گفت:
۳۱ تیر ۱۳۹۹ در ۴:۰۶ ب٫ظ
سلام. تشکر بابت مطلبتون.
اگر بخوایم ایجکس رو داخل یک پلاگین فعال کنیم، بازم باید توابع رو داخل فایل functions.php قرار بدیم؟ اگر جواب منفیه، جای مناسب کجاست؟
ممنونم
- مریم جعفرپور گفت:
  ۳۱ تیر ۱۳۹۹ در ۵:۲۸ ب٫ظ
  سلام دوست عزیز. فایل functions.php برای قالب هستش. برای پلاگین باید کد در فایل اجرایی اصلی پلاگین قرار بگیره ، یک فایل که با نام مشابه نام افزونه در پلاگین قرار داره.
Hosein گفت:
۲۱ اردیبهشت ۱۳۹۹ در ۱:۰۸ ب٫ظ
سلام یه سوال داشتم نمیشه تو مرحله سوم یه کاری کرد که به طور خودکار از قالب اون صفحه استفاده کنه چون ممکنه قالب حلقه های دسته های ما متفاوت باشن، راهی نداره خودش خودکار قالب همون حلقه رو استفاده کنه؟
- مریم جعفرپور گفت:
  ۲۱ اردیبهشت ۱۳۹۹ در ۲:۰۶ ب٫ظ
  سلام دوست عزیز، خود شما باید یه کاری کنید که برای هر دسته از حلقه‌ی مدنظر شما استفاده کنه! این کار با چند تا شرط و درج if قابل انجام هستش. کافیه نام دسته رو چک کنید و برای هر دسته بگید از چه حلقه‌ای استفاده شه.

دیدگاهتان را بنویسید لغو پاسخ

You must be logged in to post a comment.

نمایش مطالب بیشتر با Ajax بدون افزونه در وردپرس

نحوه‌ی نمایش مطالب بیشتر با Ajax (لود بی نهایت)

مرحله‌ی اول) اضافه کردن فایل جی‌کوئری به وردپرس

مرحله دوم) ایجاد فایل myloadmore.js برای ایجاد ajax در اسکرول

مرحله سوم) ایجاد handler برای آجاکس

شخصی سازی بخش نظرات در وردپرس (ایجاد بخشی متفاوت برای کامنت‌ها)

نمایش آخرین مطالب وردپرس براساس یک برچسب خاص – بدون افزونه

فعالسازی ویجت‌ و ساخت ناحیه ابزارک در وردپرس

آموزش استفاده از گوگل مپ در سایت ( افزودن نقشه گوگل به صفحات وب‌سایت)

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

8 پاسخ به “نمایش مطالب بیشتر با Ajax بدون افزونه در وردپرس”

دیدگاهتان را بنویسید لغو پاسخ

نحوه‌ی نمایش مطالب بیشتر با Ajax (لود بی نهایت)

مرحله‌ی اول) اضافه کردن فایل جی‌کوئری به وردپرس

مرحله دوم) ایجاد فایل myloadmore.js برای ایجاد ajax در اسکرول

مرحله سوم) ایجاد handler برای آجاکس

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

شخصی سازی بخش نظرات در وردپرس (ایجاد بخشی متفاوت برای کامنت‌ها)

نمایش آخرین مطالب وردپرس براساس یک برچسب خاص – بدون افزونه

فعالسازی ویجت‌ و ساخت ناحیه ابزارک در وردپرس

آموزش استفاده از گوگل مپ در سایت ( افزودن نقشه گوگل به صفحات وب‌سایت)

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

8 پاسخ به “نمایش مطالب بیشتر با Ajax بدون افزونه در وردپرس”

دیدگاهتان را بنویسید لغو پاسخ