نمایش مطالب بیشتر با آژاکس

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

در این مطلب از گلزاروب به بررسی فناوری آجاکس می پردازیم. همه ی ما در هنگام جستجوی تصاویر در گوگل با این فناوری روبرو شده ایم. هنگامی که صفحه ی تصاویر یا image را در گوگل باز می کنیم.  هر چه به سمت انتهای صفحه می رویم باز هم تصاویر جدید بارگذاری شده و به نمایش در می آید. در اصل مانند صفحه ای بی انتها عمل می کند. به این فرایند Ajax گفته می شود.

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

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

برای بهره گیری از چنین قابلیتی می توانید مراحل انجام کدگذاری آجاکس را که در زیر آمده است، مرحله به مرحله اجرا کنید.

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

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

در ابتدا در قالب ووردپرس خود، فایلی به نام myloadmore.js ایجاد کنید. در این مرحله فقط قصد داریم این فایل را به وسیله ی  یک تابع وردپرسی به قالب یا پوسته ی خود بیافزاییم.

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18function 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_enqueue_script در 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 30jQuery(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 برای آجاکس

در مرحله ی سوم برای آجاکس 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 25function 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}

این تابع مشخص می کند که وقتی اسکرول به پیکس مورد نظر که در اینجا 1000 پیکسل بود رسید و فرمان آجاکس اجرا شد چه نوع محتوایی به نمایش در بیاید. در خط 16 تابع بالا می توانید کد مربوط به پست یا محتوایی که میخواهید نشان داده شود را درج کنید.

در این قطعه کد در خط های  24 و 25 ، دو اکشن وجود دارد که تعیین می کند نمایش محتوای بیشتر با دستور  Ajax   مختص چه کاربرانی باشد! به طور مثال می توان کاربرانی که لاگین کرده اند اما عضو نشده و وارد حساب کاربری خود نشده اند را می توان از کاربرانی که با حساب کاربری وارد شده اند از هم جدا کرد.

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

0 پاسخ

دیدگاه خود را ثبت کنید

تمایل دارید در گفتگو شرکت کنید؟
نظری بدهید!

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

5 − یک =