استفاده از ایجکس(AJAX) در وردپرس

رایج ترین استفاده از AJAX به فرم ها مربوط می شود – بررسی اینکه آیا یک نام کاربری گرفته شده است یا با استفاده از یک پاسخ خاص به شما سوابق مختلفی را با سؤالات مختلف بپردازد. در حقیقت، هر زمان که بخواهید یک رویداد (مانند یک کاربر با کلیک کردن بر روی چیزی یا تایپ چیزی) مرتبط با یک عمل جانبی سرور که در پس زمینه رخ می دهد، از AJAX استفاده کنید.

ما قصد داریم از آن برای اضافه کردن مشتریان جدید (یک نوع پست سفارشی) به جدول پایگاه داده در وردپرس استفاده کنیم و البته شما می توانید از این آموزش برای بکارگیری ایجکس در هر قسمت از وردپرس استفاده کنید.

نحوه استفاده از AJAX در وردپرس

برای استفاده از ایجکس در وردپرس باید کارهای زیر را انجام دهید:

• قالب سفارشی خود را برای اضافه کردن یک فرم یا رویداد جاوااسکریپت که داده ها را از طریق jQuery AJAX به admin-ajax.php ارسال می کند، برای هر نوع پستی که می خواهید استفاده کنید، آماده کنید. و مطمئن شوید که jQuery بارگیری می شود.
• یک تابع در فایل function.php از قالب بنویسید تا  متغیرهای ارسالی را خوانده، پردازش کند و نتیجه ای را به کاربر بارگرداند.
• یک قلاب عمل AJAX  برای تابع خود اضافه کنید.

ایجاد فرم

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

(در قطعه کد زیر اول بررسی می  کند که کاربر وارد پیشخوان وردپرس شده باشد)
if (is_user_logged_in()):?>
<form type="post" action="" id="newCustomerForm">
<label for="name">Name:</label>
<input name="name" type="text" />
<label for="email">Email:</label>
<input name="email" type="text" />
<label for="phone">Phone:</label>
<input name="phone" type="text" />
<label for="address">Address:</label>
<input name="address" type="text" />
<input type="hidden" name="action" value="addCustomer"/>
<input type="submit">
</form>
<br/><br/>
<div id="feedback"></div>
<br/><br/>

تنها چیزی که ممکن است برای شما عجیب باشد این است که استفاده از یک فیلد ورودی پنهان به نام action وجود دارد – این شامل نام تابعی است که ما از طریق AJAX فراخوانی می کنیم.

خروجی فرم بصورت زیر است:

گیرنده پی اچ پی

بعد فایل functions.php را باز کنید و خط زیر را اضافه کنید تا جی کوئری در سایت شما بارگیری شود:

wp_enqueue_script ('jquery')؛
ساختار اصلی برای نوشتن یک تماس AJAX به شرح زیر است:
function myFunction(){
//do something
die();
}
add_action('wp_ajax_myFunction', 'myFunction');
add_action('wp_ajax_nopriv_myFunction', 'myFunction');

این دو خط آخر عبارتند از قلاب های عملیاتی که به وردپرس می گویند: “من یک تابع به نام myFunction دارم، و  می خواهم که شما آن را گوش کنید زیرا آن را از طریق رابط AJAX فراخوانی می شود” – اولین بار برای کاربران سطح مدیریت است و wp_ajax_nopriv_ برای کاربرانی که به سیستم وارد نشده اند.

در ادامه کد کاملی برای نوشتن در فایل functions.php آمده است که ما برای قرار دادن داده ها در جدول مشتریان ویژه خودمان، که به زودی توضیح خواهیم داد، استفاده می شود:
wp_enqueue_script('jquery');
function addCustomer(){
global $wpdb;
$name = $_POST['name'];
$phone = $_POST['phone'];
$email = $_POST['email'];
$address = $_POST['address'];
if($wpdb->insert('customers',array(
'name'=>$name,
'email'=>$email,
'address'=>$address,
'phone'=>$phone
))===FALSE){
echo "Error";
}
else {
echo "Customer '".$name. "' successfully added, row ID is ".$wpdb->insert_id;
}
die();
}
add_action('wp_ajax_addCustomer', 'addCustomer');
add_action('wp_ajax_nopriv_addCustomer', 'addCustomer'); // not really needed

