저와 마찬가지로 WordPress 기본 관리자 로그인 페이지가 너무 못생겼다고 생각하는 분들이 많지 않나요? 강박증이 있는 저는 당연히 참을 수 없어서 관리자 로그인 페이지를 수정하는 플러그인을 여기저기 찾아보았습니다.

그러다 페이지 하나를 수정하기 위해 플러그인을 사용하는 것은 너무 과한 방법이 아닐까 하는 생각이 들어, CSS를 활용해 관리자 로그인 페이지의 레이아웃을 수정해 보기로 했습니다. 군말 없이 바로 코드를 소개하겠습니다.

시연 이미지

CSS 코드

body, textarea {
    font-size: 14px;
    font-family: "Microsoft Yahei", Arial, sans-serif !important;
}
input {
    font-size: 14px;
    font-family: Tahoma, Arial, sans-serif !important;
}
body {
    background: #92C1D1 url(背景图片url) fixed center top no-repeat !important;
}
.login h1 a {
    background-image: url('LOGO图片url') !important;
    background-size: 170px 35px;
    background-position: top center;
    background-repeat: no-repeat;
    width: 170px;
    margin: auto;
    margin-top: 35px;
    height: 35px;
    text-indent: -9999px;
    overflow: hidden;
    padding-bottom: 15px;
    display: block;
}
#login {
    width: 320px;
    background: rgba(0, 0, 0, 0.2);
    padding: 0 20px 100% 12px;
    margin: auto;
    top: 0px;
    right: 15%;
    position: fixed;
    box-shadow: 0px 0px 5px 0px #333;
}
.login form {
    margin-left: 8px;
    padding: 26px 24px 46px;
    font-weight: normal;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: #000 0 0px 10px -1px;
}
#loginform {
    -webkit-border-radius: 0px;
    border-radius: 0px;
}
.login form .input, .login input[type="text"] {
    color: #555;
    font-weight: 200;
    font-size: 24px;
    line-height: 1;
    width: 100%;
    padding: 5px;
    margin-top: 2px;
    margin-right: 6px;
    margin-bottom: 16px;
    border: 1px solid #FFF;
    background: #FFF !important;
    outline: 0;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.login form .input, .login input[type="text"] {
    font-size: 17px;
    padding-bottom: 11px;
    padding-top: 11px;
    text-indent: 3px;
}
.login form .input, .login input[type="text"] {
    border: 2px solid #DCE4EC;
}
input.button-primary {
    margin-top: 8px;
    border: #000;
    font-weight: bold;
    text-shadow: #FFF 0 0px 10px;
}
.login .button-primary {
    font-size: 14px !important;
    line-height: 22px;
    padding: 8px 117px;
    border-radius: 0px;
}
input.button-primary {
    background: rgba(255, 255, 255, 0.5);
    color: #000;
}
input.button-primary:hover, input.button-primary:focus {
    background: rgba(255, 255, 255, 0.8);
    color: #000;
}
input.button-primary:active {
    background: rgba(255, 255, 255, 0.2);
    color: #000;
}
.login form .forgetmenot {
    font-weight: normal;
    float: none;
    margin-top: -10px;
}
.login #nav, .login #backtoblog {
    text-shadow: #FFF 0 0 5px, #FFF 0 0 10px;
    float: right;
    margin: 0 30px 0 0px;
    padding: 16px 0px 0 20px;
}
.login #nav a, .login #backtoblog a {
    color: #FFF !important;
}
.login #nav a:hover, .login #backtoblog a:hover {
    color: #000 !important;
}
div.error, .login #login_error {
    display: none;
}
div.updated, .login .message {
    background-color: #E0FFE1;
    border-color: #ACE655;
}

사용 방법

위 CSS 코드를 xinadmin.css 파일에 작성한 후 테마 디렉터리 아래의 css 폴더에 업로드합니다.

다음 코드를 테마의 functions.php 파일에 추가합니다.

// 自定义登录页面
function custom_login_logo() { 
    echo '<link rel="stylesheet" id="wp-admin-css" href="' . get_bloginfo('template_directory') . '/css/xinadmin.css" type="text/css" />';
}
add_action('login_head', 'custom_login_logo');

그러면 모든 작업이 완료됩니다! CSS 코드 안의 이미지 URL 주소를 교체하는 것을 잊지 마세요!