Tùy biến trang đăng nhập của WordPress

Chúng ta có một Website WordPress và khi login đăng nhập vào phần quản trị của Website thì chúng ta sẻ thấy phần đăng nhập WordPress mặc định thất quen thuộc. Với trang đăng nhập mặc định đó làm Website mất đi tính khác biệt và không thể hiện được thương hiệu, của cá nhân hay công ty…

Trong bài viết hôm nay sẻ cùng hướng dẫn bạn cách tùy biến trang login đăng nhập của WordPress theo cách mong muốn và chuyên nghiệp hơn.

Đây là trang login đăng nhập mặc định của WordPress

Các bước thực hiện việc tùy chỉnh trang đăng login WordPress:

Bước 1: Việc tùy chỉnh giao diện đăng nhập này cũng giống như tạo thêm Plugin cho Website vậy.
Ở bài viết này việc chỉnh cửa code được thực hiện luôn trên Hosting tuy nhiên chúng ta cũng có thể thực hiện theo cách khác.
Chúng ta vào phần code quả WordPress ở phần cài đặt –> (1) chọn mục WP-content –> (2) plugins

Bước 2: Trong mục plugins chúng ta (1) thêm mục mới –>  (2) thư mục mới có then là custom-admin

Tiếp theo trung thư mục mới custom-admin chúng ta thực hiện (1) thêm file customadmin.php và (2) thêm mục images

Bước 3: Trong (1) mục images –> (2) chúng ta upload hình đại diện học logo của Website lên.

Bước 4: Chúng ta mở file customadmin.php lên

Thêm đoạn này vào và lưu lại

<?php
/**
 * Plugin Name: Customize Admin
 * Plugin URI: https://Gocchiase.net
 * Description: Tùy biến trang đăng nhập của wordpress
 * Version: 1.0
 * Author: Gocchiase.net
 * Author URI: https://Gocchiase.net
 */

Bước 5: Chúng ta vào trang quản trị của WordPress.
Bây giờ ở phần Plugin xuất hiện có plugin Custom Admin chúng ta thực hiện kích hoạt.

Bước 6: Chúng tra quy lại với file customadmin.php chúng ta mở lên và thêm đoạn code này vào.
Chúng ta đên kiểm tra ở phần login đăng nhập để có sử tùy chỉnh phù hợp.

<?php
/**
 * Plugin Name: Customize Admin
 * Plugin URI: https://Gocchiase.net
 * Description: Tùy biến trang đăng nhập của wordpress
 * Version: 1.0
 * Author: Gocchiase.net
 * Author URI: https://Gocchiase.net
 */

function custom_logo() { ?>
    <style type="text/css">
 
        body {
            background: #3f4a82 !important;
 
        }
        .login #nav a, .login #backtoblog a, .login label {
            color: #f3f3f3 !important;
        }
        .wp-core-ui .button-primary {
            background: #31b36b !important;
            border: none !important;
            text-shadow: none !important;
            box-shadow: none !important;
 
        }
        .login form {
            box-shadow: none !important;
            background: transparent !important;
        }
        /* Phần hình ảnh của logo đăng nhập*/
        #login h1 a {
            background-image: url(<?php echo plugins_url('images/logo.png', __FILE__); ?>);
            background-size: 240px 60px;
            width: 280px;
            height: 80px;
        }
    </style>
<?php }
add_action('login_enqueue_scripts', 'custom_logo');

Đây là kết quả sau khi tùy biến.

Đây là tùy biến cơ bản ở phần đăng nhập WordPress chúng ta có thể tùy chỉnh nhiều hơn.
Lưu ý: Bài viết này yêu cầu người quạn trị Website nên có kiến thức cơ bản về code.

Lời Kết:
Như vậy qua bài viết trên chúng ta đã thực hiện được việc tùy biến trang đăng nhập của WordPresss. Với trang đăng nhập mới đã thay thế trang đăng nhập mặc địch của WordPress.
Chúc các bạn thành công.