Tùy biến trang đăng nhập của WordPress là bạn sửa logo của wordpress thành logo của bạn và thay đổi màu nền bằng cách sử dụng API của WordPress.
Tạo plugin
Để dễ quản lý code và tránh gây lỗi cho website, bạn nên tự tạo một plugin cho riêng mình. Bạn vào đường dẫn thư mục /wp-content/plugins/ và tạo một thư mục có tên là wp-custom-admin.
Trong thư mục này bạn tạo tập tin có tên custom-admin.php và thư mục images. Cấu trúc như sau:
Tiếp theo bạn mở tập tin custom-admin.php để thêm thông tin plugin vào để nó hiển thị trong trang quản lý plugin.
<?php /** * Plugin Name: TP Customize Admin Screen * Plugin URI: http://top1sale.com * Description: Tùy biến trang quản trị của admin. * Version: 1.0 * Author: Hung Le * Author URI: http://top1sale.com
Trong bài này bạn sẽ viết code ngay dưới đoạn khai báo thông tin plugin này, bây giờ bạn vào trang quản lý plugin để kích hoạt plugin mà bạn vừa khai báo.
Tạo hàm tương tác cho trang đăng nhập
Bây giờ bạn sẽ khai báo đoạn code mà bạn muốn tùy biến vào trang đăng nhập, ở đây tôi có hàm wp-custom-login ()
/** * Hàm thay đổi logo */ function wp_custom_logo() { } add_action('login_enqueue_scripts', 'wp_custom_logo');
Trong đoạn code trên bạn thấy tôi móc hàm wp_custom_logo() vào hook có tên login_enqueue_scripts. Hook này sẽ hiển thị những gì bạn móc vào trang đăng nhập, vì vậy nếu bạn muốn thay đổi hình ảnh, màu sắc tức là viết thêm CSS cho trang đăng nhập thì nên móc vào hook này.
Thêm CSS cho trang đăng nhập
Để viết thêm css cho trang đăng nhập bạn cần đóng code PHP lại trước:
/** * Hàm thay đổi logo */ function wp_custom_logo() { ?> <?php } add_action('login_enqueue_scripts', 'wp_custom_logo');
Bây giờ bạn có thể viết CSS hoặc HTML vào phần trống ở giữa. Tôi sẽ thay đổi logo đầu tiên, bạn ra trang đăng nhập để xem cấu trúc HTML thì sẽ thấy phần logo hiển thị trong phần id#login
Bạn thêm đoạn CSS dưới đây vào nhé, nhớ thay logo của bạn vào.
<style type="text/css"> #login h1 a { background-image: url( <?php echo plugins_url('wp-custom-admin/images/logo.png', FILE ); ?>); width: 280px; height: 80px; background-size: 280px 80px; } </style>
Ở dòng 3 tôi có sử dụng hàm plugin_url() như sau:
<?php echo plugins_url('wp-custom-admin/images/logo.png', _FILE_ ); ?>
Hàm này được sử dụng để in ra đường dẫn tới tập tin logo.png trong thư mục images của plugin mà bạn tạo, tham số _FILE_ để lấy đường dẫn thư mục của tập tin hiện tại.
Sau khi thực hiện xong, logo của bạn sẽ hiển thị như sau
Nếu bạn muốn trang đăng nhập khác hơn thì viết thêm CSS.
function wp_custom_logo() { ?> <style type="text/css"> body{ background: #222222 !important; } .login #nav a, .login #backtoblog a{ color: #f8f9f4 ! important; } .wp-core-ui .button-primary { background: #21b72e! important; border: none! important; text-shadow: none! important; box-shadow: none!important; } #login h1 a { background-image: url( <?php echo plugins_url('wp-custom-admin/images/logo.png', _FILE_ ); ?>); width: 280px; height: 80px; background-size: 280px 80px; } </style> <?php } add_action('login_enqueue_scripts', 'wp_custom_logo');
Kết quả:
OK, xong rồi đấy! Đây là cách khá đơn giản để thay đổi giao diện trang đăng nhập cho website WordPress. Nhìn cũng khá là chuyên nghiệp đấy chứ. Mời bạn bình luận chúng ta cùng giao lưu. Chúc bạn thành công!

Tham gia cùng 67,322 người đăng ký
Nhận thông tin khi có bài viết đặc biệt, hướng dẫn chuyên sâu và cập nhật mới.
Mọi thông tin đều được mã hóa và bảo mật.
em bị quen mật khẩu admin thì làm như thế nào a
Bạn lấy lại qua email cũng được, hoặc vào User trong database để đổi bạn nhé! Đổi mật khẩu nhớ dùng mã MD5
Code này hiện có còn phù hợp với wp 5.7.1 và flatsome bản mới không ad mình add vào mà không thấy thay đổi gì hết huhu
Vẫn ok đó bạn