Wordpressで動作しないAJAXとの連絡フォーム

Question

私はWordpressのウェブサイトで働いています。私はすべての製品ページに表示されるフォームを作成しようとしています。私は他のサーバで試してみましたが、うまくいきましたが、Wordpressのページに自分のコードを統合するとうまくいきません。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 

 
    <script type="text/javascript"> 
 
     
 
    $(document).ready(function() { 
 
     $("#submit_btn").click(function() { 
 
      
 
    \t  var proceed = true; 
 
      //simple validation at client's end 
 
      //loop through each field and we simply change border color to red for invalid fields \t \t 
 
    \t \t $("#contact_form input[required=true], #contact_form textarea[required=true]").each(function(){ 
 
    \t \t \t $(this).css('border-color',''); 
 
    \t \t \t if(!$.trim($(this).val())){ //if this field is empty 
 
    \t \t \t \t $(this).css('border-color','red'); //change border color to red 
 
    \t \t \t \t proceed = false; //set do not proceed flag 
 
    \t \t \t } 
 
    \t \t \t //check invalid email 
 
    \t \t \t var email_reg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; 
 
    \t \t \t if($(this).attr("type")=="email" && !email_reg.test($.trim($(this).val()))){ 
 
    \t \t \t \t $(this).css('border-color','red'); //change border color to red 
 
    \t \t \t \t proceed = false; //set do not proceed flag \t \t \t \t 
 
    \t \t \t } \t 
 
    \t \t }); 
 
      
 
      if(proceed) //everything looks good! proceed... 
 
      { 
 
    \t \t \t //get input field values data to be sent to server 
 
       post_data = { 
 
    \t \t \t \t 'user_email' \t : $('input[name=email]').val(), 
 
    \t \t \t \t 'phone_number' \t : $('input[name=telefon]').val(), 
 
    \t \t \t }; 
 
       
 
       //Ajax post data to server 
 
       $.post('*the path to php file*', post_data, function(response){ 
 
    \t \t \t \t if(response.type == 'error'){ //load json data from server and output message  
 
    \t \t \t \t \t output = '<div class="error">'+response.text+'</div>'; 
 
    \t \t \t \t }else{ 
 
    \t \t \t \t  output = '<div class="success">'+response.text+'</div>'; 
 
    \t \t \t \t \t //reset values in all input fields 
 
    \t \t \t \t \t $("#contact_form input[required=true], #contact_form textarea[required=true]").val(''); 
 
    \t \t \t \t \t $("#contact_form #contact_body").slideUp(); //hide form after success 
 
    \t \t \t \t } 
 
    \t \t \t \t $("#contact_form #contact_results").hide().html(output).slideDown(); 
 
       }, 'json'); 
 
      } 
 
     }); 
 
     
 
     //reset previously set border colors and hide all message on .keyup() 
 
     $("#contact_form input[required=true], #contact_form textarea[required=true]").keyup(function() { 
 
      $(this).css('border-color',''); 
 
      $("#result").slideUp(); 
 
     }); 
 
    }); \t  \t 
 
    </script>  \t  
 
    \t \t  \t  
 
    <div style="padding-bottom: 15px; border-bottom: 1px solid #999999;" id="contact_form"> 
 
     <div id="contact_results"></div> 
 
     <div id="contact_body"> 
 
      <div style="color:#ff0000; font-size:12px;">Title text</div> 
 
    \t <p> 
 
    \t  <div style="color:#999999; font-size:12px;">Description text</div> 
 
    \t </p> 
 
    \t <label><span>Phone: </span> 
 
       <input type="text" name="telefon" maxlength="15" required="true" placeholder="Phone"/> 
 
      </label> 
 
      <label><span>E-mail: </span> 
 
       <input type="email" name="email" required="true" class="input-field" placeholder="E-mail adress"/> 
 
      </label> 
 
      <label> 
 
       <span>&nbsp;</span><input type="submit" id="submit_btn" value="Order now" /> 
 
      </label> 
 
     </div> 
 
    </div>

とPHPのコードです：私は、変更しようとしているPHPファイルは、「コンテンツ・シングルproduct.php」

私のコードであるので、私はWoocomerceを使用しています

<?php 
 
if($_POST) 
 
{ 
 
\t $to_email \t = "email@email.com"; //Recipient email, Replace with own email here 
 
\t 
 
\t //check if its an ajax request, exit if not 
 
    if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') { 
 
\t \t 
 
\t \t $output = json_encode(array(//create JSON data 
 
\t \t \t 'type'=>'error', 
 
\t \t \t 'text' => 'Sorry Request must be Ajax POST' 
 
\t \t)); 
 
\t \t die($output); //exit script outputting json data 
 
    } 
 
\t 
 
\t //Sanitize input data using PHP filter_var(). 
 
\t $user_email \t \t = filter_var($_POST["user_email"], FILTER_SANITIZE_EMAIL); 
 
