Bạn cảm thấy giao diện đăng nhập mặc định của WordPress đã quá quen thuộc. Bạn muốn tạo một trang đăng nhập theo phong cách của riêng mình?
- Hướng dẫn xây dựng trang đăng ký trong WordPress
- Hướng dẫn chuyển html sang wordpress từ A đến Z
- Hướng dẫn Nhận menu và thanh bên trong wordpress
- Tìm cha con trong wordpress sử dụng ajax
- Tìm cha con trong wordpress tưởng không dễ mà dễ không tưởng
Bài viết hôm nay mình sẽ hướng dẫn các bạn xây dựng trang đăng nhập trong WordPress
Tạo trang đăng nhập WordPress
Đầu tiên, bạn phải tạo cho mình một trang đăng nhập. Việc tạo trang mới trong WordPress chắc mọi người cũng đã biết rồi nhỉ
Trang mình tạo mới trong trường hợp này có tiêu đề là Đăng nhập, và có đường dẫn là domain/dang-nhap
Tiếp theo, các bạn hãy tạo một file PHP mới có cú pháp page-{slug}.php
vào theme đang sử dụng. Cụ thể ở trường hợp của mình là page-dang-nhap.php
Ngoài ra, bạn còn có thể tùy chỉnh trang bằng phương pháp tạo Trang mẫu. Bạn có thể xem lại video hướng dẫn tạo trang tùy chỉnh trong wordpress này nếu chưa nắm được nhé
Vui lòng thêm đoạn mã dưới đây vào tệp PHP bạn mới tạo vừa phải
PHP1
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
?php $home_url
Giải thích mã
Đầu tiên, các bạn cần quan tâm đến một hàm đó là wp_login_form. Hàm này được WordPress cung cấp để giúp bạn tạo ra một biểu mẫu đăng nhập ở bất kỳ nơi nào bạn muốn
Hàm này sẽ nhận một tham số đầu vào $args
, là một mảng có mục đích thay đổi giá trị của biểu mẫu để phù hợp với nhu cầu của bạn. Mình sẽ giới thiệu một số tùy chọn hay sử dụng tốt nhất cho các bạn
- chuyển hướng. [chuỗi] URL chuyển hướng người dùng sau khi đăng nhập thành công. Mặc định sẽ chuyển hướng người dùng trở về trang trước
- form_id. [string] Thuộc tính ID của biểu mẫu. Default is “loginform“
- nhãn_tên người dùng. [chuỗi] Nhãn của trường nhập “Tên người dùng hoặc Địa chỉ Email“
- nhãn_mật khẩu. [chuỗi] Nhãn của trường nhập “Mật khẩu“
- nhớ. [bool] Có hiển thị hộp kiểm “Tự động đăng nhập” hay không?
- value_remember. [bool] Hộp kiểm “Tự động đăng nhập” có được chọn hay không?
Bạn có thể vào tài liệu của WordPress để tìm hiểu thêm các tùy chọn khác, cũng như tìm hiểu sâu hơn về mã ở bên trong hàm này nhé
Thứ hai, đó là câu lệnh điều kiện ở dòng thứ 8. Mục đích sử dụng để kiểm tra xem người dùng đã đăng nhập hay chưa. Nếu đăng nhập rồi thì sẽ không cho xuất hiện biểu mẫu đăng nhập nữa. Ở đây mình sử dụng hàm is_user_logged_in để xác định xem khách truy cập hiện có phải là người dùng đã đăng nhập hay không
Ngoài ra, ở dòng thứ 10 mình sử dụng hàm wp_logout_url để tạo liên kết đăng xuất. Hàm này nhận một tham số đầu vào là URL sau khi đăng xuất thành công. Ở đoạn mã trên mình để người dùng quay về trang chủ
Kết quả đạt được
Đây là kết quả mà bạn đạt được sau khi sử dụng đoạn mã trên mình
Vì mình đang sử dụng theme Twentytwenty nên giao diện có thể khác các bạn. Hãy thay đổi cấu trúc HTML cho phù hợp với trang web của các bạn nhé
Tổng kết
Đây là bài viết đầu tiên trong seri hướng dẫn custom tài khoản wordpress của mình. Mình sẽ tiếp tục ra các bài viết khác nhau trong seri này mong nhận được sự đón nhận của các bạn
Như vậy là mình đã hướng dẫn xong cho các bạn cách xây dựng một trang đăng nhập trong WordPress
Mình hy vọng với kiến thức nền tảng mà mình hướng dẫn, cộng với sự sáng tạo, các bạn sẽ tự xây dựng được một trang đăng nhập đẹp hơn, phù hợp hơn cho bản thân