Tùy biến trang đăng nhập – WordPress

Đôi khi bạn muốn tạo riêng hay tùy biến trang đăng nhập trong WordPress, để cho khách hàng của bạn sử dụng. Vì bạn có thiết lập giới hạn đăng nhập vào quản trị WordPress vì lý do bảo mật.

Có 2 cách để bạn tạo tùy chỉnh trang đăng nhập, thông qua plugin hoặc tùy chỉnh code.

Cả hai cách đều có ưu và nhược điểm của chúng. Cách thủ công cho phép bạn kiểm soát nhiều hơn về giao diện. Nếu dùng plugin sẽ dễ thực hiện hơn, đặc biệt là nếu bạn không có kỹ năng lập trình.

Tạo thủ công trang đăng nhập

Mặc dù điều này đòi hỏi bạn phải điều chỉnh một số template trong giao diện WordPress của bạn, nhưng sẽ không có gì khó khăn. Mình sẽ sử dụng theme Twenty Fifteen làm ví dụ.

Bạn có thể tạo một bản sao của tệp page.php và tệp content-page.php.

Đổi tên files tương ứng thành page-login.php và content-login.php

Mở tệp page-login.php và thay đổi dòng get_template_part( 'content', 'page' ); thành get_template_part( 'content', 'login' );

Tiếp theo, bạn chỉnh sửa content-login.php và thêm một dòng ngay bên dưới , giống như thế này:

<!--?php the_content(); ?-->
<!--?php wp_login_form( array('redirect' =--> home_url()) ); ?&gt;
<!--?php wp_link_pages( array( ...

Chú ý. Ở phần này, bạn có thể thực hiện một loạt các tùy chỉnh khác nếu bạn muốn (như điều chỉnh thiết kế / bố cục, loại bỏ thanh bên), nhưng không bắt buộc. Trong bài tập này mình thực hiện đơn giản với thay đổi hai dòng này để minh chứng cho tính năng tạo form đăng nhập.

Bây giờ, hãy tạo một trang mới trong wp-admin & nhớ đặt slug của trang là ‘login’.

Tên slug này trùng với URL trang đăng nhập của WordPress, để chắc chắn giao diện trang đăng nhập sẽ gọi vào template page-login.php

Giờ nếu bạn truy cập trang login sẽ thấy trông giống như sau:

Ở bước này, chúng ta sẽ thiết lập các chuyển hướng để người dùng không có cơ hội truy cập trang đăng nhập mặc định của WordPress. Để thực hiện bạn thêm đoạn code sau vào cuối tệp functions.php.

/* Main redirection of the default login page */
function redirect_login_page() {
$login_page  = home_url('/login/');
$page_viewed = basename($_SERVER['REQUEST_URI']);

if($page_viewed == "wp-login.php" && $_SERVER['REQUEST_METHOD'] == 'GET') {
wp_redirect($login_page);
exit;
}
}
add_action('init','redirect_login_page');

/* Where to go if a login failed */
function custom_login_failed() {
$login_page  = home_url('/login/');
wp_redirect($login_page . '?login=failed');
exit;
}
add_action('wp_login_failed', 'custom_login_failed');

/* Where to go if any of the fields were empty */
function verify_user_pass($user, $username, $password) {
$login_page  = home_url('/login/');
if($username == "" || $password == "") {
wp_redirect($login_page . "?login=empty");
exit;
}
}
add_filter('authenticate', 'verify_user_pass', 1, 3);

/* What to do on logout */
function logout_redirect() {
$login_page  = home_url('/login/');
wp_redirect($login_page . "?login=false");
exit;
}
add_action('wp_logout','logout_redirect');

Như vậy người dùng sẽ chỉ thấy trang đăng nhập này của bạn mới tạo. Điều tuyệt vời ở đây là bạn có thể chỉnh sửa nó một cách tự do thông qua trình chỉnh sửa trang mặc định của WordPress (giống như bạn đã chỉnh sửa bất kỳ trang nào khác).

Tạo trang đăng nhập sử dụng plugin

Cách này hoạt động hơi khác một chút, thay vì tạo một trang đăng nhập hoàn toàn mới, chúng ta sẽ sửa đổi trang đăng nhập mặc định.

Đầu tiên, bạn cần cài đặt plugin Custom Login Page Customizer.

Sau khi cài đặt và kích hoạt plugin, truy cập Appearance > Login Customizer, điều này sẽ khởi chạy tuỳ customizer.

Các tùy chọn của plugin này khá hay và chúng cho phép bạn điều chỉnh như:

• Thay logo WordPress mặc định.
• Hình nền cho toàn bộ trang đăng nhập.
• Đặt nền cho form.
• Điều chỉnh kiểu dáng của form và từng chi tiết nhỏ khác như (phông chữ, kích thước, màu sắc, trường).
• Thêm một trường captcha để tăng tính bảo mật cho WordPress

Kết quả, chỉ trong vài phút bạn có thể thay đổi form đăng nhập thành một diện mạo mới.

Ngoài ra, có thêm một plugin khác giúp bạn tùy chỉnh trang đăng nhập là Login Designer.

Plugin này được thiết kế nhằm mục đích giúp việc tùy chỉnh trang đăng nhập WordPress trở nên siêu dễ dàng trong khi vẫn giúp bạn linh hoạt trong thiết kế.

Tất cả các tùy chọn và công cụ được tích hợp ngay vào trình tùy chỉnh WordPress. Vì vậy, nếu bạn đang sử dụng Trình tùy chỉnh để thay đổi tùy chọn của giao diện, bạn sẽ cảm thấy khá quen thuộc.

Hãy cho mình biết suy nghĩ của bạn trong phần bình luận bên dưới bài viết này. Hãy theo dõi kênh chia sẻ kiến thức WordPress của Hoangweb trên Twitter và Facebook