Cách tạo Form đăng ký, lưu dữ liệu trong WordPress bằng Ajax

Nhúng file này vào functions.php

require_once('course/course-init.php');

1. Nội dung file course-init.php

<?php
add_action( 'admin_init', 'flush_rewrite_rules' );
add_action( 'init', 'wpshare247_register_posttype' );
function wpshare247_register_posttype(){
    $posttype = 'wpshare247-course'; // dùng để query
    $posttype_slug = 'khoa-hoc'; // http://tenmien.com/dich-vu/ten-dich-vu-1
    $args = array(
              'labels' => array(
                            'name' => __( 'Đăng ký khóa học', 'twentyseventeen' ),
                            'singular_name' => __( 'Đăng ký khóa học' ),
                            'add_new' => __( 'Thêm mới', 'twentyseventeen' )
                          ),
              'public' => true, // true là cho phép query, tìm kiếm, hiển thị trong menu
              'publicly_queryable' => true, // true có tạo đường dẫn, http://tenmien.com/dich-vu/ten-dich-vu-1
              'show_ui' => true, // true cho phép hiển thị trong menu admin, menu top admin
              'show_in_menu' => true, // cho phép post type này hiển thị trong admin menu nào đó
              'capability_type' => 'post', // kế thừa phân quyền từ post hoặc page....
              'rewrite' => array( 'slug' => $posttype_slug ), 
              'menu_icon'=>'dashicons-images-alt2',
              'supports' => array('title','editor', 'thumbnail') //'title', 'editor', 'comments', 'revisions', 'trackbacks', 'author', 'excerpt', 'page-attributes', 'thumbnail', 'custom-fields', and 'post-formats'
            );

    register_post_type( $posttype, $args);
}

//Xử lý ajax---------------
function wpshare247_course_register_display(){  
    $arr_response = array();
    
    //_REQUEST - 1 => Nhận dữ liệu từ Ajax Javascript
    $name = $_REQUEST['name'];
    $phone = $_REQUEST['phone'];
    $email = $_REQUEST['email'];
    $description = $_REQUEST['description'];

    //_ACTION - 2 => Xử lý tại đây
    $post_content = '';
    $post_content .= '<b>Thông tin đăng ký</b><br/>';
    $post_content .= 'Họ tên: '.$name.'<br/>';
    $post_content .= 'Điện thoại: '.$phone.'<br/>';
    $post_content .= 'Email: '.$email.'<br/>';
    $post_content .= 'Nội dung: '.$description.'<br/>';

    $my_post = array(
    	'post_type' => 'wpshare247-course',
    	'post_title' => wp_strip_all_tags( $name ),
    	'post_content' => $post_content,
    	'post_status' => 'publish',
    	'post_author'   => get_current_user_id()
    );
    $post_id = wp_insert_post( $my_post);

    //Send email
    if($email && $post_id){
    	$admin_email = 'email-gui@wpshare247.com';
    	$headers[] = "Content-Type: text/html; charset=utf-8\r\n";
        $headers[] = "From: " . $admin_email . " <" . $admin_email . ">\r\n";
    	$subject = $name . ' đã đăng ký khóa học với số điện thoại: '.$phone;	

    	$email_content  = $post_content;

    	$is_sent = wp_mail(trim($email), $subject, $email_content, $headers, "");
    }
    

    //_RESPONSE - 3 => Trả kết quả về cho Ajax Javascript

    
    $arr_response = array(
                            'myid' => $post_id
                        );
    wp_send_json($arr_response);
    die();
    
}
add_action( 'wp_ajax_wpshare247_course_register', 'wpshare247_course_register_display' );
add_action('wp_ajax_nopriv_wpshare247_course_register', 'wpshare247_course_register_display');

2. Nội dung page-course.php

<?php
/* Template Name: Khóa học */
get_header(); ?>

<section id="wpshare247-page">
    <div class="container">
    	<div class="page-content" style="padding-top:30px;">
    		<?php 
    		while ( have_posts() ) : the_post();
    			?>
    			<div id="course-content">
    				<h1><?php the_title(); ?></h1>

    				<div class="entry-content"><?php the_content(); ?></div>

    				<form id="course-form">
    					<div class="f-group">
                           <div id="notify" style="color:red;"></div>
                       </div>

    					<div class="f-group">
                           <input type="text" name="full-name" placeholder="Họ và tên" class="wpshare-text reset-data">
                       </div>

                       <div class="f-group">
                           <input type="tel" name="phone" placeholder="Điện thoại" class="wpshare-text reset-data">
                       </div>

                       <div class="f-group">
                           <input type="email" name="email" placeholder="email" class="wpshare-text reset-data">
                       </div>

                       <div class="f-group">
                           <textarea name="description" placeholder="Nội dung" class="wpshare-description reset-data"></textarea>
                       </div>

                       <div class="f-group">
                            <button id="register" type="button" class="btn button">Đăng ký <img style="display:none;" height="30" width="30" class="loading" src="<?php echo get_stylesheet_directory_uri(); ?>/course/loading.svg"></button>
                       </div>
    				</form>
    			</div>
    			<?php
    		endwhile; // End of the loop.
    		?>
    	</div>
    </div>
 </section>

 <script type="text/javascript">

 	var wpshare247_ajax_url = '<?php echo admin_url( 'admin-ajax.php' ); ?>';

 	jQuery(document).ready(function($) {
 		jQuery("#course-form #register").click(function(event) {
 			//console.log('vào đây.....');

 			var err = 0;

 			var name = jQuery("#course-form").find('[name=full-name]').val();
 			if(name==''){
 				err++;
 				jQuery("#course-form").find('[name=full-name]').focus();
 				return false;
 			}

 			var phone = jQuery("#course-form").find('[name=phone]').val();
 			if(phone.length < 10){
 				err++;
 				jQuery("#course-form").find('[name=phone]').focus();
 				return false;
 			}

 			var email = jQuery("#course-form").find('[name=email]').val();

 			var description = jQuery("#course-form").find('[name=description]').val();

 			if(err==0){
 				jQuery("#course-form").find('.loading').show();

 				jQuery.ajax({
                    url: wpshare247_ajax_url,
                    type: 'POST',
                    data:  {
                                action: "wpshare247_course_register",
                                name : name,
                                phone : phone,
                                email : email,
                                description : description

                            },
                    dataType: 'json',
                    success: function(data, textStatus, jqXHR){ 

                        var post_id = data.myid;
                        if(post_id >0){
                        	jQuery("#course-form").find('.reset-data').val('');
                        	jQuery("#course-form").find('#notify').html('Đã đăng ký thành công, vui lòng chờ liên hệ');
                        }
                        
                        jQuery("#course-form").find('.loading').hide();

                        //console.log(post_id);
                    },
                    error: function(jqXHR, textStatus, errorThrown){
                    
                    }          
                });
 			}

 			return false;
 		});
 	});
 </script>

<?php get_footer();