ساخت صفحه تماس با ما بدون استفاده از افزونه

ساخت صفحه تماس با ما بدون استفاده از افزونه

شاید اولین کار بعد از اینکه سایت وردپرسی خودتون رو طراحی و ایجاد کردید,انجام بدید این باشه که صفحات مختلفی مثله صفحه اصلی,محصولات,گالری,درباره ما و تماس باو….را ایجاد کنید و محتویات هر کدوم رو هم درونش قرار بدید.مثلا در صفحهء تماس با ما ازیک فرم تماس با ما استفاده کنید که کاربر با پر کردن قسمت های مختلف فرم با شما و سایتتون ارتباط بر قرار کنه!به احتمال زیاد  هم  از یکی از هزاران افزونه ای که در وردپرس برای همین کار تعبیه شده استفاده میکنید.اما ما در این آموزش میخواهیم به شما نحوهء ایجاد یک فرم تماس با ما را بدون استفاده از افزونه توضیح دهیم.پس خودتون رو برای تایپ چند خط کد آماده کنید.

ساخت صفحه  تماس با ما بدون استفاده از افزونه

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

مرحله اول: ساخت فایل contact-page.php

در قرم اول بایید شما یک فایل  php جدید برای صفحه ارتباط با ما ایجاد کنید.اسم این صفحه به سلیقهء شما هرچیزی میتواند باشد.اما ما اسم این فایل را contact-page.php انتخاب میکنیم.بعد از اینکار کد زیر را در آن تایپ کنید:

<?php
/*
Template Name: نام قالب
*/
?>

همیطور که مشخصه کده بالا نام قالب را مشخص میکند.

سپس باید چهارچوب و قالبندی  صفحهء تماس با ما خودتون رو مشخص کنید.که روش کاره ما به این صورته:

<?php get_header() ?>
 
 <div id="container">
 <div id="content">
 <?php the_post() ?>
 <div id="post-<?php the_ID() ?>">
 <div>
 </div><!-- .entry-content ->
 </div><!-- .post-->
 </div><!-- #content -->
 </div><!-- #container -->
 
<?php get_sidebar() ?>
<?php get_footer() ?>

مرحله دوم: ساخت فرم

در این مرحله هم باید چهار چوب و قالبندی فرم تماس با ما را طراحی کنید.در این آموزش یک فرم ساده  که در فایل contact-page.php و داخل div که مربوط به محتوا هست را قرار دهید.
به عنوان مثال:

<?php get_header(); ?>
 <div id="container">
 <div id="content">
 
 <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
 <div <?php post_class() ?> id="post-<?php the_ID(); ?>">
 <h1><?php the_title(); ?></h1>
 <div>
 <?php if(isset($emailSent) && $emailSent == true) { ?>
 <div>
 <p>با تشکر، ایمیل شما با موفقیت ارسال شد</p>
 </div>
 <?php } else { ?>
 <?php the_content(); ?>
 <?php if(isset($hasError) || isset($captchaError)) { ?>
 <p>متاسفم، خطایی رخ داده است لطفا مجددا سعی نمایید<p>
 <?php } ?>
 
 <form action="<?php the_permalink(); ?>" id="contactForm" method="post">
 <ul>
 <li>
 <label for="contactName">نام شما:</label>
 <input type="text" name="contactName" id="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" />
 <?php if($nameError != '') { ?>
 <span><?=$nameError;?></span>
 <?php } ?>
 </li>
 
 <li>
 <label for="email">ایمیل شما:</label>
 <input type="text" name="email" id="email" value="<?php if(isset($_POST['email'])) echo $_POST['email'];?>" />
 <?php if($emailError != '') { ?>
 <span><?=$emailError;?></span>
 <?php } ?>
 </li>
 
 <li><label for="commentsText">پیغام:</label>
 <textarea name="comments" id="commentsText" rows="20" cols="30"><?php if(isset($_POST['comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['comments']); } else { echo $_POST['comments']; } } ?></textarea>
 <?php if($commentError != '') { ?>
 <span><?=$commentError;?></span>
 <?php } ?>
 </li>
 
 <li>
 <input type="submit" value="ارسال ایمیل"></input>
 </li>
 </ul>
 <input type="hidden" name="submitted" id="submitted" value="ارسال ایمیل" />
 </form>
 <?php } ?>
 </div><!-- .entry-content -->
 </div><!-- .post -->
 
 <?php endwhile; endif; ?>
 </div><!-- #content -->
 </div><!-- #container -->
 
<?php get_sidebar(); ?>
<?php get_footer(); ?>

مرحله دوم:درج کدهای پردازش

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

برای این کار کد زیر را قبل از <?php get_header(); ?> قرار دهید:

<?php
/*فرم تماس با ما
*/
?>
 
<?php
if(isset($_POST['submitted'])) {
 if(trim($_POST['contactName']) === '') {
 $nameError = 'لطفا نام خود را وارد نمایید';
 $hasError = true;
 } else {
 $name = trim($_POST['contactName']);
 }
 
 if(trim($_POST['email']) === '') {
 $emailError = 'لطفا آدرس ایمیل خود را وارد نمایید.';
 $hasError = true;
 } else if (!preg_match("/^[[:alnum:]][a-z0-9_.-]*@[a-z0-9.-]+\.[a-z]{2,4}$/i", trim($_POST['email']))) {
 $emailError = 'آدرس ایمیل وارد شده صحیح نمی باشد';
 $hasError = true;
 } else {
 $email = trim($_POST['email']);
 }
 
 if(trim($_POST['comments']) === '') {
 $commentError = 'لطفا پیغام خود را وارد نمایید';
 $hasError = true;
 } else {
 if(function_exists('stripslashes')) {
 $comments = stripslashes(trim($_POST['comments']));
 } else {
 $comments = trim($_POST['comments']);
 }
 }
 
 if(!isset($hasError)) {
 $emailTo = get_option('tz_email');
 if (!isset($emailTo) || ($emailTo == '') ){
 $emailTo = get_option('admin_email');
 }
 $subject = 'یک پیغام از طرف '.$name;
 $body = "نام فرستنده: $name \n\nایمیل نویسنده: $email \n\nپیغام: $comments";
 $headers = 'From: '.$name.' <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;
 
 wp_mail($emailTo, $subject, $body, $headers);
 $emailSent = true;
 }
 
} ?>

دوستان و همراهان همیشگی وردپرس داغ این آموزش هم از سری آموزش وردپرس به پایان رسید.هدف ما اینه که به شما بگوییم که برای هر کاری که در سایتتتان میخواهید انجام دهید و یا هر امکانی را اضافه کنید لازم نیست که از افزونه ها استفاده کنید.میتوانید کمی هم برنامه نویسی کنید.:) مطمعن باشید که خوشتون میاد.

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

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