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

تعداد بازدید: 787

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

ابتدا یک صفحه index.php بسازید و کدهای زیر را در آن بنویسید.

<?php 
/*
* Plugin Name: تست ایجکس
* Description: آموزش Ajax
* Version: 1.0
* Author: سید خلیل حسینی
* Author URI: kh.hoseini1394@gmail.com/
*/

add_action('wp_enqueue_scripts', 'script_enqueuer');
function script_enqueuer() {
   wp_enqueue_script( 'script', plugins_url('like.js' , __FILE__ ), array('jquery') , false , true);
	wp_localize_script( 'script', 'myAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php')));
}

add_action("wp_ajax_myfunc","myfunc");
add_action("wp_ajax_nopriv_myfunc","myfunc");
function myfunc(){
   $id = $_POST['id'];
   echo $id*2;
   die ();
}

function test_ajax(){
   echo '<input class="user_like" type="button" value="test">';
}
add_shortcode( "test_ajax", "test_ajax" );
?>

در همان پوشه اصلی پلاگین یک فایل با نام like.js بسازید و کدهای زیر را درون آن قرار دهید.

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

jQuery(document).ready(function($) {

    $(".user_like").click(function () {
      $.ajax({
          type: 'POST',
          url: myAjax.ajaxurl,
          data: {
              id: 4,
              'action': 'myfunc'
          }, success: function (result) {
  
             alert(result);
          },
          error: function () {
              alert("error");
          }
      });
  
  });


 });

حالا به بخش ساخت برگه ها بروید و یک برگه بسازید و شورت کد test_ajax را درون برگه بنویسید. مثل زیر:

[test_ajax]

به لینک برگه بروید و از Ajax لذت ببرید!

مطالب تصادفی

سید خلیل حسینی

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

blog-author-image