WordPress: ログイン画面をカスタマイズする（子テーマ対応）

Web 案件を WordPress で納品する場合、ログイン画面をオリジナルのものにすれば格段に品質が向上します。
今回はログイン画面カスタマイズの基本であるロゴ画像や、ボタンのデザインを変更してみたいと思います。

目次

• ログイン画面をカスタマイズする（子テーマ対応）
• まとめ

WordPress: ログイン画面をカスタマイズする（子テーマ対応）

みなさんもご存知の WordPress デフォルトのログイン画面です。

ここからは https://xxx.com で運用されている WordPress に以下のような xxx という子テーマがあると仮定し説明します。（※印のファイルは今回使用するファイルです）

[code]
wordpress
├ wp-content
│ 　 └ themes
│ 　 　 　 └ xxx
│ 　 　 　 　 ├ functions.php（※）
│ 　 　 　 　 ├ screenshot.png
│ 　 　 　 　 ├ style.css
│ 　 　 　 　 ├ css
│ 　 　 　 　 │ └ login.css（※）
│ 　 　 　 　 └ img
│ 　 　 　 　 　 └ login_logo.png（※ 320 x 320px の画像を推奨）
├ …
├ …
└ …
[/code]

functions.php

[code]
login.css

ログイン画面に関連するスタイルをすべて書き出しています。
必要に応じてスタイルを追加してください。

[code]
body.login div#login {}

body.login div#login h1 {}

body.login div#login h1 a {
background-image: url(‘https://xxx.com/wp/wp-content/themes/xxx/img/login_logo.png’);
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
background-size: 180px 180px;
width: 180px;
}

body.login div#login_error,
body.login div#login .message,
body.login div#login .success {
border-left: 4px solid #202020;
}

body.login div#login form#loginform,
body.login div#login form#lostpasswordform {
padding: 26px 24px 36px;
border-radius: 4px;
}

body.login div#login form#loginform p,
body.login div#login form#lostpasswordform p {}

body.login div#login form#loginform p label,
body.login div#login form#lostpasswordform p label {}

body.login div#login form#loginform input,
body.login div#login form#lostpasswordform input {}

body.login div#login form#loginform input#user_login,
body.login div#login form#lostpasswordform input#user_login {}

body.login div#login form#loginform input#user_pass,
body.login div#login form#lostpasswordform input#user_pass {}

body.login div#login form#loginform p.forgetmenot,
body.login div#login form#lostpasswordform p.forgetmenot {}

body.login div#login form#loginform p.forgetmenot input#rememberme,
body.login div#login form#lostpasswordform p.forgetmenot input#rememberme {}

body.login div#login form#loginform p.submit,
body.login div#login form#lostpasswordform p.submit {
text-align: center;
}

body.login div#login form#loginform p.submit input#wp-submit,
body.login div#login form#lostpasswordform p.submit input#wp-submit {
margin: 18px 0 0 !important;
background-color: #202020;
font-size: 15px;
border: none;
box-shadow: 1px 1px 2px #ccc;
border-radius: 30px;
padding: 6px 60px 8px !important;
max-width: 100% !important;
box-sizing: border-box !important;
height: auto;
text-shadow: none;
float: none !important;
}

body.login div#login p#nav {}

body.login div#login p#nav a {}

body.login div#login p#backtoblog {}

body.login div#login p#backtoblog a {}

body.login div#login div.privacy-policy-page-link {
margin: 4em 0 2em;
}
[/code]

以下のようにログイン画面が変更されました。

まとめ

久しぶりに WordPress を触っていますが、基本構造はあまり変化ないにも関わらず、できることが増え、ユーザビリティが格段に良くなっていることにびっくりしました。

これまで WordPress のテーマファイルは自作していたのですが、なるべく工数をかけず優秀なテーマファイルを利用し、子テーマで運用するのも面白いと感じました。

この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。