WordPress ログイン画面編集

ログイン画面のカスタマイズで、プラグインを使うと非常に簡単ではありますが、決まったレイアウトになってしまうので、functions.phpから以下のように編集

function my_login_stylesheet()
{
    wp_enqueue_style('custom-login', get_stylesheet_directory_uri() . '/style-login.css');
}
add_action('login_enqueue_scripts', 'my_login_stylesheet');

するとテーマフォルダ内にstyle-login.cssが生成されるので、そこでCSSを使って編集を行ってみた。

#login {
  width: 450px !important;
}

body.login {
  background-color: #ffffff;
  background: url("ロゴURL");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

#login h1 a {
  background-image: url("背景は象URL");
}

body.login div#login form {
  background-color: black;
  opacity: 0.8;
  border: 0px;
  border-radius: 20px;
  box-shadow: none;
  color: #fff;
  padding: 26px 24px 24px;
}

#nav {
  background-color: #fff;
  border-radius: 20px;
  opacity: 0.8;
  padding: 10px 24px !important;
}

#backtoblog {
  background-color: #fff;
  border-radius: 10px;
  opacity: 0.8;
}

あとは自己流にカスタマイズすると良いと思います。