آموزش کامل استفاده از Ajax در وردپرس به همراه مثال کاربردی – قسمت اول

موضوع : مقالات آموزشی وردپرس
تاریخ : 1400/07/05
مجموع پسند شده : 54
بازدید : 5.712 K

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

این مقاله در ۲ قسمت آماده سازی شده و در اختیار شما کاربران گرامی قرار خواهیم داد.

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

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

در واقع قسمت اول حالت مقدماتی و قسمت دوم حالت پیشرفته این آموزش است.

استفاده از Ajax در وردپرس

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

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

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

ایجاد فرم ساده جهت ارسال اطلاعات با ای جکس

خب همونطور که گفتیم اولین چیزی که ما بهش نیاز داریم یک المان هست که با استفاده از اون اطلاعات مورد نظرمون رو به سرور بفرستیم.

این فرم می تونه یه فرم ورود به سایت یا فرم تماس با ما یا هر فرم دیگه ای باشه که تو این مقاله ما یک فرم تماس با ما به صورت ساده رو در نظر گرفته ایم.

من تو این مقاله قصد ندارم کدهای html رو توضیح بدم به خاطر همین فقط کد فرم رو اینجا قرار میدم :

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

<!DOCTYPE html>
<html lang="fa-IR" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>فرم تماس با ما - وب استند</title>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body style="background: #00b6ff;font-family: 'Tahoma';">
    <div class="container wrapper">
		<div class="row mt-5">
			<div class="col-12 text-center">
				<h1 style="color:#fff">فرم تماس با ما</h1>
			</div>
		</div>
		<div class="row">
			<div id="alertBox" class="col-8"></div>
		</div>
		<div class="row mt-5">
			<div class="form-content col-8" style="margin: 0 auto;">
				<form id="contactForm">
				  <div class="mb-3">
					<label for="fullName" class="form-label">نام و نام خانوادگی</label>
					<input name="fullName" type="text" required class="form-control" id="fullName" aria-describedby="fullName">
				  </div>
				  <div class="mb-3">
					<label for="emailAddress" class="form-label">آدرس ایمیل</label>
					<input name="email" type="email" required class="form-control" id="emailAddress">
				  </div>
				  <div class="mb-3">
					<label for="subject" class="form-label">موضوع</label>
					<input name="subject" type="text" required class="form-control" id="subject">
				  </div>
				 <div class="mb-3">
					<label for="message" class="form-label">پیام</label>
					<textarea required class="form-control" rows="7" name="message" id="message"></textarea>
				  </div>
				  <div class="text-start">
					<button type="submit" class="btn btn-primary">ارسال پیام</button>
				  </div>
				</form>
			</div>
		</div>
    </div>
</body>
</html>

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

۲۳

۲۴

۲۵

۲۶

۲۷

۲۸

۲۹

۳۰

۳۱

۳۲

۳۳

۳۴

۳۵

۳۶

۳۷

۳۸

۳۹

۴۰

۴۱

۴۲

۴۳

۴۴

۴۵

<!DOCTYPE html>

<head>

<title>فرم تماس با ما - وب استند</title>

</head>

</div>

</div>

<label for="fullName" class="form-label">نام و نام خانوادگی</label>

</div>

<label for="emailAddress" class="form-label">آدرس ایمیل</label>

</div>

<label for="subject" class="form-label">موضوع</label>

</div>

</div>

<button type="submit" class="btn btn-primary">ارسال پیام</button>

</div>

</form>

</div>

</body>

</html>

خب این از مورد اول که یک فرم ساده رو تونستیم طراحی کنیم.

الان باید وردپرس رو نصب کنیم و فایل html خودمون رو ببریم داخل قالب وردپرس مون.

پس شما هم روی لوکال هاستتون ی وردپرس نصب کنید بعد ادامه آموزش رو همراهمون شید.

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

ایجاد template فرم تماس با ما در وردپرس

من فایل html رو داخل پوشه twentytwenty کپی کردم و اسمش و به contactForm.php تغییر دادم (مطابق شکل زیر).

آموزش استفاده از ajax در وردپرس - تغییر نام فایل html

خب حالا فایل contactForm.php رو ویرایش میزنیم و ابتدای فایل (منظور سطر اول)، کد زیر رو جای گذاری میکنیم :

<?php /* Template Name: contactForm */ ?>

۱	<?php /* Template Name: contactForm */ ?>

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

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

