wordpress登录页面简单美化-无线技术分享

美化样式截图：

需要在网站主题目录下functions.php文件底部添加：

/后台登录页自定义

function login_scripts() {
wp_enqueue_style( "login-index", get_template_directory_uri() . "/css/login.css" );
}
add_action('login_enqueue_scripts', 'login_scripts');

然后在网站主题目录下css文件中新建login.css添加以下代码：

body{
    font-family: “Microsoft YaHei”, Helvetica, Arial, Lucida Grande, Tahoma, sans-serif;
    width:100%;
    height:100%;
    position: relative;
    background-image: url(https://www.iwuxian.vip/wp-content/themes/webstackpro/images/login-bj.jpg);
    -moz-background-size: cover; /*背景图片拉伸以铺满全屏*/
    -ms-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
}


.login h1 a {
    background-image: none,url(https://cdn.iwuxian.vip/2020/08/%E6%9C%AA%E5%91%BD%E5%90%8D-2.png);
    background-size: 300px;
    background-position: center top;
    background-repeat: no-repeat;
    height: 70px;
    width: 300px;
    margin: 20px auto 20px;
    padding: 0;
    text-decoration: none;
    text-indent: -9999px;
    outline: 0;
    overflow: hidden;
    display: block;
}
#login {
    position: absolute;
    left: 25%;
    margin-left: -200px;
    padding: 0;
    top: 50%;
    margin-top: -300px;
    background: #e2e2e2e0;
    width: 400px;
    border-radius: 10px;
  }
  form {
    box-shadow: none;
    margin-top: 0;
    padding: 10px 30px 2px;
    input {
      padding: 7px 10px;
      margin-top: 8px;
      font-size: 16px;
      border-radius: 4px;
      height: 40px;
      &:focus {
        border-color: #419df5;
        box-shadow: 0 0 2px rgb(123, 184, 243);
      }
    }
    .forgetmenot {
      padding-bottom: 20px;
      padding-top: 7px;
      input[type=checkbox], input[type=radio] {
        width: 20px;
        height: 20px;
        margin-top: 0
      }
    }
  /*  .submit {*/
  /*    float: none;*/
  /*    input[type=submit] {*/
  /*      width: 100%;*/
  /*      background: #007cba;*/
  /*      border-color: #007cba;*/
  /*      line-height: 40px;*/
  /*      padding: 0;*/
  /*      text-shadow: none;*/
  /*      box-shadow: none*/
  /*    }*/
  /*  }*/
  /*}*/
  #nav, #backtoblog {
    padding-left: 30px
  }
}

@media screen and (max-width: 767px) {
  #login {
    left: 5%;
    margin-left: 0;
    width: 90%
  }
}

.login form{
    border: none;
    overflow: inherit;
    margin-top: 20px;
    margin-left: 0;
    padding: 26px 24px 46px;
    font-weight: 400;
    background:none;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
    
}

.wp-core-ui .button-group.button-large .button, .wp-core-ui .button.button-large {
    min-height: 32px;
    line-height: 2.30769231;
    padding: 0 20px;
}


.wp-core-ui .button-primary {
    background: #007cba;
    border-color: #007cba;
    color: #fff;
    text-decoration: none;
    text-shadow: none;
}


.submit:hover {
    background: #4CAF50;
}

.button:hover {
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

.login form .input, .login form input[type=checkbox], .login input[type=text] {
    background: rgba(0,0,0,.04);
}

/*登录框输入框*/
.login label {
color: #000;
}
.login .message {
color: #000;
}
#user_login{
font-size:  18px;
line-height: 32px;
}

.input[type=text],.input[type=password]{
    box-shadow: 0 0 0 transparent;
    border-radius: 8px;
    border: 1px solid #72777c;
    background-color: #fff;
    color: #555;
}

.wp-core-ui, .wp-core-ui .button-secondary {
    color: #555;
}
.wp-core-ui .button-secondary:hover, .wp-core-ui .button.hover, .wp-core-ui .button:hover {
    color: #72777c;
}

.login .button.wp-hide-pw {
    border: 0px solid transparent;
}

演示网址：https://iwuxian.vip/wp-login.php?t=login
需要其他样式可以自己修改css里面的内容