WordPressのログイン画面のロゴと背景を変える方法

WordPressのログイン画面は通常、上のようなロゴ画像が表示されます。コーポレートサイトやお客様に渡すとき、上記のロゴだとデザイン的にもイマイチですし、コーポレートサイトであれば自社のロゴがあるので、デザインも合わせたいところです。

今回はロゴ画像の変更と合わせて背景の変更もしてみたいと思います。

WordPressの管理画面のロゴ画像をオリジナル画像に変更する

管理画面のスタイルはwp-adminの中にある[login.min.css]で設定されています。
ただここを直接さわるとアップデートした時に元に戻ってしまいますので、テーマの中にfunctions.phpに以下を追加します。
追加する前にロゴデータをテーマの中に準備しておいてください。

//ログイン画面のロゴ変更
function login_logo() {
  echo '<style type="text/css">
    #login h1 a {
      background: url('.get_template_directory_uri().'/images/logo.png) no-repeat top center;
      background-size:100% auto;
      width: 300px; //ログインの幅
      height: 70px; //ログインの高さ
    }
  </style>';
}
add_action('login_head', 'login_logo');

４〜９行目は普通のCSSで書かれています。そしてロゴ画像は[#login h1 a]にbackgroundで指定されているので、ここで指定してあげることで[login.min.css]のスタイルを上書きします。

背景を変える

同じ要領で背景も変えみましょう。

//ログイン画面のロゴ変更
function login_logo() {
  echo '<style type="text/css">
    #login h1 a {
      background: url('.get_template_directory_uri().'/images/logo.png) no-repeat top center;
      background-size:100% auto;
      width: 300px; //ログインの幅
      height: 70px; //ログインの高さ
    }
    body{
      background: url('.get_template_directory_uri().'/images/bg.jpg) no-repeat top center;
      background-size: cover;
    }
  </style>';
}
add_action('login_head', 'login_logo');

１０〜１３行目に[body]に対してスタイルを追加しました。ここはbackground-colorでもOKです。

このようにCSSを追加するだけで、ログイン画面のスタイルを変えることが出来るのでやってみてください！