Tùy chỉnh trang đăng nhập WordPress

Bài viết này Sáu không chỉ nói đến cách để thay đổi giao diện cho trang đăng nhập WordPress mà còn liên quan đến mục đích bảo mật cho trang web của bạn làm giảm nguy cơ bị người khác đánh cắp tài khoản. Hiện nay trên mạng đã có rất nhiều bài viết hướng dẫn làm đẹp cho trang đăng nhập của WordPress, riêng Sáu thì không hướng tới độ đẹp của nó, mà chỉ là chỉnh sửa lại cho phù hợp và tăng cường khả năng bảo mật.

Tại sao phải sửa trang đăng nhập

Có nhiều bạn thích làm theo ý riêng của mình để cho trang đăng nhập được đẹp theo ý muốn, nhưng cũng có nhiều bạn lại thích dùng hàng mặc định mà ai ai cũng biết đến cấu trúc của nó. WordPress đã làm rất tốt trong việc mang đến tiện ích cho người dùng, nhưng nhìn lại thì hệ thống thông báo của trang đăng nhập có vài điểm cần phải thay đổi.

Khi bạn gõ vào phần đăng nhập một tài khoản hoặc mật khẩu không đúng thì bạn sẽ nhận được chính xác là bạn đã làm sai phần nào, điều này vô tình đã làm giảm độ bảo mật trên trang của bạn 50%. Với các hacker chuyên nghiệp thì họ có thể phát hiện ra tài khoản và mật khẩu của bạn một cách dễ dàng.

Không những thế, tên đăng nhập thường chúng ta sử dụng để viết bài trên blog, và thông tin của tác giả thì lúc nào cũng là public. Chúng ta không có thói quen dùng display name để hiển thị ra ngoài blog. Người khác có thể nhận biết được tài khoản của bạn rất nhanh và họ chỉ cần thử lại mật khẩu cho trùng khớp là được.

Ngoài chuyện bảo mật thì bạn cũng muốn chỉnh sửa lại đôi chút để trang đăng nhập hiển thị vừa ý với bạn hơn, đó là những lý do vì sao bạn nên thay đổi trang đăng nhập mặc định của WordPress.

Tùy chỉnh trang đăng nhập WordPress

Không nói tùm lum tới chuyện khác nữa, bây giờ chúng ta đi thẳng vào vấn đề làm cách nào để chỉnh sửa trang đăng nhập trên blog của bạn.

Bạn có thể lựa chọn một trong 3 cách làm, đó là bạn có thể viết một plugin để làm điều này, hoặc bạn có thể bỏ code vào tập tin functions.php của giao diện, hoặc là bạn dùng plugin mà Sáu đã xây dựng sẵn nếu bạn có đủ độ tin cậy.

1. Tạo plugin

Sáu chưa có đủ điều kiện để viết bài hướng dẫn cách tạo một plugin đơn giản cho WordPress, nhưng bây giờ bạn có thể làm theo bài hướng dẫn này để thực hiện.

Bạn hãy mở một trình soạn thảo văn bản lên hoặc dùng một phần mềm chuyên để lập trình php trong bước này. Sau đó bạn sao chép toàn bộ code bên dưới và lưu lại với tên gì mà bạn tùy thích.

/**
 * Plugin Name: Sau Login
 * Plugin URI: https://hocwp.net
 * Description: You can use this plugin to create a custom login page.
 * Version: 1.2
 * Author: Sau Hi
 * Author URI: https://hocwp.net
 * License: GNU General Public License v3.0
 */

// Change logo url
function change_logo_url()
{
    return home_url('/');
}
add_filter( 'login_headerurl', 'change_logo_url' );

// Change logo title
function change_logo_title()
{
    return get_bloginfo('description');
}
add_filter( 'login_headertitle', 'change_logo_title' );

// Change logo image
function change_logo_image()
{
    echo '<link media="all" type="text/css" href="'.plugins_url('css/style.css', __FILE__).'" id="sau-login-css" rel="stylesheet">';
}
add_action( 'login_enqueue_scripts', 'change_logo_image' );

function custom_login_message($message)
{
    $action = $_REQUEST['action'];
    if($action == 'register')
    {
        $message = '<p class="message register">Đăng ký làm thành viên.</p>';
    }
    elseif($action == 'lostpassword')
    {
        $message = '<p class="message">Hãy điền vào địa chỉ email của bạn để lấy lại mật khẩu.</p>';
    }
    return $message;
}
add_filter('login_message', 'custom_login_message');

function custom_login_error($error)
{
    if(isset($_REQUEST['action']) && $_REQUEST['action'] == 'lostpassword')
    {
        $error = '<strong>Lỗi:</strong> Xin vui lòng nhập chính xác địa chỉ email.';
    }
    elseif(isset($_REQUEST['registration']) && $_REQUEST['registration'] == 'disabled')
    {
        $error = '<strong>Lỗi:</strong> Hệ thống không cho phép đăng ký tài khoản.';
    }
    else
    {
        $error = '<strong>Đăng nhập thất bại:</strong> Xin vui lòng nhập đúng tên tài khoản và mật khẩu của bạn.';
    }
    return $error;
}
add_filter( 'login_errors', 'custom_login_error' );

