Với mục đích chính của blog của mình ngay từ đầu tạo ra là để ghi nhớ lại những gì mà mình đã làm liên quan tới WordPress và cũng để chia sẻ tới tất cả các bạn quan tâm đến chủ đề mình viết do vậy trong lần này mình sẽ tập chung vào việc hướng dẫn các bạn
học wordpress làm thế nào tạo một form đăng ký, đăng nhập, reset, lost password và bên trong đó là cách xử lý với các form đó nữa.
Form đăng nhập mặc định của wp
Đúng , Wordpress đã có gần như tất cả những cái mặc định cho người dùng cần rồi tuy nhiên với những theme chuyên biệt bạn cần phải tạo ra một form đăng nhập cho user của mình vào website chẳng hạn mà không bằng trang đăng nhập mặc định: wp-admin. Khi đó, Bạn sẽ bắt đầu giống mình, sẽ đi tìm cách giải quyết bài toán đó. Một điều nữa đó là chúng ta nên hạn chế cho user sử dụng các chức năng mặc định của WordPress càng tốt, điều đó sẽ đảm bảo tính bảo mật cho bạn vì WordPress là một trong những mã nguồn mở bị hacker tấn công nhiều nhất.
Với bài hôm nay thì mình sẽ khai trương series bằng form ĐĂNG NHẬP.
Tạo form đăng nhập:
Bước đầu tiên chúng ta cần phải đăng ký một page đăng nhập dưới dạng việc tạo ra một một page template với tên: template-login.php. Trong Page này mình đưa luôn cấu trúc các đoạn cho dễ hình dung
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<?php
?>
<?php
if ( ! is_user_logged_in() ) :
else:
?>
|
Với cấu trúc trên thì chúng ta sẽ thực hiện các công việc kiểm tra điều kiện người dùng đã đăng nhập hay chưa bằng hàm is_user_logged_in() , khi mà người dùng đã đăng nhập rồi thì chúng ta sẽ đưa ra thông báo việc đăng nhập là vô nghĩa :v. Còn nếu như người dùng chưa đăng nhập thì chúng ta sẽ đi tới bước cho phép họ nhập các thông tin đăng nhập bao gồm tên truy cập và email của họ.
Lưu ý: Việc tạo ra form đăng nhập này thì WordPress cũng có một hàm giúp chúng ta tạo ra form đăng nhập một cách nhanh nhất dựa vào kế thừa các thành phần từ form đăng nhập gốc với hàm:
wp_login_form(). Ưu điểm của cách này là nhanh chóng và dễ dàng cho các bạn nhưng nhược điểm của nó mà mình thấy chưa hợp lý đó chính là việc kiểm tra điều kiện đăng nhập của nó đang còn kế thừa từ form gốc do vậy khi bạn đăng nhập lỗi thì lập tức nó sẽ tự redirect sang form đăng nhập gốc, mà điều đó thì ngay từ ban đầu mình cần hạn chế rồi
Code phần chính trong form login
Đoạn code này bạn sẽ chèn vào trong phần : // Form login bên trong cấu trúc ở trên . Bên trong phần này chúng ta sẽ có 2 phần chính phải làm đó là:
1. Viết html , cụ thể là form login với các input liên quan
2. Hàm kiểm tra điều kiện nhập vào trong form
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
|
?>
<div class="form-box realty-box clearfix"></pre>
<h1 class="box-title"><<span class="q7oyxp" id="q7oyxp_11" style="font-weight: bold; height: 13px;">span style</span>="text-align: center;"><?php the_title()?></span></h1>
<form method="post" action="<?php the_<span class="q7oyxp" id="q7oyxp_6" style="font-weight: bold; height: 13px;">permalink</span>(); ?>" class="realty-wrap" name="loginform-custom">
<p class="login-username">
<label for="user_login"><?php _e( 'Tên truy cập', 'fitrealty' ); ?></label>
<input type="text" size="20" value="" class="input" id="user_login" name="log">
</p>
<p class="login-password">
<label for="user_pass"><?php _e( 'Mật khẩu', 'fitrealty' ); ?></label>
<input type="password" size="20" value="" class="input" id="user_pass" name="pwd">
</p>
<p class="login-remember"><label><input type="checkbox" value="forever" id="rememberme" name="rememberme"><?php _e( 'Tự động đăng nhập lần sau', 'fitrealty' ) ?></label></p>
<p class="login-submit">
<input type="submit" value="<?php _e( 'Đăng nhập', 'fitrealty' ) ?>" class="button-primary" id="wp-submit" name="wp-submit">
<input type="hidden" value="login" name="action">
</p>
</form>
</div>
<?php
printf( '<div class="register-losspass"><a title="%s" href="%s">%s</a> | <a title="%s" href="%s">%s</a></div>',
__( 'Đăng ký tài khoản', 'fitrealty' ),
home_url() . 'dang-ky',
__( 'Đăng ký tài khoản', 'fitrealty' ),
__( 'Quên mật khẩu.', 'fitrealty' ),
home_url() . '/quen-mat-khau',
__( 'Quên mật khẩu ?', 'fitrealty' )
);
?>
|
Với dòng code trên thì giao diện và các field sẽ tương tự với form gốc. Như vậy đã xong phần viết html và các field trong form login. Tiếp đến chúng ta sẽ xử lý việc các thông tin nhập vào của user như: các thông tin không được để trống, kiểm tra user tồn tại hay không, email tồn tại hay không. Việc kiểm tra các thông tin trên thì sẽ có 2 hướng giải quyết mà mình hay dùng nhất đó là dùng php để xử lý trực tiếp ( Cách này các bạn sẽ thấy trong bài này ) và cách thứ 2 đó là sẽ dùng jquery để xứ lý với jquery khá nổi tiếng của Jquery UI: Jquery Validation ( Với jquery này thì sẽ có ngay bài hướng dẫn ở bài sau với các form khác ).
Code xử lý thông tin form
Toàn bộ đoạn code này bạn có thể nhúng vào file function.php hoặc là 1 file riêng biệt nào đó mà được include từ từ function ( với cách include này thì nên khuyên bạn xử dụng bởi sau này sẽ rất tiện lợi cho mọi người quản lý theme của mình nếu nó to dần lên ).
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
|
add_action( 'template_redirect', 'fitrealty_login' );
function fitrealty_login()
{
if ( ! is_page_template( 'template-login.php' ) )
return;
if ( ! isset( $_POST['action'] ) || 'login' != $_POST['action'] )
return;
if ( empty( $_POST['log'] ) || empty( $_POST['pwd'] ) )
{
$url = add_query_arg( array( 'login' => 'failed' ), get_permalink() );
wp_redirect( $url );
exit;
}
$user = wp_signon();
if ( is_wp_<span class="q7oyxp" id="q7oyxp_4" style="font-weight: bold; height: 13px;">error</span>( $user ) )
{
$url = add_query_arg( array( 'login' => 'failed' ), get_permalink() );
wp_redirect( $url );
exit;
}
wp_redirect( home_url() );
exit;
}
|
Giải thích code:
Với dòng code trên sẽ thực thi các nhiệm vụ chính:
+ Kiểm tra điều kiện hàm sẽ được thực thi khi trong template login:
is_page_template( 'template-login.php' )
+ Kiểm tra các trường user, pasword có rỗng hay không, nếu lỗi sẽ redirect sang một link thông báo lỗi với kiểu gửi GET
empty( $_POST['log'] ) || empty( $_POST['pwd'] )
+ Thực hiện đăng nhập nếu luôn và chuyển tới trang chủ
wp_redirect( home_url() );
Lưu ý: Bạn sẽ thấy được rằng với hàm trên thì sẽ không đưa ra thông báo lỗi luôn mà kiểm tra các thông báo lỗi gửi dạng GET, toàn bộ phần thông báo mình sẽ thực hiện ở bước dưới dựa vào biết GET được gửi đi có failed hay không ?
Code xử lý thông báo tới user
Nếu như user nhấn nút Đăng nhập thì toàn bộ dòng code trên sẽ thực hiện và trả về link trang chủ nếu đăng nhập thành công và đăng nhập luôn cho người dùng còn ngược lại thì sẽ trả về 1 link lỗi với định dạng thế này:
http://tenwebsite.com?login=failed
Đây là cách xử lý với phương thức GET quen thuộc của chúng ta. Dòng code dưới đây bạn sẽ điền vào phần : // Thông báo các pần lỗi khi thao tác với form trong cấu trúc file ở phần trên đầu.
1
2
3
4
5
6
7
8
|
<?php
if( isset( $_GET['login'] ) && $_GET['login'] == 'failed' )
{
printf( '<div class="alert error"><p><strong>%s</strong>: %s</p></div>',
__( 'Đăng nhập thất bại', 'fitrealty' ),
__( 'Tên truy cập hoặc mật khẩu không chính xác. ', 'fitrealty' )
);
}
|
Như vậy là việc còn lại của các bạn sẽ là style cho form đăng nhập này sao cho hợp lý và đẹp mắt thôi. Đây là toàn bộ thành quả sau khi làm được
Bước 9 : Làm theo từng bước như phía dưới :
Bước 14 : Chọn Stroke ( hình dưới ) 
