Tùy chỉnh trang đăng nhập WordPress tiêu chuẩn cho khu vực quản trị của trang web của bạn. Thay đổi biểu trưng và hình nền mà không cần plugin. Để làm điều này, chúng tôi sẽ sử dụng một chủ đề con tùy chỉnh và chúng tôi sẽ giữ cho tệp functions.php của chúng tôi sạch sẽ bằng cách tạo một mô-đun nhỏ có thể tái sử dụng.
Thiết lập các tệp chủ đề
Điều đầu tiên chúng ta cần làm là thiết lập một số tệp nơi chúng ta có thể đặt các tệp PHP và CSS tùy chỉnh của mình. Trong thư mục chủ đề con tùy chỉnh của bạn, hãy tạo tệp PHP cho mã và tệp CSS cho các kiểu. Đặt 2 tệp này vào một thư mục con mới, để bạn kết thúc với tệp này trong chủ đề con tùy chỉnh của mình.| Đối tượng Hệ thống Tệp | Sự miêu tả |
|---|---|
| functions.php | Các chức năng chính của chủ đề con tùy chỉnh của bạn. Điều này đã tồn tại. |
| style.css | Các lớp CSS chính của chủ đề con tùy chỉnh của bạn. Điều này đã tồn tại. |
| login-page / functions.php | Một tệp mới để chứa một số mã tùy chỉnh mà chúng tôi sẽ sử dụng ở đây. |
| login-page / style.css | Các lớp CSS trang đăng nhập tùy chỉnh. |
| login-page / my-website-logo.png | Không bắt buộc. Một logo hướng ngang cho trang web của chúng tôi. Kích thước: 320px x 125px |
| login-page / background.jpg | Không bắt buộc. Hình nền toàn trang. |
Thêm phần sau vào một nơi nào đó gần đầu tệp functions.php của chủ đề con tùy chỉnh của bạn .
/**
* Settings for custom login page.
*/
define('IS_CUSTOM_LOGIN_ENABLED', true); // << Set this to false for default login.
// Example settings.
define('CUSTOM_LOGIN_BUTTON_BG', '#00739c'); // << Your theme's button BG colour.
define('CUSTOM_LOGIN_BUTTON_FG', 'white'); // << Your theme's button text colour.
define('CUSTOM_LOGIN_PAGE_BG_FILE_NAME', 'background.jpg');
define('CUSTOM_LOGIN_LOGO_FILE_NAME', 'my-website-logo.png');
define('CUSTOM_LOGIN_ADDITIONAL_CSS', 'style.css');
// Customise our login page.
// Comment-out this line to go back to the boring WordPress login page.
require_once 'login-page/functions.php';Hãy viết một số mã
Đây là mã thực hiện công việc tùy chỉnh trang đăng nhập WordPress thực tế. Tạo tệp login-page / functions.php , sau đó sao chép và dán tệp này vào tệp mới của bạn./**
* FILE: login-page/functions.php
*
* Customise the WordPress login page.
*
* Optional Constants:
* CUSTOM_LOGIN_PAGE_BG_FILE_NAME (string) def="login-background.jpg"
* CUSTOM_LOGIN_LOGO_FILE_NAME (string) def="login-logo.png"
* CUSTOM_LOGIN_ADDITIONAL_CSS (string) def="style.css"
* CUSTOM_LOGIN_BUTTON_BG (string) def="#00739c"
* CUSTOM_LOGIN_BUTTON_FG (string) def="white"
*/
// Block direct access.
if (!defined('WPINC')) {
exit('Do NOT access this file directly.');
}
if (defined('IS_CUSTOM_LOGIN_ENABLED') && (IS_CUSTOM_LOGIN_ENABLED === true)) {
function hw_login_page_scripts() {
// Sensible defaults.
$background_file_name = 'login-background.jpg';
$logo_image_file_name = 'login-logo.png';
$additional_url_file_name = 'style.css';
$login_button_background_colour = '#00739c';
$login_button_text_colour = 'white';
$logo_image_width = '320px';
$logo_image_height = '125px';
$base_dir = basename(dirname(__FILE__)); // 'login-page'
$base_full_path = dirname(__FILE__);
// Initialise what we're going to customise on the login page...
$background_full_path = null;
if (defined('CUSTOM_LOGIN_PAGE_BG_FILE_NAME')) {
$background_file_name = CUSTOM_LOGIN_PAGE_BG_FILE_NAME;
}
if (!empty($background_file_name)) {
$background_full_path = trailingslashit($base_full_path) . $background_file_name;
}
$logo_image_full_path = null;
if (defined('CUSTOM_LOGIN_LOGO_FILE_NAME')) {
$logo_image_file_name = CUSTOM_LOGIN_LOGO_FILE_NAME;
}
if (!empty($background_file_name)) {
$logo_image_full_path = trailingslashit($base_full_path) . $logo_image_file_name;
}
if (defined('CUSTOM_LOGIN_BUTTON_BG')) {
$login_button_background_colour = CUSTOM_LOGIN_BUTTON_BG;
}
if (defined('CUSTOM_LOGIN_BUTTON_FG')) {
$login_button_text_colour = CUSTOM_LOGIN_BUTTON_FG;
}
$additional_url_full_path = null;
if (defined('CUSTOM_LOGIN_ADDITIONAL_CSS')) {
$additional_url_file_name = CUSTOM_LOGIN_ADDITIONAL_CSS;
}
if (!empty($background_file_name)) {
$additional_url_full_path = trailingslashit($base_full_path) . $additional_url_file_name;
}
// Register external styles?
if (is_readable($additional_url_full_path)) {
$additional_css_url = get_stylesheet_directory_uri() . '/' . $base_dir . '/' . $additional_url_file_name;
wp_enqueue_style('custom-login-css', $additional_css_url, false);
}
// Add inline styles.
echo '<style type="text/css">';
// Background image?
if (is_readable($background_full_path)) {
$image_url = get_stylesheet_directory_uri() . '/' . $base_dir . '/' . $background_file_name;
echo 'body:after {';
printf('background-image: url( "%s" );', esc_url($image_url));
echo '}';
}
// Logo image?
if (is_readable($logo_image_full_path)) {
$image_url = get_stylesheet_directory_uri() . '/' . $base_dir . '/' . $logo_image_file_name;
echo '#login h1 a {';
printf('background-image: url( "%s" );', esc_url($image_url));
printf('width: %s;', $logo_image_width);
printf('height: %s;', $logo_image_height);
echo '}';
}
// The login button FG and BG.
echo '#login .button-primary {';
if (!empty($login_button_text_colour)) {
printf('color: %s;', $login_button_text_colour);
}
if (!empty($login_button_background_colour)) {
printf('background-color: %s;', $login_button_background_colour);
}
echo '}';
echo '</style>'; // Inline login styles.
}
add_action('login_enqueue_scripts', 'hw_login_page_scripts', 20);
/**
* So when you click on the logo on the login page, it takes the user to our
* site isntead of wordpress.org.
*/
function hw_login_headerurl($login_header_url) {
return home_url();
}
add_filter('login_headerurl', 'hw_login_headerurl');
}
Có khá nhiều thứ để tham gia ở đây, nhưng nó thực sự khá đơn giản. Các điểm chính là:
- Nếu IS_CUSTOM_LOGIN_ENABLED không được xác định hoặc không đúng, thì đừng áp dụng bất kỳ tùy chỉnh nào của chúng tôi.
-
Kết nối hành động login_enqueue_scripts tiêu chuẩn của WordPress để áp dụng các sửa đổi của chúng tôi.
- Hầu hết các hành động và bộ lọc được gọi với mức độ ưu tiên là 10. Chúng tôi đang gọi chúng tôi với mức độ ưu tiên là 20 để đảm bảo rằng nó được gọi sau bất kỳ hành động tiêu chuẩn nào của WordPress.
-
Khi hàm custom_login_page_scripts () của chúng tôi được gọi, chúng tôi chỉ thực hiện điều này:
- Kéo cài đặt cấu hình của chúng tôi từ một loạt các hằng số toàn cục và lưu trữ chúng trong các biến cục bộ.
- Nếu login-page / style.css (hoặc bất kỳ thứ gì bạn đã đặt trong CUSTOM_LOGIN_ADDITIONAL_CSS ) tồn tại thì hãy xếp nó vào hàng đợi, vì vậy WordPress sẽ đưa nó vào tiêu đề.
- Viết một số kiểu nội tuyến để áp dụng màu tiêu chuẩn và biểu trưng đăng nhập.
- Hãy xem phần cuối của mã và bạn sẽ thấy rằng chúng tôi kết nối với login_headerurl. Điều này để khi người dùng nhấp vào biểu trưng phía trên hộp đăng nhập, họ sẽ được dẫn đến trang đầu của trang web của chúng tôi, thay vì wordpress.org. Đó là một liên lạc cuối cùng tốt đẹp.
/**
* Custom login CSS.
*/
#login h1 a {
background-size: contain;
}
#login .button-primary {
font-weight: bold;
transition: 0.3s;
}
#login .button-primary:hover {
opacity: 0.80;
}
body:after {
background-size: cover;
content: ' ';
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
color: white;
opacity: 0.50;
z-index: -1;
-webkit-filter: blur(5px);
}
Bây giờ, chúng tôi có thể giảm mã trong chức năng của mình thành không có gì cả và chỉ cần đưa màu sắc, biểu trưng đăng nhập và hình nền vào thẳng tệp CSS của chúng tôi. Và sẽ không có gì sai với điều đó. Nhưng… chủ đề của bạn có thể đã có quyền truy cập vào một số màu tiêu chuẩn trong các biến PHP - những thứ như màu nút tiêu chuẩn của bạn. Bằng cách thêm màu của chúng tôi theo chương trình (thay vì vào style.css), chúng tôi có thể sử dụng lại tất cả các nội dung trong thư mục trang đăng nhập giữa nhiều dự án mà không cần phải thay đổi bất kỳ dòng mã nào. Mọi thứ dành riêng cho từng trang đều có trong functions.php của chủ đề con tùy chỉnh.
Kết thúc và Triển khai
Đây là thư mục trang đăng nhập đã hoàn thành của chúng tôi trông như thế nào, hoàn chỉnh với hai nội dung hình ảnh…… Và đây là kết quả đã hoàn thành khi bạn truy cập wp-login.php của trang web của bạn
Đó là nó! Chúng tôi đã kết nối một hành động WordPress duy nhất để gọi một hàm tùy chỉnh. Mã mới tồn tại trong tệp nhỏ của riêng nó, nằm gọn trong một thư mục có các nội dung liên quan. Điều này có nghĩa là chúng ta có thể dễ dàng sử dụng lại đoạn mã này trên một trang web WordPress khác sao chép thư mục trang đăng nhập và thêm một vài dòng vào functions.php của chủ đề.