Share vì hữu ích

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”:

Tuỳ biến form đăng nhập của WordPress
Tuỳ biến form đăng nhập của WordPress

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?

Share vì hữu ích

Tác giả: Khôi 'Pro' Nguyễn

Technical Lead tại Solis Lab. Quản lý ngôn ngữ tại vi.wordpress.org.

Trả lời