ولی حتما نیازه که از دو تابع wp_head و wp_footer استفاده کنیم تا استایل ها و اسکریپت های قالبمون تو این صفحه هم لود شن.

برای این کار تابع wp_head رو قبل از تگ head بسته و تابع wp_footer رو قبل از تگ body بسته به شکل زیر قرار میدیم :

<?php wp_head(); ?>
</head>
.
.
.
.
.
<?php wp_footer(); ?>
</body>

<?php wp_head(); ?>

</head>

<?php wp_footer(); ?>

</body>

توجه : در صورتی که مجددا صفحه رو رفرش کنید متوجه تغییر ساختار فرم می شید که دلیلش لود شدن فایل های css قالبمون هست که اهمیتی توی روند آموزش مون نداره.

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

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

کدهای شما به شکل زیر بایستی باشن :

<?php /* Template Name: contactForm */ ?>
<!DOCTYPE html>
<html lang="fa-IR" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>فرم تماس با ما - وب استند</title>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
	<?php wp_head(); ?>
</head>
<body style="background: #00b6ff;font-family: 'Tahoma';">
    <div class="container wrapper">
		<div class="row mt-5">
			<div class="col-12 text-center">
				<h1 style="color:#fff">فرم تماس با ما</h1>
			</div>
		</div>
		<div class="row">
			<div id="alertBox" class="col-8"></div>
		</div>
		<div class="row mt-5">
			<div class="form-content col-8" style="margin: 0 auto;">
				<form id="contactForm">
				  <div class="mb-3">
					<label for="fullName" class="form-label">نام و نام خانوادگی</label>
					<input name="fullName" type="text" required class="form-control" id="fullName" aria-describedby="fullName">
				  </div>
				  <div class="mb-3">
					<label for="emailAddress" class="form-label">آدرس ایمیل</label>
					<input name="email" type="email" required class="form-control" id="emailAddress">
				  </div>
				  <div class="mb-3">
					<label for="subject" class="form-label">موضوع</label>
					<input name="subject" type="text" required class="form-control" id="subject">
				  </div>
				 <div class="mb-3">
					<label for="message" class="form-label">پیام</label>
					<textarea required class="form-control" rows="7" name="message" id="message"></textarea>
				  </div>
				  <div class="text-start">
					<button type="submit" class="btn btn-primary">ارسال پیام</button>
				  </div>
				</form>
			</div>
		</div>
    </div>
	<?php wp_footer(); ?>
</body>
</html>

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

۲۳

۲۴

۲۵

۲۶

۲۷

۲۸

۲۹

۳۰

۳۱

۳۲

۳۳

۳۴

۳۵

۳۶

۳۷

۳۸

۳۹

۴۰

۴۱

۴۲

۴۳

۴۴

۴۵

۴۶

۴۷

۴۸

<?php /* Template Name: contactForm */ ?>

<!DOCTYPE html>

<head>

<title>فرم تماس با ما - وب استند</title>

<?php wp_head(); ?>

</head>

</div>

</div>

<label for="fullName" class="form-label">نام و نام خانوادگی</label>

</div>

<label for="emailAddress" class="form-label">آدرس ایمیل</label>

</div>

<label for="subject" class="form-label">موضوع</label>

</div>

</div>

<button type="submit" class="btn btn-primary">ارسال پیام</button>

</div>

</form>

</div>

<?php wp_footer(); ?>

</body>

</html>

هندل کردن ajax با jQuery در وردپرس

خب من نیاز داشتم که توی قالب فایل jQuery رو فراخوانی کنم اگه تو قالب شما فایل jQuery فراخوانی شده نیازی به این کار نیست!

بعد از تابع wp_footer من کدهای زیر رو قرار دادم تا بتونم از کتابخانه jQuery تو صفحه ام استفاده کنم :

<?php wp_footer(); ?>
	<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script type="text/javascript">
		jQuery(function($) {
			alert();
		});
	</script>
</body>

<?php wp_footer(); ?>

jQuery(function($) {

alert();

});

</script>

</body>

در صورتی که این کد رو جایگذاری کنید و صفحه رو رفرش کنید یک alert ساده رو مشاهده می کنید که در واقع نشان دهنده درستی کدهامونه.

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

ما کد زیر رو برای ارسال اطلاعات فرممون به سرور رو نیاز داریم که تو ادامه خط به خط توضیح خواهم داد.

