استفاده از ای جکس در پلاگین های وردپرس 0 دیدگاه

AJAX ای جکس

در این آموزش از وب ایران قصد داریم نحوه استفاده از ای جکس یا Ajax را در طراحی سایت با وردپرس آموزش دهیم. اول از همه باید به میزان کافی با HTML و CSS و Jquery آشنا باشید تا این مقاله بتواند برای شما سود مند باشد.

Ajax تابعی از کتابخانه پرکاربرد Jquery است که با استفاده از آن میتوان مقادیر را برای ارسال به سرور بودن رفرش کردن صفحه ارسال کرد و نتیجه آن را بدون ری لود شدن صفحه مشاهده نمود. اگر با Jquery آشنا باشید تابع .ajax حتما به چشمتان خورده است. syntax دستور Ajax به صورت زیر است :

$.ajax({
 url: ajaxurl,
 type: "POST",
 data: {
 action : "formChanger",
 'formCounter': personSelect,
 },
 cache: false,
 success : function( response ) {
 countElement.html( response );
 //alert(response);
 }
 });

حال به شرح دستور بالا میپردازیم.

$.ajax : برای فراخوانی تابع ایجکساز کتابخانه جی کوئری استفاده میشود.

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

type: “POST” : متد ارسال را مشخص میکند

data: پارامتر های ارسالی و مقادیر آنها مشخص میشود.

success : function( response : هنگام ارسال موفق چه اتفاقی بیوفتد. در واقع در این جا دستوراتی که بعد از ارسال موفق ایجکس باید اجرا شوند نوشته میشود.

در واقع در ای جکس در محیطی خارج از رود پرس مقدارurl حتما باید آدرس فایلی که به آن ارسال میکنیم قرار داده شود اما در وردپرس به گونه ای که در مثال آمده استفاده میشود.url: ajaxurl,

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

add_action('wp_head','pluginname_ajaxurl');

function pluginname_ajaxurl() {

?>

<script type="text/javascript">

var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';

</script>

<?php } 

دقت شود که دستور بالا باید در تم در فایل functions نوشته شوند. بدین گونه ما فایل لود کننده ایجکس که در وردپرس وحود دارد را در تگ head صفحه لود میکنیم. سپس باید توابعی که با ایجکس سر و کار دارند یعنی مقدار های ایجکسی را گرفته و با آن کار میکنند را در init وردپرس اضافه کنیم که به صورت زیر میباشد :

add_action( 'wp_ajax_formChanger', 'formChanger' ); // If called from admin panel

add_action( 'wp_ajax_nopriv_formChanger', 'formChanger' ); // If called from front end

در واقع در این مثال تابع formchanger که عملیات تغییر فرم را با استفاده از مقدار ارسالی توسط یک input را انجام میدهد ، به آزاکس وردپرس متصل شده است. اگر شما در پلاگین خود چندین بار ajax را در تابع های مختلف بکار میبرید توجه کنید که برای هر تابع باید از کد های بالا برای اضافه کردن آنها به ایجکس وردپرس استفاده کنید.

پس از این تغریبا کد به اتمام رسیده و باید تابع formChanger را برای استفاده آن در برنامه تعریف کنیم.

function formChanger()

{

$person_number = $_POST['formCounter'];

//some codes are here

}

بعد از نوشتن این تابع باید دقت کرد مه در نهایت باید یک مقداری echo یا برگردانده شود و بعد از آن wp_die() صدا زده شود. چون اگر wp_die() صدا زده نشود مقدار صفر در خروجی شما نشان داده خواهد شد.

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

پاسخ دهید

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


Time limit is exhausted. Please reload CAPTCHA.