function change_form_text( $translation, $text )
{
    if ( 'Username' == $text ) { return 'Tên tài khoản'; }
    if ( 'Password' == $text ) { return 'Mật khẩu'; }
    if ( 'Remember Me' == $text ) { return 'Nhớ đăng nhập'; }
    if ( 'Log In' == $text || 'Log in' == $text ) { return 'Đăng nhập'; }
    if ( 'Lost your password?' == $text ) { return 'Quên mật khẩu?'; }
    if ( '&larr; Back to %s' == $text ) { return 'Quay lại trang chủ'; }
    if ( 'Register' == $text ) { return 'Đăng ký'; }
    if ( 'E-mail' == $text ) { return 'Địa chỉ email'; }
    if ( 'A password will be e-mailed to you.' == $text ) { return 'Mật khẩu sẽ được chuyển đến email của bạn.'; }
    if ( 'Username or E-mail:' == $text ) { return 'Tên tài khoản hoặc địa chỉ email'; }
    if ( 'Get New Password' == $text ) { return 'Nhận mật khẩu mới'; }
    if ( 'You are now logged out.' == $text ) { return 'Bạn đã đăng xuất khỏi hệ thống.'; }
    return $translation;
}
add_filter( 'gettext', 'change_form_text', 10, 2 );

Quan trọng là bạn phải chỉnh sửa lại thông tin các dòng đầu tiên trong phần chú thích theo cách của bạn, nếu không thì bạn để nguyên cũng được.

Bạn lưu tập tin trên vào trong một thư mục với tên mà bạn đặt, sau đó tạo 2 thư con bên trong thư mục trên với tên là css và images. Đây là Sáu làm theo cách mọi người vẫn hay làm để dễ dàng quản lý, nếu bạn không thích thì có thể khỏi cần tạo thư mục con mà lưu hình ảnh và css vào thư mục gốc ngang hàng với tập tin php bên trên và chỉnh sửa lại đường dẫn của css và đường dẫn hình ảnh logo trong tập tin css.

Mục đích của các hàm bên trên cũng chỉ là thay đổi lại những thông báo mặc định của WordPress, nhằm giúp người dùng không thể phân biệt được mình đã gõ sai mật khẩu hay tên đăng nhập. Bạn có thể coi như đây là quá trình Việt hóa trang đăng nhập trong WordPress.

Tiếp đến bạn sao chép đoạn css bên dưới và tạo một tập tin mới sau đó sửa lại đường dẫn trong tập tin php bên trên nếu như cấu trúc thư mục của bạn không giống với cách mà Sáu đang làm.

body.login div#login h1 a {
    background-image: url("../images/logo.png");
    background-size: 282px 100px;
    padding-bottom: 30px;
    height: 80px;
    width: 330px;
}

#login {
    padding-top: 60px;
}

.wp-core-ui .button-primary {
    font-size: 15px;
    margin-bottom: -20px;
    margin-top: 10px;
    padding-bottom: 35px !important;
    padding-top: 10px !important;
    width: 100%;
}

.login #backtoblog { display: none; }

Cuối cùng là đường dẫn đến tập tin hình ảnh logo trên blog của bạn, nếu như bạn không lưu lại trong thư mục của plugin mà dùng link trực tiếp từ địa chỉ khác cũng được, miễn là bạn phải sửa lại đường dẫn cho phù hợp.

Cuối cùng là bạn kiểm tra và thử nghiệm plugin bạn vừa tạo trên localhost, nếu như mọi thứ chạy tốt thì bạn mới tiến hành upload plugin lên trên hosting và kích hoạt plugin này để sử dụng.

2. Chỉnh sửa giao diện

Cách này đơn giản hơn một chút, bạn không cần tạo plugin mà hãy sao chép toàn bộ code bên trên bỏ vào tập tin functions.php của giao diện, còn lại các thuộc tính css thì bạn bỏ vào tập tin style.css.

Nên chớ là bạn phải thay lại đường dẫn logo trong tập tin css và thêm các thuộc tính khác nếu bạn cảm thấy cần thiết.

3. Cài đặt plugin do Sáu đã dựng sẵn

Không ngoài nội dung mà Sáu đã đăng trong bài viết này, code trong plugin Sau Login hoàn toàn giống với những gì mà mình đã chia sẻ ở đây (phiên bản hiện tại). Nếu bạn không muốn làm những thứ rườm rà, hoặc là bạn chưa rành về cách làm thì có thể tải bản có sẵn về và upload lên hosting để sử dụng.

SB Login Page

Suy cho cùng thì cách nào cũng OK hết, nếu bạn muốn tự tay thực hiện code để tiện thể học thêm về WordPress thì có lẽ sẽ tốt hơn. Nhưng nếu bạn đã cố gắng làm mà vẫn không được thì có thể tải bản mà Sáu đã viết sẵn về, chỉnh sửa lại logo rồi upload lên hosting để sử dụng.

Tóm lại

Việc bảo mật cho blog WordPress là cực kỳ quan trọng, nếu trang của bạn chỉ làm chơi chơi thì có bị hack cũng không sao, ngược lại nếu trang của bạn có nội dung quan trọng và là nguồn thu nhập thêm của bạn mà bị người ta lấy mất thì coi như xong rồi.

Sáu rất vui nếu như bạn để lại bình luận và câu hỏi tại bài viết hướng dẫn tùy chỉnh trang đăng nhập cho WordPress. Mọi người cũng thảo luận với nhau thì vấn đề sẽ được giải quyết nhanh hơn đấy.