jQuery(function($) {
	$('body').on('submit','#contactForm',function(){
		const fields = $(this).serialize();
		$.ajax({
			url: '<?php echo admin_url('admin-ajax.php'); ?>',
			type: 'POST',
			dataType: 'json',
			data: {
				action: 'sendcContactFormData',
				userData: fields,
				security: '<?php echo wp_create_nonce("webstand_nonce"); ?>'
			},
			success: function (response) {

			}
		});
		return false;
	});
});

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

jQuery(function($) {

$('body').on('submit','#contactForm',function(){

const fields = $(this).serialize();

$.ajax({

url: '<?php echo admin_url('admin-ajax.php'); ?>',

type: 'POST',

dataType: 'json',

data: {

action: 'sendcContactFormData',

userData: fields,

security: '<?php echo wp_create_nonce("webstand_nonce"); ?>'

success: function (response) {

}

});

return false;

});

خب اگه به کد بالا توجه کنید ما اومدیم به رویداد submit فرممون یک سری دستورات نوشتیم که در صورت انجام این رویداد توسط کاربر این دستورات اجرا شن.

متغیر fields : ما اومدیم مقادیر فرممون رو در متغیر fields که از نوع ثابت هست ، به صورت یک رشته متنی قرار دادیم که این اطلاعات رو توسط ajax به سرور بفرستیم. البته توجه داشته باشید که برای چک کردن مقدار فیلد ها بایستی از کدهای jquery استفاده کنید که از بحث ما خارج هست.
ajax : اومدیم از تایع اصلیمون که ajax هست استفاده کردیم و مقادیر مورد نیاز رو به این تابع تعریف کرده ایم.
url : مقدار url توی وردپرس همیشه باید admin_url(‘admin-ajax.php’) باشه. چون وردپرس تمامی درخواست های ajax رو از طریق این فایل هندل می کنه.
type : نوع ارسال فرممون رو هم در قسمت type همونطور که می بینید POST قرار دادیم که فرممون با متد POST ارسال بشه.
dataType : شما میتونید نوع ارسال و دریافت دیتا رو تو این مقدار مشخص کنید. به طور مثال اگه مقدار بازگشتی از سرور آرایه یا آبجکت هست توصیه میشه حتما از مقدار json استفاده کنید یا اگه مثلا مقدار بازگشتی یک ساختار html باشه بهتره این مقدار text/html باشه.
data : توی این آیتم ، مقادیری که میخواییم به سرور بفرستیم رو مشخص میکنیم. اگه مقادیر شما بیش از یک مورد باشه بایستی این مورد رو به صورت آرایه مقدار دهی کنید.
success : این تابع هنگامی که درخواست و پاسخ از سمت سرور بدون خطا باشه اجرا میشه. در واقع تغییراتی که میخوایید بعد از اتمام عملیات Ajax اجرا کنید رو بایستی داخل این تابع قرار بدین.
خب در آخر هم با استفاده از دستور return false از رفرش صفحه جلوگیری میکنیم تا هنگامی که کاربر فرم رو ارسال میکنه صفحه رفرش نشه و عملیات ای جکس مون اجرا شه.

خب اگه دقت کرده باشین ما در مقدار data از آرایه استفاده کرده ایم که لازمه توضیحاتی در موردشون بدیم :

action : در واقع پای ثابت همه درخواست های ajax ما توی وردپرس محسوب میشه. مقداری که به این آیتم تعریف می کنیم بسیار حائز اهمیت هست چون سمت سرور به همین مقدار یک تابع ایجاد خواهیم کرد.
userData : یک مقدار دلخواه است که اسمش هرچی میتونه باشه صرفا خواستیم با استفاده از این آیتم اطلاعات مورد نیازمون رو به سمت سرور ارسال کنیم.
security : این آیتم هم همانند action پای ثابت درخواست های ای جکس مون هست. البته با این تفاوت که میتونید به جای واژه security هر چیز دیگه ای هم بنویسید. اگه دقت کرده باشین این آیتم با استفاده از تابع wp_create_nonce مقدار دهی شده. در واقع این تابع یک رشته تصادفی تولید می کنه که با استفاده از این رشته در سمت سرور مطمئن میشیم که اطلاعات این فرم به صورت صحیح ارسال شده و ارسال کننده کاربر واقعی هست نه یک ربات. این مقدار در واقع یک مسئله امنیتی توی درخواست هامون به سرور محسوب میشه. دقت کنید مقداری که به تابع wp_create_nonce میدیم و بایستی سمت سرور هم از همین عنوان استفاده کنیم.

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

افزودن فایل های CSS و JS به قالب وردپرس با توابع wp_enqueue

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

هندل کردن درخواست ajax در سمت سرور توسط توابع وردپرس

تا اینجای کار خوب اومدیم الان درواقع مرحله آخرمون مونده که اونم با هم انجام میدیم (;

ابتدا فایل functions.php قالب و باز کنید و کدهای زیر رو داخلش قرار بدید :

<?php
function sendContactFormDataCallback()
{
    check_ajax_referer('webstand_nonce', 'security');
    $sendData = [];
    parse_str($_POST['userData'],$sendData);

    $returnData = ['salam '.$sendData['fullName']];
    wp_die(json_encode($returnData));
}

add_action('wp_ajax_nopriv_sendContactFormData', 'sendContactFormDataCallback');
add_action('wp_ajax_sendContactFormData', 'sendContactFormDataCallback');

۱۰

۱۱

۱۲

۱۳

<?php

function sendContactFormDataCallback()

{

check_ajax_referer('webstand_nonce', 'security');

$sendData = [];

parse_str($_POST['userData'],$sendData);

$returnData = ['salam '.$sendData['fullName']];

wp_die(json_encode($returnData));

}

add_action('wp_ajax_nopriv_sendContactFormData', 'sendContactFormDataCallback');

add_action('wp_ajax_sendContactFormData', 'sendContactFormDataCallback');

خب حالا به توضیح کدهای بالا می پردازیم :

ابتدا یک تابع با عنوان sendContactFormDataCallback ایجاد کردیم که به تابع add_action که در آخر کدهامون هست به عنوان تابع callback تعریف کنیم.
با استفاده از تابع check_ajax_referer در واقع یک چک امنیتی انجام میدیم که مطمئن شیم درخواست معتبر هست یا نه. اگه توجه کنید متوجه می شید که در مقدار اول ، مقدار آیتم security که در تابع ajax تعریف کردیم رو قرار دادیم و در مقدار دوم عنوان آیتم که security بود رو قرار دادیم.
با استفاده از تابع parse_str که یکی از توابع php هست مقادیر آیتم userData رو که به صورت رشته متنی ارسال کردیم رو به یک آرایه تبدیل می کنیم تا به راحتی بتونیم ازشون استفاده کنیم.
سپس اطلاعاتی که میخواییم به عنوان پاسخ درخواست از سمت سرور ارسال کنیم رو به یک متغیر میدهیم.
در آخر با استفاده از تابع wp_die پاسخ رو ارسال میکنیم و تابع رو می بندیم. یعنی اگه شما بعد از این تابع هر کدی رو بنویسید اجرا نمیشه!

توجه : درصورتی که مقادیر تابع check_ajax_referer اشتباهی وارد شوند با خطای ۴۰۳ (عدم دسترسی) مواجه خواهید شد.

خب رسیدیم به جای جالبش!

اگه دقت کرده باشین ما از دوتا add_action استفاده کردیم ولی چرا اینکار و کردیم؟ در حالی که هر دو یک تابع رو به عنوان callback گرفتن؟

جواب این سوال رو بذارید اینطوری توضیح بدم :

بعضی درخواست ها هستن که لازمه کاربر حتما وارد سایت شده باشه تا بتونه اون درخواست رو ارسال کنه مثل خرید محصول.

بعضی درخواست ها هم هستن که کاربر به صورت مهمان باشه تا بتونه اون درخواست و اجرا کنه مثل ورود به سایت.

بعضی درخواست ها هم هستن که فرقی نمی کنه کاربر وارد سایت شده باشه یا نه و در هر دو صورت امکان ارسال وجود داره مثل “آیا این مقاله برای شما مفید بود ؟” در پایین همین مقاله که می تونید امتیاز خودتون رو راجع به این مقاله برامون ارسال کنید 🙂 .

خب وردپرس به ما این امکان رو داده تا بتونیم هرگونه درخواستی رو به راحتی هندل کنیم.

توی کدهای آخر که مربوط به add_action هامون هستن میبینید که مقدار اول واژه nopriv رو داره در واقع این اکشن به وردپرس میفهمونه که این یک درخواست private نیست و همه کاربران میتونن این درخواست و ارسال کنن.

نکته : مقدار action که توی ajax نوشتیم رو اگه دقت کرده باشین توی add_action ها استفاده کردیم. اگه دقت کنید در add_action اول بعد از wp_ajax_nopriv_ و توی add_action دوم یعد از wp_ajax_ دقیقا مقدار action ارسالی رو استفاده کنیم. پس توجه داشته باشید هر مقداری که به action میدید همون مقدار رو عینا بایستی اینجا قرار بدین.

خب الان فکر میکنم بتونید به راحتی اون سه مدلی که گفتم رو پیاده سازی کنید!

اجرا و تست درخواست ajax در وردپرس

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

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

وارد صفحه فرم تماس با ما شید
دکمه f12 کیبورد رو بزنید تا inspect element مرورگر اجرا شه (فرقی نمیکنه مرورگرتون چی باشه)
به تب Network برید
فرم رو پر کنید و دکمه ارسال رو بزنید
توی تب Network میبینید که یک درخواست از admin-ajax.php نمایش داده میشه.
روی درخواست کلیک کنید تا اطلاعات درخواست سمت راست نمایش داده شه
اگه خطایی وجود نداشته باشه status درخواست ۲۰۰ خواهد بود در غیر اینصورت کد خطای مربوطه نمایش داده میشه.
جهت مشاهده پاسخ سرور در قسمت اطلاعات درخواست به تب Response و یا Preview برید.
اگه کدهاتون درست باشه اصولا باید یک آرایه باشه با مقدار “سلام هادی خانزاده” رو مشاهده خواهید کرد.
از ajax در وردپرس لذت ببرید!

پاسخ درخواست ajax در ورپرس

اینم نمونه پاسخ درخواستمون هست که توی تصویر مشاهده می کنید.

نحوه استفاده از response درخواست Ajax در وردپرس

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

برای اینکه ما بتونیم نتیجه درخواست کاربر رو بهش نشون بدیم حالا به اشکال مختلف مانند alert یا جعبه پیغام یا هر چیز دیگه ای ، باید به سراغ تابع success که توی درخواست ajax مون نوشتیم بریم.

کد زیر و در نظر بگیرید :

success: function (response) {
    alert(response.message);
}

success: function (response) {

alert(response.message);

}

البته من ی تغییر کوچیکی تو کدها دادم اونم اینه که پاسخی که از سمت سرور دریافت میکنیم رو به شکل زیر تغییر دادم :

<?php
$returnData = ['message' => 'سلام '.$sendData['fullName']];

۱ ۲	<?php $returnData = ['message' => 'سلام '.$sendData['fullName']];

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

خب الان اگه رفرش کنید صفحه رو و مجددا درخواست خودتون رو بفرستین یک alert ساده با مقدار “سلام هادی خانزاده” رو مشاهده می کنید.

توجه : درصورتی که بعد از رفرش متوجه شدید کدتون کار نمیکنه توصیه میکنم حتما یک بار ctrl+f5 بزنید و مجددا تست کنید اگه بازم دیدین کدتون کار نمیکنه اینبار به کدهاتون مراجعه کنید و ایراد یابی کنید.

لازم می دونم اینجا کدهای نهایی فایل php مون رو هم در اختیارتون قرار بدم تا راحت تر بتونید از این آموزش استفاده کنید :

<?php /* Template Name: contactForm */ ?>
<!DOCTYPE html>
<html lang="fa-IR" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>فرم تماس با ما - وب استند</title>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
	<?php wp_head(); ?>
</head>
<body style="background: #00b6ff;font-family: 'Tahoma';">
    <div class="container wrapper">
		<div class="row mt-5">
			<div class="col-12 text-center">
				<h1 style="color:#fff">فرم تماس با ما</h1>
			</div>
		</div>
		<div class="row">
			<div id="alertBox" class="col-8"></div>
		</div>
		<div class="row mt-5">
			<div class="form-content col-8" style="margin: 0 auto;">
				<form id="contactForm">
				  <div class="mb-3">
					<label for="fullName" class="form-label">نام و نام خانوادگی</label>
					<input name="fullName" type="text" required class="form-control" id="fullName" aria-describedby="fullName">
				  </div>
				  <div class="mb-3">
					<label for="emailAddress" class="form-label">آدرس ایمیل</label>
					<input name="email" type="email" required class="form-control" id="emailAddress">
				  </div>
				  <div class="mb-3">
					<label for="subject" class="form-label">موضوع</label>
					<input name="subject" type="text" required class="form-control" id="subject">
				  </div>
				 <div class="mb-3">
					<label for="message" class="form-label">پیام</label>
					<textarea required class="form-control" rows="7" name="message" id="message"></textarea>
				  </div>
				  <div class="text-start">
					<button type="submit" class="btn btn-primary">ارسال پیام</button>
				  </div>
				</form>
			</div>
		</div>
    </div>
	<?php wp_footer(); ?>
	<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script type="text/javascript">
		jQuery(function($) {
			$('body').on('submit','#contactForm',function(){
				const fields = $(this).serialize();
                console.log(fields);
                $.ajax({
                    url: '<?php echo admin_url('admin-ajax.php'); ?>',
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        action: 'sendContactFormData',
                        userData: fields,
                        security: '<?php echo wp_create_nonce("webstand_nonce"); ?>'
                    },
                    success: function (response) {
                        alert(response.message);
                    }
                });
				return false;
			});
		});
	</script>
</body>
</html>

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

۲۳

۲۴

۲۵

۲۶

۲۷

۲۸

۲۹

۳۰

۳۱

۳۲

۳۳

۳۴

۳۵

۳۶

۳۷

۳۸

۳۹

۴۰

۴۱

۴۲

۴۳

۴۴

۴۵

۴۶

۴۷

۴۸

۴۹

۵۰

۵۱

۵۲

۵۳

۵۴

۵۵

۵۶

۵۷

۵۸

۵۹

۶۰

۶۱

۶۲

۶۳

۶۴

۶۵

۶۶

۶۷

۶۸

۶۹

۷۰

۷۱

<?php /* Template Name: contactForm */ ?>

<!DOCTYPE html>

<head>

<title>فرم تماس با ما - وب استند</title>

<?php wp_head(); ?>

</head>

</div>

</div>

<label for="fullName" class="form-label">نام و نام خانوادگی</label>

</div>

<label for="emailAddress" class="form-label">آدرس ایمیل</label>

</div>

<label for="subject" class="form-label">موضوع</label>

</div>

</div>

<button type="submit" class="btn btn-primary">ارسال پیام</button>

</div>

</form>

</div>

<?php wp_footer(); ?>

jQuery(function($) {

$('body').on('submit','#contactForm',function(){

const fields = $(this).serialize();

console.log(fields);

$.ajax({

url: '<?php echo admin_url('admin-ajax.php'); ?>',

type: 'POST',

dataType: 'json',

data: {

action: 'sendContactFormData',

userData: fields,

security: '<?php echo wp_create_nonce("webstand_nonce"); ?>'

success: function (response) {

alert(response.message);

}

});

return false;

});

</script>

</body>

</html>

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

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

موفق و پیروز باشید.

جعبه دانلود

لینک دانلود فایل ها

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

کلمات کلیدی

هادی خانزاده

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

آیا این مقاله برای شما مفید بود ؟

نظر شما کاربر محترم در مورد این مقاله برای ما بسیار اهمیت دارد و ما را در ارائه مقالات مفید دیگر کمک خواهد کرد.

دیدگاه ها خود را با ما در میان بگذارید!

نام و نام خانوادگی

آدرس ایمیل

آدرس وب سایت

متن دیدگاه

مشخصات شما از نظر ما محرمانه تلقی شده و در اختیار هیچ کس قرار داده نخواهد شد.

دیدگاه های ارسالی

رضا 1400/07/13

خیلی عالی بود ممنون.
فقط قسمت دومش رو هم زودتر قرار بدین چون گفتین تو قسمت دوم اطلاعات رو تو دیتابیس هم ذخیره می کنید.
با تشکر از آموزش خوبتون.

هادی خانزاده 1400/07/13

سلام و عرض ادب
قسمت دوم به زودی در سایت قرار داده خواهد شد.
درضمن آموزش های دیگری نیز در آینده با محوریت ajax در وب استند منتشر خواهد شد.
با تشکر از حسن نظر شما کاربر گرامی.

آرزو 1400/09/13

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

کتابخانه جیکوئری قبل از کدهای مربوط به شهرهای ایران لود نشده است!

چه کاری باید انجام بدم. در وردپرس هم آماتور هستم.

میتونم از مشاوره شما در این زمینه استفاده کنم؟

هادی خانزاده 1400/09/17

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

sa 1401/04/12

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

هادی خانزاده 1401/04/13

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

سجاد 1401/09/04

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