1

موضوع: ساخت صفحه ارتباط با ما بدون افزونه در وردپرس

برای شروع یه فایل به نام contact-page.php ایجاد کنید

کد زیر فایل ایجاد شده را در بخش برگه ها می آورد:

<?php
/*
Template Name: ارتباط با ما
*/
?>

۱.ساخت فرم

کد زیر را در فایل contact-page.php اضافه کنید:

<article>
                      <form id="contactForm">
                          <fieldset>
                              <legend class="text-center">Contact us</legend>
                              <div class="form-group col-md-12">
                                  <label for="contactName">نام شما:</label>
                                <input type="text" class="form-control" name="contactName" id="contactName" value="" />
                            </div>
                            <div class="form-group col-md-12">
                                <label for="email">ایمیل شما:</label>
                                <input type="text" class="form-control" name="email" id="email" value="" />
                            </div>
                            <div class="form-group col-md-12">
                                <label for="commentsText">پیام:</label>
                                <textarea class="form-control" name="commentsText" id="commentsText" rows="7" cols="30"></textarea>
                            </div>
                            <div class="text-center">
                                <input type="submit" class="btn btn-primary btn-sm" value="ارسال ایمیل"></input>
                                <p id="status"></p>
                            </div>
                            <input type="hidden" name="submitted" id="submitted" value="ارسال ایمیل" />
                          </fieldset>
                      </form>
                  </article>

۲.درج کدهای پردازش فرم

کدهای زیر را به فایل 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');

توجه: بجای your-domain نام دامین وب سایت خود را در کد وارد کنید.

۳. ساخت فایل اسکریپت

فایل اسکریپت ajax-contact-script.js ایجاد کنید و کد زیر را اضافه کنید:

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){
                debugger;
                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");
                }
                $('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

استایل مربوط به بخش اعلامیه در فایل style.css اضافه کنید:

.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 گذاشته از قسمت قالب “ارتباط با ما” را انتخاب کرده و ذخیره می کنیم:

http://wpschool.ir/wp-content/uploads/2014/01/contact-us-wordpress.jpg

وقتی برگه contact-us را باز می کنید با تصویر زیر روبرو خواهید شد:

http://s9.picofile.com/file/8321812184/USBcode.png

توجه: به دلیل استفاده اکثر وب سایت ها از هاست های اشتراکی ایمیل های ارسالی به پوشه اسپم (Spam) وارد می شوند، هنگام تست حتما پوشه اسپم را چک کنید.

لینک : http://yon.ir/k5eLX

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

پک کوین رایگان : http://yon.ir/MeYd8