Nếu bạn biết đến function wp_login_form() với nhiệm vụ hiển thị ra form đăng nhập vào website WordPress, bài viết này sẽ chia sẻ một vài điều thú vị giúp bạn tuỳ biến nó tốt hơn.
wp_login_form() là gì và sử dụng như thế nào?
Thông thường ta hay truy cập /wp-admin/ để vào trang đăng nhập wp-login.php, tuy nhiên nhiều website cho phép người dùng đăng nhập từ bên ngoài website thông qua form riêng. Khi đó, bạn cần gọi trong code đến function wp_login_form() để nó thực hiện việc output ra form đăng nhập dành cho người dùng.
Để sử dụng, đơn giản nhất chính là bạn output ra:
<?php wp_login_form(); ?>
Sử dụng loại này giúp code clear hơn rất nhiều, tương thích với backend và không cần bạn hardcoded các thành phần không thực sự cần thiết, ngoài ra các plugin như tích hợp đăng nhập mạng xã hội sẽ làm việc luôn với phần code này mà không cần bạn viết thêm.
Tuỳ biến nội dung form đăng nhập
Ta sẽ làm quen với việc tuỳ biến từ mức độ đơn giản tới phức tạp.
Các thiết lập tuỳ chọn mặc định
Khi bạn đã quyết tâm dùng nó, thì giờ ta sẽ cần tuỳ biến nó theo nhu cầu. Trong tài liệu này, bạn cũng có thể tìm thấy kha khá thông tin về cách tuỳ biến, chẳng hạn như:
- Thay đổi các nhãn (label) của các mục
- Bật chức năng Remember (Nhớ tài khoản)
- Định hướng chuyển tiếp người dùng sau khi họ đăng nhập thành công
- Thay đổi form id
Thêm các thông tin, giá trị mới cho form đăng nhập
Tuy nhiên, vấn đề nảy sinh khi ta muốn thêm bớt các giá trị, nội dung mới mà không cần mất công viết lại toàn bộ markup.
Ví dụ, trong thiết kế này, tôi muốn thêm mục “Forgot Password”:
Vậy ta sẽ làm như thế nào? Thật may, đội ngũ phát triển WordPress cũng nghĩ tới điều này và cho phép bạn sử dụng một số action như sau, tương ứng với các vị trí trên đầu, giữa và cuối cùng của form:
login_form_top login_form_middle login_form_bottom
Ta sử dụng như sau nhé, cụ thể là trong tình huống mà mình vừa giả định:
add_action( 'login_form_bottom', 'add_lost_password_link' );
function add_lost_password_link() {
return wp_lostpassword_url( get_permalink() );
}
Bạn nên thêm một số markup để có thể tuỳ biến style hơn, nên ta sẽ viết lại như thế này:
add_action( 'login_form_bottom', 'add_lost_password_link' );
function add_lost_password_link() {
return '<a href="' . esc_url(home_url('/')) . '/wp-login.php?action=lostpassword">Lost Password?</a>';
}
Bạn thấy đơn giản không?
Giám đốc tại Công ty CP CODE TỐT. Quản lý ngôn ngữ bản địa tiếng Việt tại WordPress. Là tác giả chính tại codetot.net, Khôi muốn ghi lại một sốvấn đề kỹ thuật trong quá trình phát triển các dự án website với khách hàng.
