Mẫu đăng nhập ajax tùy chỉnh WordPress
|
Một giải pháp hay cho biểu mẫu đăng nhập WordPress Ajax tùy chỉnh mà không cần sử dụng plugin Đặt cái này ở bất cứ đâu bạn muốn biểu mẫu hiển thị trong mẫu WordPress của mình Gửi thông tin người dùng qua Ajax Đặt 2 đoạn mã sau vào chức năng của bạn. tập tin php Và điều này… Sau đó đặt cái này vào tệp javascript tùy chỉnh của bạn… Đó là nó Nguồn. Natko Hasic jQuery, Wordpress, Hàm Wordpress, Thủ thuật WordPress Chúng tôi có thể triển khai Đăng nhập và Đăng ký AJAX của WordPress mà không cần Plugin. Hướng dẫn này sẽ giúp bạn thực hiện đúng cách với một số tính năng bổ sung, bao gồm
Cập nhật (12/01/2015). Tôi đã viết một bài để thêm Quên mật khẩu với chức năng AJAX trong mã & các bước được đề cập tại đây. Hãy xem qua hướng dẫn đó và tải xuống các tệp được cải thiện ở đó sau khi đọc bài đăng này Vì vậy, hãy làm điều đó đúng… Khái niệmCó một số cách để thực hiện đăng nhập hoặc đăng ký trên trang web của bạn. Bạn có thể tạo các Trang riêng biệt có tên là
Hình thứcChúng tôi đã tạo cả hai biểu mẫu trong một tệp riêng biệt có tên là Biểu mẫu đăng nhập và đăng ký AJAX 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
<form id = "đăng nhập" class="ajax-auth" action="login" method="post"> <h3>Mới to site? <a id="pop_signup" href="">Create an Account</a></h3> <giờ / > <h1>Đăng nhập</h1> <p lớp = "status"></p> ?php wp_nonce_field('ajax-login, 'security'); ?> <nhãn cho = "username">Username</label> <đầu vào id = "username" type="text" class="required" name="username"> <nhãn cho = "password">Password</label> <đầu vào id = "password" type="password" class="required" name="password"> <a lớp = "text-link" href=" echo wp_lostpassword_url(); ?>">Lost password?</a> <đầu vào lớp = "submit_button" type="submit" value="LOGIN"> <a lớp = "đóng" href="">(close)</a> < / biểu mẫu>
<biểu mẫu id = "đăng ký" class="ajax-auth" action="register" method="post"> <h3>Đã có an account? <a id="pop_login" href="">Login</a></h3> <giờ / > <h1>Đăng ký</h1> <p lớp = "status"></p> ?php wp_nonce_field('ajax-register, 'signonsecurity'); ?> <nhãn cho = "signonname">Username</label> <đầu vào id = "signonname" type="text" name="signonname" class="required"> <nhãn cho = "email">Email</label> <đầu vào id = "email" type="text" class="required email" name="email"> <nhãn cho = "signonpassword">Password</label> <đầu vào id = "signonpassword" type="password" class="required" name="signonpassword" > <nhãn cho = "password2">Confirm Password</label> <đầu vào loại = "password" id="password2" class="required" name="password2"> <đầu vào lớp = "submit_button" type="submit" value="SIGNUP"> <a lớp = "close" href="">(close)</a> < / biểu mẫu> Hàm Chúng tôi cũng cần các nút đăng nhập và đăng ký, vì vậy hãy đặt bất cứ nơi nào bạn muốn Nút đăng nhập và đăng ký 0 1 2 3 4 5 6
if(is_user_logged_in( if (is_user_logged_in()) { ?> <a href = " echo wp_logout_url( home_url() ); ?>">Logout</a> }else{get_template_part } else { get_template_part('ajax', 'auth'); ?> <a lớp = "login_button" id="show_login" href="">Login</a> <a lớp = "login_button" id="show_signup" href="">Signup</a> Tạo kiểu cho các hộpĐây là CSS bắt buộc mà bạn phải đặt bên trong một tệp mới có tên là AJAX Đăng nhập và Đăng ký CSS 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140
biểu mẫu. ajax - auth{ hiển thị. không; z - chỉ mục. 999; vị trí. đã sửa; top. 150px; trái. 50%; chiều rộng. 350px; lề - trái. - 200px; phần đệm. 40px 25px 25px 25px; nền - màu. #FFFFFF; đường viền - bán kính. 8px; phông chữ - gia đình. Arial, Helvetica, sans-serif; hộp - bóng. 0 0 6px rgba( . 20, 0, 0, 0.2); màu. #878787; phông chữ - kích thước. 11px; }
.ajax - auth h1, . .ajax - auth h3{ phông chữ - gia đình. 'Georgia', 'Times New Roman', Times, serif; phông chữ - trọng lượng. 100; màu. #333333; đường - chiều cao. 1; }
.ajax - auth h1{ phông chữ - kích thước. 27px; văn bản - căn chỉnh. trung tâm; lợi nhuận. 0 0 20px 0; }
.ajax - auth h3{ phông chữ - kích thước. 18px; văn bản - căn chỉnh. trái; lợi nhuận. 0; }
.ajax - auth h3 a{ màu. #e25c4c; }
.ajax - auth hr { nền - màu. rgba(0, 0 . 1, 0, 0.1); đường viền. 0 không có; chiều cao. 1px; lợi nhuận. 20px 0; }
.ajax - auth đầu vào# .ajax - auth đầu vào# .ajax - auth đầu vào# .ajax - auth đầu vào# .ajax - auth đầu vào# .ajax - auth đầu vào# đường viền. 1px rắn #EDEDED; đường viền - bán kính. 3px 3px 3px 3px; hộp - bóng. 0 0 3px rgba( . 10, 0, 0, 0.1) inset; màu. #333333; phông chữ - kích thước. 15px; phần đệm. 10px 10px 10px 13px; chiều rộng. 325px; lợi nhuận. 7px 0 20px 0; nền - màu. #F9F9F9; phông chữ - gia đình. 'Georgia', 'Times New Roman', Times, serif; }
.ajax - auth đầu vào# . tập trung, .ajax - auth đầu vào# . tập trung, .ajax - auth đầu vào# . tập trung, .ajax - auth đầu vào# . tập trung, .ajax - auth đầu vào# . tập trung, .ajax - auth đầu vào# . tiêu điểm{ nền - màu. #FFF; }
.ajax - auth nhãn. lỗi{ hiển thị. không có . quan trọng; }
.ajax - auth đầu vào. lỗi{ đường viền. 1px rắn #FF0000. quan trọng; }
.ajax - auth đầu vào. submit_button{ phông chữ - kích thước. 13px; màu. #FFF; đường viền. 1px rắn #b34336; nền - màu. #e25c4c; đường viền - bán kính. 3px; văn bản - bóng. 0 1px 0 #ba3f31; phần đệm. 9px 31px 9px 31px; nền. - moz - tuyến tính - gradient(top, #ea6656, #df5949); đường viền - đầu. 1px rắn #bb483a; đường viền - đáy. 1px rắn #a63b2e; thả nổi. đúng; hộp - bóng. 0 1px 0 #E87A6E inet; }
.ajax - auth a{ văn bản - trang trí. không; }
.ajax - auth a. đóng{ màu. #DCDCCDC; vị trí. tuyệt đối; đúng. 15px; top. 15px; }
.ajax - auth a. văn bản - liên kết{ màu. #B4B2B2; thả nổi. trái; lợi nhuận. 10px 0 0 0; }
.ajax - auth p. trạng thái{ văn bản - căn chỉnh. trung tâm; lợi nhuận. - 15px 0 20px 0; phông chữ - trọng lượng. 600; hiển thị. không; }
a. nút đăng nhập{ phông chữ - gia đình. Arial, Helvetica, sans-serif; phần đệm. 5px 7px 5px 7px; nền - màu. #FFF; đường viền - bán kính. 3px; đường viền. 1px rắn #DCDCDC; màu. #333; văn bản - trang trí. không; phông chữ - kích thước. 11px; }
.login_overlay{ chiều cao. 100%; chiều rộng. 100%; nền - màu. #F6F6F6; độ mờ. 0. 9; vị trí. đã sửa; z - chỉ mục. 998; } Gửi thông tin người dùng qua AJAXPhần tiếp theo là các nút “đăng nhập” và “đăng ký” hiển thị biểu mẫu của chúng ta, xác thực và gửi dữ liệu biểu mẫu bằng AJAX đến hàm (mà chúng ta sẽ xác định trong bước tiếp theo và bước cuối cùng) Chúng tôi đang sử dụng Ngoài ra, hãy tạo một tệp có tên Hiển thị, xác thực và gửi thông tin người dùng 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83
jQuery(tài liệu). sẵn sàng(chức năng ($) { // Hiển thị biểu mẫu từ liên kết bên trong cửa sổ bật lên $('#pop_login, #pop_signup').trực tiếp('click', function (e) { formToFadeOut = $('form#register'); formto FadeIn = $('form#login'); nếu ($(this).attr('id') == 'pop_signup') { formToFadeOut = $('form#login'); formtoFadeIn = $('form#register'); } formToFadeOut. mờ dần(500, hàm () { formtoFadeIn. mờ dần(); }) trả về false; });
// Đóng quảng cáo $(tài liệu).bật('nhấp chuột', '.login_overlay, .close', chức năng () { $('form#login, form#register').mờ dần(500, hàm () { $('. login_overlay'). xóa(); }); trả về false; });
// Hiển thị cửa sổ bật lên đăng nhập/đăng ký khi nhấp chuột $('#show_login, #show_signup' . .bật('nhấp chuột', function (e) { $('body').thêm vào trước('''''''''''''''''); nếu ($(this).attr('id') == 'show_login') $('form#login'). mờ dần(500); khác $('form#register'). mờ dần(500); e. ngăn chặn Mặc định(); });
// Thực hiện đăng nhập/đăng ký AJAX khi gửi biểu mẫu $('form#login, form#register').on('submit', function (e) { nếu (. $(cái này). hợp lệ()) return false; $('p. trạng thái', này). hiển thị(). văn bản(ajax_auth_object. đang tải thư); hành động = 'ajaxlogin'; tên người dùng = $('form#login # . ).val(); mật khẩu = $('form#login # . ).val(); email = ''; bảo mật = $('form#login # . ).val(); if ($(this).attr('id') == 'register') { hành động = 'ajaxregister'; tên người dùng = $('#signonname'< . ).val(); mật khẩu = $('#signonpassword'< . ).val(); email = $('#email').val(); bảo mật = $('#signonsecurity').val(); } ctrl = $(này); $. ajax({ loại. 'POST', Loại dữ liệu. 'json', url. ajax_auth_object. ajaxurl, dữ liệu. { 'hành động'. hành động, 'tên người dùng'. tên người dùng, 'mật khẩu'. mật khẩu, 'email'. email, 'bảo mật'. bảo mật }, thành công. chức năng (dữ liệu) { $('p. status', ctrl). văn bản(dữ liệu. thông báo); nếu (dữ liệu. đã đăng nhập == true) { tài liệu. vị trí. href = ajax_auth_object. chuyển hướng; } } }); e. ngăn chặn Mặc định(); }); // Xác thực biểu mẫu phía máy khách if (jQuery("#register").độ dài) jQuery("#register"). xác thực( { quy tắc. { mật khẩu2. { bằng. '#signonpassword' } }} ); else if (jQuery("#login").độ dài) jQuery("#login"). xác thực(); }); Xử lý yêu cầu AJAXTrên cơ sở dữ liệu nhận được, chúng tôi phải thông báo cho người dùng rằng đăng nhập/đăng ký đã thành công và thực hiện đăng nhập hoặc chỉ thông báo cho anh ta rằng dữ liệu của anh ta không chính xác Đầu tiên, tôi tạo một thư mục mới WordPress AJAX Đăng nhập và Đăng ký mà không cần Plugin 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86
<?php hàm ajax_auth_init(){ wp_register_style( 'ajax-auth-style', get_template_directory_uri() . '/css/ajax-auth-style. css' ); wp_enqueue_style('ajax-auth-style'); wp_register_script('validate-script', get_template_directory_uri . () . '/js/jquery. xác thực. js', mảng('jquery') ); wp_enqueue_script('validate-script')<;
wp_register_script('ajax-auth-script' . get_template_directory_uri() . '/js/ajax-auth-script. js', mảng('jquery') ); wp_enqueue_script('ajax-auth-script');
wp_localize_script( 'ajax-auth-script', 'ajax_auth_object', array( 'ajaxurl' = > admin_url( 'admin-ajax.php' ), 'redirecturl' = > home_url(), 'đang tải thông báo' = > __('Sending user info, please wait...') ));
// Cho phép người dùng không có đặc quyền chạy ajax_login() trong AJAX add_action( 'wp_ajax_nopriv_ajaxlogin', 'ajax_login' ); // Cho phép người dùng không có đặc quyền chạy ajax_register() trong AJAX add_action( 'wp_ajax_nopriv_ajaxregister', 'ajax_register' ); }
// Chỉ thực hiện hành động nếu người dùng chưa đăng nhập nếu (. is_user_logged_in()) { add_action('init', 'ajax_auth_init'); }
function ajax_login(){
// Trước tiên hãy kiểm tra nonce, nếu không thành công, chức năng sẽ bị hỏng check_ajax_referer( 'ajax-login-nonce', 'security' );
// Đã chọn nonce, lấy dữ liệu POST và đăng nhập người dùng // Gọi auth_user_login auth_user_login($_POST['username'], $_POST['password'], 'Login'); chết(); }
function ajax_register(){
// Trước tiên hãy kiểm tra nonce, nếu không thành công, chức năng sẽ bị hỏng check_ajax_referer( 'ajax-register-nonce', 'security' ); // Đã chọn nonce, lấy dữ liệu POST và đăng nhập người dùng $thông tin = mảng(); $thông tin['user_nicename'] = $info['nickname'] = $info['display_name'] = $info['first_name'] = $info['user_login'] = sanitize_user($_POST['username']) ; $thông tin['user_pass'] = sanitize_text_field($_POST['password']); $thông tin['user_email'] = sanitize_email( $_POST['email']); // Đăng ký người dùng $user_register = wp_insert_user( $info ); if ( is_wp_error($user_register) ){ $lỗi = $user_register->get_error_codes() ; if(in_array('empty_user_login', $error)) echo json_encode(mảng('loggedin'=>false, 'message'=>__($user_register->get_error_message('empty_user_login')))); elseif(in_array('current_user_login',$error)) echo json_encode(mảng('loggedin'=>false, 'message'=>__('This username is already registered.'))); elseif(in_array('current_user_email',$error)) echo json_encode(mảng('loggedin'=>false, 'message'=>__('This email address is already registered.'))); } else { auth_user_login($thông tin['nickname'], $info['user_pass'], 'Registration'); }
chết(); }
function auth_user_login($user_login, $password, $login) { $thông tin = mảng(); $thông tin['user_login'] = $user_login; $thông tin['user_password'] = $password; $thông tin['nhớ'] = true; $user_signon = wp_signon( $info, '' ); // From false to '' since v4.9 if ( is_wp_error($user_signon) ){ echo json_encode(mảng('loggedin'=>false, 'message'=>__('Wrong username or password.'))); } else { wp_set_current_user($user_signon - >ID); echo json_encode(mảng('loggedin'=>true, 'message'=>__($login.' thành công, chuyển hướng. '))); } chết(); } Mở các chức năng. php của chủ đề của bạn và đặt dòng ở đó Thêm chức năng 0 1
require_once( get_template_directory() . '/libs/custom-ajax-auth. php' ); Lưu ý về chủ đề cha/con. Nếu bạn đang triển khai tính năng Đăng nhập và Đăng ký AJAX trong một chủ đề con thì hãy thay thế cả 3 lần xuất hiện của hàm get_template_directory_uri() bằng get_stylesheet_directory_uri() trong custom-ajax-auth. php (Dòng #3, #6 và #9) Tương tự, thay đổi hàm get_template_directory() bằng get_stylesheet_directory() bên trong require_once(). Tuy nhiên, việc thay thế các chức năng này trong chủ đề gốc sẽ không ảnh hưởng đến hoạt động theo bất kỳ cách nào. Nhưng việc triển khai trong một chủ đề con phải cần những sự thay thế này Hàm ajax_auth_init() Chúng tôi đã đăng ký và xử lý tệp CSS và JS cần thiết tại đây và tạo một đối tượng JS có tên là Móc WordPress Phần còn lại của các chức năng là tự giải thích. Họ thu thập dữ liệu nhận được từ phương thức POST, kiểm tra xem nonce có hợp lệ không và sau đó cố gắng thực hiện đăng ký người dùng và/hoặc đăng nhập bằng dữ liệu nhận được Xin chúc mừng. Bạn có các biểu mẫu đăng nhập và đăng ký AJAX đẹp mắt ngay bây giờ, được hỗ trợ bởi xác thực jQuery. Bạn có thể thực hiện Đăng nhập và Đăng ký AJAX WordPress mà không cần Plugin ngay bây giờ Cập nhật (12/01/2015). Tôi đã viết một bài để thêm Quên mật khẩu với chức năng AJAX trong mã & các bước được đề cập tại đây. Hãy xem qua hướng dẫn đó và tải xuống các tệp được cải thiện ở đó sau khi đọc bài đăng này
bao gồm. kiểu ajax-auth. cssjquery. xác thực. js, ajax-auth-script. js, ajax-auth. php, tùy chỉnh-ajax-auth. php |