در ابتدا متغیر سراسری wpdb تعریف شده که امکان دسترسی مستقیم به بانک اطلاعاتی را فراهم می کند.
پس از آن متغیرهای POST که حاوی داده های فرم هستند را می گیریم.

تابع  wpdb-> insert را برای وارد کردن داده ها در جدول استفاده می کنیم. از آنجا که وردپرس توابع خاصی را برای قرار دادن پست های معمول و متا داده ها فراهم می کند، این روش wpdb-> insert به طور کلی  برای جداول سفارشی استفاده می شود.

نتیجه درستور insert با FALSE مقایسه شده تا مشخص شود تابع insert شکست خورده یا خیر و اگر چنین باشد، “خطا” صادر می شود.

اگر نه، فقط یک پیام را برای کاربر ارسال می کنیم که Customer X اضافه شده است و متغیر $wpdb->insert_id شناسه مشتری را دارد (فرض کنید شما تنظیم کرده اید فیلد افزایش خودکار، مانند شناسه).

کد جاوا اسکریپت

مرحله نهایی بخش اصلی آموزش است و Javascript واقعی است که فراخوانی AJAX را آغاز می کند.  متوجه خواهید شد که در فرم قبلی که قبلا اضافه کردید، قسمت عملیات خالی بود. این به این دلیل است که ما با فراخوانی AJAX  این را انجام می دهیم.

روش کلی این کار این است:
jQuery.ajax({
type:"POST",
url: "/wp-admin/admin-ajax.php", // our PHP handler file
data: "myDataString",
success:function(results){
// do something with returned data
}
)};
این ساختار اصلی فراخوانی AJAX است که همیشه از آن استفاده خواهیم کرد، و تنها روشی که می توانید آن را انجام دهید.

پس باید کد زیر را مستقیما در قالب مشتری وارد کنید:
<script type="text/javascript">
jQuery('#newCustomerForm').submit(ajaxSubmit);
function ajaxSubmit(){
var newCustomerForm = jQuery(this).serialize();
jQuery.ajax({
type:"POST",
url: "/wp-admin/admin-ajax.php",
data: newCustomerForm,
success:function(data){
jQuery("#feedback").html(data);
}
});
return false;
}
</script>
در خط اول،  تابع ajaxSubmit مان را به فرمی که قبلا ساخته ایم، پیوند می دهیم( پس هنگامی که کاربر بر روی ارسال کلیک می کند، از طریق تابع AJAX ویژه ما می رود. بدون این خط، فرم ما هیچ کاری انجام نخواهد داد)

در تابع ajaxSubmit، اولین کاری که انجام می دهیم این است که serialize  فرم را انجام دهیم. این تابع تمام مقادیر فرم را می گیرد و آنها را به یک رشته طولانی تبدیل می کند که در کد پی اچ پی ما بعدا تجزیه می شود.

اگر همه کارها درست انجام شود، داده های برگشت داده شده را به DIV با شناسه feedback ارسال می کنیم.

تا اینجا یادگرفتید چگونه از ایجکس در فرم های وردپرس استفاده کنید.

نکاتی که باید به خاطر داشته باشید

امنیت: این کد ساده برای استفاده در سایت شما مناسب نیست و فقط با هدف آموزش نوشته شده است یادگیری است.

به روز رسانی جدول مشتریان: در حال حاضر، ما فقط یک پیام تایید را ارسال می کنیم، اما جدول مشتریان به روز نمی شود

اعتبار ورودی: از آنجا که داده های فرم  اعتبار سنجی نمی شوند، می توانید نوشته های خالی را ارسل کرده و اضافه کنید.

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