نمایش مطالب بیشتر با Ajax بدون افزونه در وردپرس
در این مقاله قصد داریم نحوه‌ی نمایش مطالب بیشتر با Ajax را به صورت مرحله به مرحله بررسی کنیم. به کمک این کد می‌توانید برای صفحات وب‌سایت لود بی‌نهایت ایجاد کنید. یعنی زمانی که اسکرول به انتهای صفحه رسید، تعدادی پست جدید بارگذاری می‌شود. این کار تا جایی ادامه دارد که پست‌های مد نظر ما به اتمام برسند.
چنین مواردی را در جستجوی تصاویر گوگل مشاهده کرده‌اید. در جستجوی تصاویر گوگل هر بار که به انتهای صفحه می‌رسید مجدداً تصاویر جدیدی بارگذاری می‌شوند طوری که انگار صفحه پایانی ندارد!
تمام این موارد بدون رفرش صفحه انجام می‌گیرد که به فناوری آجاکس ارتباط دارد!
برای انجام این کار مراحل زیر را دنبال کنید:
نحوه‌ی نمایش مطالب بیشتر با Ajax (لود بی نهایت)
مرحله‌ی اول) اضافه کردن فایل جی‌کوئری به وردپرس
برای شروع کار در قالب خود یک فایل به نام myloadmore.js بسازید. در این فایل فعلاً کدی قرار نمی‌دهیم. فقط در این مرحله می‌خواهیم به کمک یک تابع وردپرسی فایل myloadmore.js را به قالب خود اضافه کنیم.
بنابراین وارد فایل functions.php قالب سایت خود شوید و کد زیر را در آنجا paste کنید:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
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 در اسکرول
در فایل جی‌کوئری که در مرحله‌ی قبل ساخته بودید، کدهای زیر را قرار دهید:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
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 قالب خود قرار دهید:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
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 به صورت لود بی نهایت دریافت کنید!