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

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

سه روش برای پیاده سازی ایجکس در وردپرس وجود دارد

• admin-ajax
• REST API
• Rewrite API

به نظر می رسد روش سوم سریعترین جواب را برای درخواست های ایجکس در وردپرس می دهد و ما هم در اینجا به پیاده سازی Rewrite API می پردازیم

ابتدا با استفاده از تابع add_rewrite_rule یک مسیر جدید در هوک init ایجاد می نمائیم

add_action('init', 'define_ajax_url');
function define_ajax_url()
{
	add_rewrite_tag('%rewrite_custom_ajax%', '([^&/]+)');
	add_rewrite_rule('ajax/?([^/]*)', 'index.php?rewrite_custom_ajax=$matches[1]', 'top');
}

در کد بالا به جای custom_ajax هر چیزی را میتوانید جایگزین کنید و به جای /ajax هم به دلخواه می توانید تغییر دهید

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

حالا نوبت به تابعی می رسد که می خواهید به درخواستتان جواب دهد

add_action('template_redirect', 'get_post_detail');
function get_post_detail()
{
	global $wp_query;

	# Don't do anything unless this is an AJAX request
	$method = $wp_query->get('rewrite_custom_ajax');
	if (!$method) {
		return;
	}

	# Check method name
	if ($method == "get_post_detail") {
		$post = get_post($_GET["post_id"]);
		$array = [
			'title' => $post->post_title,
			'link' => get_the_permalink(1),
			'content' => $post->post_content
		];

		wp_send_json_success($array, 200);
		//wp_send_json_error
	}
}

توضیحات کد :

• بررسی کردیم اگر تگ rewrite_custom_ajax وجود ندارد تابع اجرا نشود
• پارامتر post_id را از ورودی می گیریم
• توسط تابع wp_send_json_success خروجی را بصورت json بر می گردانیم اگر درخواست خطا داشت با تابع wp_send_json_error می توانید خطا را اعلام کنید

حالا در مرورگر خود آدرس زیر را تایپ و اجرا کنید و خروجی رو مشاهده نمائید

http://yoursite.com/ajax/get_post_detail/?post_id=2

نتیجه مشابه تصویر زیر است

و برای درخواست از طریق JQuery هم به صورت زیر عمل کنید

    jQuery.ajax({
        url: 'http://yoursite.com/ajax/get_post_detail/?post_id=1',
        data: {},
        dataType: 'json',
        type: 'POST',
        success: function (result) {
            if (result.success) {
                console.log(result.data);
            }
        }
    });

مطالبت مرتبط