\t $phone_number \t = filter_var($_POST["phone_number"], FILTER_SANITIZE_NUMBER_INT); 
 
\t $url \t \t \t = filter_var($_SERVER['HTTP_REFERER']); 
 
\t 
 
\t //additional php validation 
 
\t if(!filter_var($user_email, FILTER_VALIDATE_EMAIL)){ //email validation 
 
\t \t $output = json_encode(array('type'=>'error', 'text' => 'Please enter a valid email!')); 
 
\t \t die($output); 
 
\t } 
 
\t if(!filter_var($phone_number, FILTER_SANITIZE_NUMBER_FLOAT)){ //check for valid numbers in phone number field 
 
\t \t $output = json_encode(array('type'=>'error', 'text' => 'Enter only digits in phone number')); 
 
\t \t die($output); 
 
\t } 
 
\t 
 
\t //email body 
 
\t $subject = "Client nou ! - Telefon: ". $phone_number; 
 
\t $message_body = "\r\nNumar de telefon : ". $phone_number."\r\nClientul este interesat de urmatorul produs : ". $url; 
 
\t 
 
\t //proceed with PHP email. 
 
\t $headers = 'From: '.$user_email.'' . "\r\n" . 
 
\t 'X-Mailer: PHP/' . phpversion(); 
 
\t 
 
\t $send_mail = mail($to_email, $subject, $message_body, $headers); 
 
\t 
 
\t if(!$send_mail) 
 
\t { 
 
\t \t //If mail couldn't be sent output error. Check your PHP email configuration (if it ever happens) 
 
\t \t $output = json_encode(array('type'=>'error', 'text' => 'Could not send mail! Please check your PHP mail configuration.')); 
 
\t \t die($output); 
 
\t }else{ 
 
\t \t $output = json_encode(array('type'=>'message', 'text' => '<div style="color:#999999; font-size:12px;">The order was sent. In few moments we will contact you at the phone number <strong>'.$phone_number .'</strong>!</div>')); 
 
\t \t die($output); 
 
\t } 
 
} 
 
?>

私はWordpressであまり経験がありません。私は何とかそれを適応させなければならないと思います。それは実際に私の質問です。ありがとうございました ！

Answer 1

私はあなたがこのために探していると思う：あなたのコードで https://codex.wordpress.org/AJAX_in_Plugins

アクションPOSTデータを追加する必要があります。

post_data = { 
    'user_email' : $('input[name=email]').val(), 
    'phone_number' : $('input[name=telefon]').val(), 
    'action' : 'my_custom_send_mail', 
    'nonce' : '<?php wp_create_nonce('mycustom_mail_form_nonce'); ?>' 
}; 

代わりにあなたが<?php echo admin_url('admin-ajax.php'); ?>を呼び出す必要があり*the path to php file*の。

は、その後のfunctions.phpや私-plugin.phpであなたは、関数を呼び出すことができます。

add_action('wp_ajax_my_custom_send_mail', 'my_custom_send_mail_callback'); 
add_action('wp_ajax_nopriv_my_custom_send_mail', 'my_custom_send_mail_callback'); 

function my_custom_send_mail_callback(){ 

    if(!check_ajax_referer('mycustom_mail_form_nonce', 'nonce')){ 
    $output = json_encode(array('type'=>'error', 'text' => 'Something went wrong!')); 
    die($output); 
    } 

    $to_email  = "email@email.com"; 
    $user_email = sanitize_email($_POST["user_email"]); 
    $phone_number = filter_var($_POST["phone_number"], FILTER_SANITIZE_NUMBER_INT); 

    if(!is_email($user_email)){ 
    $output = json_encode(array('type'=>'error', 'text' => 'Please enter a valid email!')); 
    die($output); 
    } 
    if(!filter_var($phone_number, FILTER_SANITIZE_NUMBER_FLOAT)){ //check for valid numbers in phone number field 
    $output = json_encode(array('type'=>'error', 'text' => 'Enter only digits in phone number')); 
    die($output); 
    } 

    //email body 
    $subject = "Client nou ! - Telefon: ". $phone_number; 
    $message_body = "\r\nNumar de telefon : ". $phone_number."\r\nClientul este interesat de urmatorul produs : ". $url; 

    //proceed with PHP email. 
    $headers = 'From: '.$user_email.'' . "\r\n" . 
    'X-Mailer: PHP/' . phpversion(); 

    $send_mail = wp_mail($to_email, $subject, $message_body, $headers); 

    if(!$send_mail){ 
    $output = json_encode(array('type'=>'error', 'text' => 'Could not send mail! Please check your PHP mail configuration.')); 
    die($output); 
    }else{ 
    $output = json_encode(array('type'=>'message', 'text' => '<div style="color:#999999; font-size:12px;">The order was sent. In few moments we will contact you at the phone number <strong>'.$phone_number .'</strong>!</div>')); 
    die($output); 
    } 
}