در حال حاضر افزونه های مختلفی برای ساخت صفحه ارتباط با ما برای وردپرس وجود دارد، اما ما قصد داریم در این مقاله آموزش دهیم که چگونه یک صفحه ارتباط با ما بدون افزونه داشته باشیم.
این مقاله در تاریخ 7 بهمن ماه 96 بروزرسانی شده است
فیلم آموزشی ساخت صفحه ارتباط با ما بدون افزونه
مرحله اول: ساخت فایل contact-page.php
در ابتدا می بایست یک فایل php برای صفحه ارتباط با ما بسازیم. نام این صفحه می تواند بر اساس خواسته شما هر چیزی باشد، به پوسته قالب رفته و فایل contact-page.php را می سازیم . حال کد زیر را در فایل قرار دهید:
<?php /* Template Name: ارتباط با ما */ ?>
کد بالا نام قالب را تعیین می کند، برای اطلاعات بیشتر مقاله آموزش ساخت قالب برگه در وردپرس را مطالعه کنید.
مرحله دوم: ساخت فرم
در این مرحله باید فرم مورد نظر را طراحی کنید. در اینجا فرمی که برای شما قرار داده ام نمونه ساده ای است که باید داخل فایل contact-page.php و داخل div که مربوط به محتوا هست قرار می دهید.
نمونه:
<?php /* Template Name: ارتباط با ما */ ?> <?php get_header(); ?> <div class="container"> <div class="box-center-form"> <form id="contactForm"> <p class="form-row"> <label for="contactName">نام شما:</label> <input type="text" name="contactName" id="contactName" value="" /> </p> <p class="form-row"> <label for="email">ایمیل شما:</label> <input type="text" name="email" id="email" value="" /> </p> <p class="form-row"> <label for="commentsText">پیام:</label> <textarea name="commentsText" id="commentsText" rows="7" cols="30"></textarea> </p> <p class="form-row"> <input type="submit" value="ارسال ایمیل"></input> </p> <input type="hidden" name="submitted" id="submitted" value="ارسال ایمیل" /> <p id="status" class="form-row"></p> </form> </div> </div> <?php get_footer(); ?>
مرحله دوم: درج کدهای پردازش فرم
در مراحل قبل فرم را ساختیم اما این فرم کار نمی کند. در این مرحله کدهای لازم برای ارتباط Ajax و کدهای PHP جهت پردازش درخواست را اضافه میکنیم . بدین صورت که فرم ارسالی کاربر به ایمیلی که در پنل ادمین معرفی شده است ارسال خواهد شد.
برای این کار کدهای زیر را به فایل functions.php اضافه می کنیم :
function wpschool_contact_scripts(){ wp_register_script('ajax-contact-script', get_template_directory_uri() . '/ajax-contact-script.js', array('jquery') ); wp_enqueue_script('ajax-contact-script'); wp_localize_script( 'ajax-contact-script', 'ajax_contact_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ), 'loading_message' => __('در حال ارسال اطلاعات ، لطفا صبر کنید...') )); } add_action('wp_enqueue_scripts', 'wpschool_contact_scripts'); function wpschool_ajax_contact(){ $hasError = false; if(trim($_POST['contactName']) === '') { $message = 'لطفا نام خود را وارد نمایید'; $hasError = true; } else { $name = sanitize_text_field($_POST['contactName']); } if(trim($_POST['email']) === '') { $message = 'لطفا آدرس ایمیل خود را وارد نمایید.'; $hasError = true; } else if (!preg_match("/^[[:alnum:]][a-z0-9_.-]*@[a-z0-9.-]+\.[a-z]{2,4}$/i", trim($_POST['email']))) { $message = 'آدرس ایمیل وارد شده صحیح نمی باشد'; $hasError = true; } else { $email = sanitize_text_field($_POST['email']); } if(trim($_POST['commentsText']) === '') { $message = 'لطفا پیام خود را وارد نمایید'; $hasError = true; } else { $comments = esc_textarea($_POST['commentsText']); } if(!$hasError) { $emailTo = get_option('admin_email'); $subject = 'یک پیغام از طرف '.$name; $body = "نام فرستنده: $name \n\nایمیل نویسنده: $email \n\nپیغام: $comments"; $headers = 'From: '.$name.' <contact@your-domain.com> ' . "\r\n" . 'Reply-To: ' . $email; wp_mail($emailTo, $subject, $body, $headers); $message = __('پیام شما با موفقیت ارسال شد، با تشکر از شما'); } echo json_encode(array('error'=>$hasError, 'message'=>$message)); die(); } add_action('wp_ajax_wpschool_ajax_contact', 'wpschool_ajax_contact'); add_action('wp_ajax_nopriv_wpschool_ajax_contact', 'wpschool_ajax_contact');
تابع اول یعنی wpschool_contact_scripts جهت ثبت اسکریپت در وردپرس و انتقال پارامترهای لازم به اسکریپت تعریف شده است.
توجه: برای درک بهتر تابع اول می توانید مقاله wp_enqueue در وردپرس را مطالعه کنید.
تابع دوم یعنی wpschool_ajax_contact برای اعتبارسنجی اطلاعات ارسالی از طریق Ajax و سپس ارسال ایمیل از طریق فرم ارتباط با ما ایجاد شده است.
توجه: بجای your-domain نام دامین وب سایت خود را در کد وارد کنید.
مرحله سوم: ساخت فایل اسکریپت
برای برقراری ارتباط از طریق Ajax با سرور ، فایل اسکریپت ajax-contact-script.js در پوشه قالب خود (twentyseventeen) ایجاد کرده و کدهای زیر را به آن اضافه می کنیم:
jQuery(document).ready(function($) { $('form#contactForm').on('submit', function(e){ $('p#status').show().text(ajax_contact_object.loading_message); jQuery('p#status').removeClass("success error"); $.ajax({ type: 'POST', dataType: 'json', url: ajax_contact_object.ajax_url, data: { 'action': 'wpschool_ajax_contact', 'contactName': $('#contactName').val(), 'email': $('#email').val(), 'commentsText': $('#commentsText').val() }, success: function(data){ if(data.error==true){ jQuery('p#status').removeClass("success"); jQuery('p#status').addClass("error"); } else { jQuery('p#status').addClass("success"); jQuery('p#status').removeClass("error"); jQuery( '#contactName').val("" ); jQuery( '#email').val( "" ); jQuery( '#commentsText').val( "" ); } $('p#status').text(data.message); }, error: function(response){ jQuery('p#status').addClass("error"); jQuery('p#status').removeClass("success"); jQuery('p#status').text("خطایی در هنگام ارتباط با سرور به وجود آمده است. لطفا دوباره امتحان کنید!"); } }); e.preventDefault(); }); });
مرحله چهارم: افزودن استایل های CSS
برای زیباتر جلوه دادن فرم ارتباط با ما استایل های CSS زیر را به فایل style.css اضافه می کنیم:
.container { padding-right: 15px; padding-left: 15px; padding-top: 15px; margin-right: auto; margin-left: auto; width: 100%; } .box-center-form { width: 30%; margin-left: auto; margin-right: auto; float: none; background: #f1f0f0; padding: 1.5em!important; position: relative; margin-bottom: 1.5em; } .error { color: #fff; background: #d00000; } .success { background: #00a77a; color: #fff } #status { text-align:center; width: 100%; margin: 5px auto 0; padding: 9px; border-radius: 5px; font-weight: 700; font-size: 15px; }
مرحله پنجم: ایجاد برگه ارتباط با ما
حالا که تمام مراحل ساخت صفحه ارتباط با ما را انجام داده ایم لازم است کاری کنیم تا این صفحه از طریق وردپرس قابل مشاهده باشد، برای این کار به قسمت برگه ها رفته و یک برگه جدید ایجاد میکنیم.
نام برگه را contact-us گذاشته از قسمت قالب “ارتباط با ما” را انتخاب کرده و ذخیره می کنیم:
حالا وقتی برگه contact-us را باز می کنید با تصویر زیر روبرو خواهید شد:
توجه: به دلیل استفاده اکثر وب سایت ها از هاست های اشتراکی ایمیل های ارسالی به پوشه اسپم (Spam) وارد می شوند، هنگام تست حتما پوشه اسپم را چک کنید.
توجه: برای بالا بردن امنیت این فرم می توانید مقاله ” افزودن Google reCAPTCHA به وردپرس ” را مطالعه کنید.
آموزش ساخت صفحه ارتباط با ما بدون افزونه نیز به پایان رسید. امیدوارم این آموزش وردپرس مورد پسندتون قرار گرفته باشه.
موفق باشید.
هر چهار کد رو باید توی یک صفحه قرار بدم یا توی صفحات جداگانه؟
بله دوست عزیز. تمامی کدهای معرفی شده را در صفحه قرار دهید
خوب چگونه از صفحه اصلی لینک به این صفحه بدم؟
طبق آموزش، شما یک برگه می سازید و قالب پیشفرض را بر روی نام انتخابی قرار دهید. سپس از بخش فهرست برگه را به منو سایت اضافه کنید
خوب توی توضیحات این اسم انتخاب کردید (contact-page.php)
ولی فکر کنم درستش اینه: (page-contact.php)
نام فایل فرقی نداره که چی باشه و شما هر اسمی که می خواهید می تونید بزارید
سلام
من این کدهارو توی یه صفحه گذاشتم و یه برگه ساختمو تمام کارارو انجام دادم
فقط وقتی نظر رو میفرستم تو قسمت دیدگاه ها نیست
نمیارتش
خودتون ببینید
http://w-p.xzn.ir/tutorial/?page_id=60
میفرستم نظر رو ولی نمیاد
باید کجا برم ببینم
سلام دوست من. لینکی که فرستادید چیزیو باز نمیکنه و اینکه این آموزش برای ساخت فرم تماس با ما هستش نه نظر
سلام
من این فایل رو چجوری بساز
یعنی اضافه کنم تو ورایشگر قالب و کد هاشو قرار بدم ؟
شما کافیه این فایل رو در پوسته خودتون بسازید
عالی بود خیلی ممنون بابت وقتی که قرار می دهید
سلام و درود
من قسمت فرم سایت رو گذاشتم ولی کار نمیکنه
مشکل باید از اکشن متد باشه
امکان راهنمایی هست ؟
سلام دوست من. ممکنه مشکل از جای دیگری باشه. لطفا کد مربوط به فانکشن رو چک کنید که طبق آموزش پیش رفته باشید
همه ی ابزارکام بهم ریخت!! چرا؟؟؟
سلام دوست عزیز. ابزارک ها کجا بهم ریخت؟
مشکل ابزارکام رفع شد ، اشتباه از خودم بوده.
فقط الان وقتی میزنم ارسال ایمیل به یکی از صفحه های فرعی(یکی از نوشته هایی که عضو یکی از دسته هاس) هدایت میشه کاربر. مشکل کجاست به نظر شما؟
راستی لطفا این تشخیص انسانتونو چپ چین کنید !! 😀
دوست عزیز اینکه به صفحه دیگری هدایت میشه میتونه دلیل های مختلفی داشته باشه. اگر کاملا طبق آموزش پیش برید مشکلی پیش نمیاد
🙁 کلا کار نمیکنه!! از وقتی درگاه پی لاین گذاشتم باهم قاطی شدن!!
این آموزش تست شده هستش و مشکلی نداره
تشکر از شما
سلام
بابت آموزشت ممنونم
اما نیاز به راهنمایی دارم:
این قسمت رو متوجه نشدم “در این مرحله باید فرم مورد نظر را طراحی کنید. در اینجا فرمی که برای شما قرار داده ام نمونه ساده ای است که باید داخل فایل contact-page.php و داخل div که مربوط به محتوا هست قرار می دهید.”
یعنی قبل و بعد از اون کد یدونه div قرار بدم ؟
سلام دوست عزیز. معمولا محتوایات صفحات داخل یک div مشخصی قرار می گیره. شما میتونید با دیدن کدهای page.php اون div رو پیدا کنید
عرض سلام
لطفا بفرمائید چطور می تونم کد رو تغییر بدم که پیام به ایمیل دیگری فرستاده شود؟
می خواهم با ایمیلی که در پنل ادمین معرفی شده تفاوت کنه.
با تشکر
آرمین جان به جای get_option(‘admin_email’) ایمیل مورد نظرتو بزار
ممنون
دقیقا به جای همون عبارت قرار بدم؟
با این خطا مواجه شدم
Parse error: syntax error, unexpected ‘@’ in /home/public_html/wp-content/themes/contact.php on line 39
آرمین جان اینطوری قرار دادی؟
$emailTo = ‘wpschool1@gmail.com’;
بله
متاسفانه ایمیلی دریافت نمی شه…
سلام مرسی از اموزش
امکانش هست که بهش اندازه بدیم ؟
یا همون استایل ؟
سلام. بله دوست عزیز امکانش هست
الناز میشه لطفا کنی کدشو بذاری ممنون میشم ، البته در صورت امکان .مرسی
سلام کمال جان. کد کجارو میگی؟
سلام
من این صفحه php رو که ساختم تو کدوم مسیر باید قرارش بدم. تو مسیر www//wordpress یک صفحه با همین محتوی دارم ولی چطوری از این صفحه استفاده کنم؟
سلام سمیرا جان. باید داخل فولدر پوسته قرار بدید
سلام
من متوجه نمیشم این ایمیل به کجا ارسال میشه
ممنون از سایت خوبتون
گفتید ایمیلی که در پنل ادمین هست
نمیدونم کجاست
سلام دوست من . منظورم ایمیلی هستش که در بخش کاربران -> شناسنامه شما وارد شده
با سلام
با تشکر از صبر و حوصله شما
لطفن بفرمایید این صفحه را باید در هاست ایجاد کرد یا در مدیریت سایت
ممنون میشم
سلام سحر جان. این اقدامات همگی داخل هاست هستند
سلام من الان چند هفته هست که هنوز موفق نشده ام که در سایت فرم تماس را درست کنم و با افزونه هم هیچی به من نشون نمیده. امکانش هست که من رو راهنمایی کنید.
سلام من موفق شدم انجام بدم ولی الان یک سوال دیگه داشتم، من چه طوری میتونم که فرمتش رو تغییر بدم و براش css تعریف کنم ؟ مرسی
سلام دوست عزیز. کافیه کلاس تعریف کنید و css بهش بدید
سلام دوست عزیز. البته. با ایمیل من در تماس باشید
wpschool1@gmail.com
سلام الناز خانوم خسته نباشید
الان میشه کامل بهم توضیح بدید ک چجوری این صفحه رو درست کنم؟؟؟؟
این contact-page.php رو چیکارکنم؟کجا بذارمش؟
سلام دوست من
فایلی رو که درست کردی رو بزار داخل پوشه تم. بعدش از قسمت برگه ها، برگه جدید بساز و قالب پیشفرض رو انتخاب کن
مرسی
سلام من هر چی صفحه درست میکنم ایرور میده باز نمیشه چیکار باید بکنم
سلام. چه اروری؟
سلام خسته نباشید.ببخشید صفحه درباره ما هم همین جوری ساخته میشه؟
سلام. خیر چون در صفحه درباره ما قاعدتا فرم تماس نداریم. برای ساخت این صفحه می تونید از برگه ها استفاده کنید
ممنون از توضیحاتتون
سلام مرسی خیلی خوبه
فقط یک سوال اگه بخوایم بهش گزینه اضافه کنیم چجوریه ؟
مثلا موضوع پیام و یا نام وبسایت ؟
با سلام بنده تمامی کارها رو انجام دادم ولی ظاهرا ایمیلی دریافت نمیشه! هیچ اروری هم داده نمیشه و حتی مینویسه که پیام شما ارسال شد.
سلام بنده هم تمامی کارها رو انجام دادم ولی هیچ ایمیلی دریافت نمیشه و حتی مینویسه که پیام شما ارسال شد
با سلام
باید چند تا نکته رو در نظر بگیرید، اول اینکه این آموزش روی لوکال جواب نمیده و باید آنلاین تستش کنید ، دوم اینکه پوشه اسپم رو چک کنید که ایمیل اونجا نرفته باشه ،سوم اینکه باید چک کنید ایمیل سرورتون رو آدرسی که بهش ایمیل میزنید بن نکرده باشه معمولا تو ایمیل های یاهو این اتفاق زیاد می فته توصیه میکنم با جیمیل تست بگیرید.
بازم هم اگه مشکلی بود همین جا کامنت بزارید.
سلام
من یک فرم تماس درست کردم و طبق کدهایی که توی آموزش نوشته بودین انجام دادم ولی وقتی که روی دکمه ارسال پیام کلیک میکنم هیچ اتفاقی نمیفته و مقادیری که در فرم وارد کردم وارد url صفحه میشه و همون محتوای صفحه تماس با ما رو میاره
کدهای فانکشن هم درست نوشتم و آی دی رو هم با کدهای فانکشن تطبیق دادم ولی بازم هر کاری میکنم نمیشه
چرا ؟
راستی توی هاست هم امتحان میکنم
سلام و خسته نباشید،
ابتدا چک کنید که تو کدهای جاوا اسکریپت خطا نداشته باشید ، برای این کار اگر از کروم استفاده می کنید F12 بزنید ببنید توی کنسول خطا داده یا نه؟
دلیل عمل نکردن کدها اینه که کدهای جاوااسکریپت شما به دکمه Submit فرمتون متصل نشده و باید دلیل اون رو پیدا کنید.
نکته: اگر قالب مورد استفاده رو خودتون نوشتید چک کنید که در هدر و فوتر توابع wp_head , wp_footer موجود باشه.
جهت راهنمایی بیشتر به آی دی تلگرام ما پیام بدید تا راهنماییتون کنیم.
https://t.me/wpschool_support
موفق باشید.
کدا معلوم نیست
سلام دوست عزیز،
من الان چک کردم مشکلی در صفحه و کدها وجود نداره ، در صورت امکان مرورگر خودتون رو تغییر بدید و دوباره صفحه رو بررسی کنید.
موفق باشید
سلام ، بعد از ارسال ایمیل محتوای داخل فرم هنوز نمایش داده میشه، می خوام اطلاعات بعد از ارسال از فرم حذف بشه
سلام و خسته نباشید
مورد درخواستی به کدهای jQuery اضافه شد ، پس از ارسال موفق ایمیل محتوای ورودی ها پاک می شوند.
موفق باشید.
سلام
من کد رو داخل وب سایتم گذاشتم به صورت آنلاین تست کردم. اما ایمیلی ارسال نمیشه. gmail هم دادم بهش.
if(!$hasError) {
$emailTo = get_option(‘anglnangle@gmail.com’);
$subject = ‘یک پیغام از طرف ‘.$name;
$body = “نام فرستنده: $name \n\nایمیل نویسنده: $email \n\nپیغام: $comments”;
$headers = ‘From: ‘.$name.’ ‘ . “\r\n” . ‘Reply-To: ‘ . $email;
wp_mail($emailTo, $subject, $body, $headers);
$message = __(‘پیام شما با موفقیت ارسال شد، با تشکر از شما’);
}
میشه بفرمایید مشکل از کجاست
contact@negarara.com رو هم متوجه نشدم که چرا باید میذاشتم. من همچین ایمیلی نسخاتم روی دامنم!
سلام دوست عزیز ،
get_option(‘admin_email’) رو نباید تغییر بدید ، این کد ایمیل ادمین وب سایت رو استخراج می کنه و به اون ایمیل میزنه ، نباید با ایمل خودتون جایگزین کنید.
ایمیل contact هم فقط جهت نمایش در ایمیل ارسالی هستش و نیاز نیست بسازید.
دقیقا مثل فیلم آموزشی موجود در مقاله عمل کنید.
موفق باشید
سلام خسته نباشید ممنونم از آموزش خوب شما ولی یک مشکلی که هست اینه که وقتی ایمیل رو ارسال می کنم به ایمیل بنده پیامی فرستاده نمیشه
با سلام
لطفا از gmail برای دریافت ایمیل استفاده کنید روی برخی سرویس ها مثل یاهو جواب نمیده، و درضمن همانطور که توی فیلم آموزشی توضیح دادیم برای اولین بار ایمیل به پوشه اسپم شما انتقال داده میشه و باید اون رو از اسپم خارج کنید تا دیگه مشکلی پیش نیاد.
حتما فیلم آموزشی رو مشاهده کنید.
موفق باشید
سلام خسته نباشید مرسی از اموزشتون ولی یه مشکلی که هست پوشه js من کار نمیکنه ینی اگه فیلدارو پر نکنم اروری بهم نمیده
سلام. وقت بخیر. خسته نباشید.
بابت آموزش مفیدتون از شما متشکرم.
نکته : دوستانی که مثل بنده تمایل دارن فایل اسکریپت ajax-contact-script.js رو به جای پوشه قالب در پوشه پوسته فرزند قرار دهند باید ابتدا کدها رو در فایل فانکشن پوسته فرزند درج کنند و در خط دوم به جای کد
get_template_directory_uri() کد
get_stylesheet_directory_uri() را جایگزین کنند.
* این روش باعث میشه با آپدیت پوسته کدهای شما دست نخورده باقی بمونه و سایت دچار مشکل نشه.
درمورد این آموزش از شما تقاضا دارم :
درخواست اول : امکانش هست فیلد موضوع و شماره تماس به فرم اضافه کنیم و زمانی که ایمیل ارسال میشه موضوع رو برای عنوان ایمیل قرار بدید. و اینکه فیلد شماره تماس و ایمیل الزامی نباشه.
درخواست دوم : محتوایی که برای مدیر سایت ایمیل میشه به صورت چپ چین هست برای راست چین کردن راه حل ارائه می کنید؟
سلام دوست عزیز. کدی در خصوص درخواست های شما آماده میکنم و واستون ارسال میکنم. موفق باشید
سلام
تابع ارسال ایمیل من به صورت زیر هستش همه فیلدها ارسال میشه غیراز موصوع پیام ممنون میشم راهنمایی کنید
function wpschool_ajax_contact(){
$hasError = false;
if(trim($_POST[‘contactName’]) === ”) {
$message = ‘لطفا نام خود را وارد نمایید’;
$hasError = true;
} else {
$name = sanitize_text_field($_POST[‘contactName’]);
}
if(trim($_POST[’email’]) === ”) {
$message = ‘لطفا آدرس ایمیل خود را وارد نمایید.’;
$hasError = true;
} else if (!preg_match(“/^[[:alnum:]][a-z0-9_.-]*@[a-z0-9.-]+\.[a-z]{2,4}$/i”, trim($_POST[’email’]))) {
$message = ‘آدرس ایمیل وارد شده صحیح نمی باشد’;
$hasError = true;
} else {
$email = sanitize_text_field($_POST[’email’]);
}
if(trim($_POST[‘commentsText’]) === ”) {
$message = ‘لطفا پیام خود را وارد نمایید’;
$hasError = true;
} else {
$comments = esc_textarea($_POST[‘commentsText’]);
}
if(isset($_POST[“subject”])) {
foreach($_POST[“subject”] as $widget)
{$subject.= $widget.” ,”;}
}
if(!$hasError) {
$emailTo = get_option(‘admin_email’);
$mailsubject = ‘یک پیغام از طرف ‘.$name;
$body = “نام فرستنده: $name \n\nایمیل نویسنده: $email\n\n موضوع پیام: $subject\n\n پیام: $comments”;
$headers = ‘From: ‘.$name.’ ‘ . “\r\n” . ‘Reply-To: ‘ . $email;
wp_mail($emailTo, $mailsubject,$body, $headers);
$message = __(‘پیام شما با موفقیت ارسال شد، با تشکر از شما’);
}
echo json_encode(array(‘error’=>$hasError, ‘message’=>$message));
die();
}
add_action(‘wp_ajax_wpschool_ajax_contact’, ‘wpschool_ajax_contact’);
add_action(‘wp_ajax_nopriv_wpschool_ajax_contact’, ‘wpschool_ajax_contact’);
حتی به جای اون قسمتی که با for نوشتم این کد را گذاشتم ولی موضوع پیام ارسال نمیشه
$subject=$_POST[‘subject’]
به این صورت پیام میاد
نام فرستنده: جهان
ایمیل نویسنده: jahan@yahoo.com
موضوع پیام:
پیام: salam
سلام بررسی کنید ببینید چرا ایمیل ارسال نیمشه بابا کلافمون کرد انقد باهاش ور رفتیم
gmail و live هم استفاده کردم فایده نداشت، همه روش هایی که گفتید رو امتحان کردم فایده نداشت
کانال تلگرام
عضویت در کانال
سایر مقالات
ورود به مدرسه وردپرس
عضویت در مدرسه وردپرس