管理画面

2019.08.11 まろん

ログイン画面をカスタマイズする（GDPR対応版）

ログイン画面をオリジナルにします。オリジナルCSSを読み込んでガラッとイメージを変更。
ロゴマークの変更やロゴマークのリンク先をサイトトップにします。サンプルコード付き。

オリジナルCSS＆JSファイルを読み込む

function wpqw_login() {
	echo '<link rel="stylesheet" href="' . get_template_directory_uri() . '/css/login.css">';
	echo '<script src="' . get_template_directory_uri() . '/js/login.js"></script>';
}
add_action('login_head', 'wpqw_login');

装飾用のCSSクラス

.login {}

#login {}

.login h1 {}
.login h1 a {}

.login #login_error {}
.login .message {}
.login .success {}

.login form {}
.login form p {}
.login label {}
.login form .input {}
.login input[type=text] {}
.login input[type=password] {}
.login form .forgetmenot {}
.login form .forgetmenot label {}
.login form input[type=checkbox] {}
.login form p.submit {}
.login form p.submit .wp-core-ui .button.button-large {}

.login #nav {}
.login #nav a {}
.login #nav a:hover {}
.login #backtoblog {}
.login #backtoblog a {}
.login #backtoblog a:hover {}
.login .privacy-policy-page-link {}
.login .privacy-policy-page-link a {}
.login .privacy-policy-page-link a:hover {}

WordPress 4.9.6より、EU一般データ保護規則（GDPR）で、特定の状況にあるサイトは、プライバシーポリシーの設定が必須となりました。
プライバシーポリシーページの設定をした場合、30〜32行目のCSSで調整してください。

ロゴのリンク先を変更する

サイトトップへリンクする場合

function wpqw_login_logolink() {
	return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'wpqw_login_logolink' );

URLで指定する場合

function wpqw_login_logolink() {
	return 'https://example.com/';
}
add_filter( 'login_headerurl', 'wpqw_login_logolink' );

カスタム例のサンプルCSS

ログイン画面カスタマイズ情報

.login {
	background: url( "../images/bg.jpg" ) no-repeat center center;
	background-size: cover;
}

#login {}

.login h1 {}
.login h1 a {
	background: url( "../images/logo.svg" ) no-repeat center center;
	background-size: 84px 84px;
}

.login #login_error {}
.login .message {}
.login .success {}

.login form {
	border-radius: 10px;
	background-color: rgba(0, 0, 0, .5);
}
.login form p {}
.login label { color: #fff; }
.login form .input {}
.login input[type=text] {}
.login input[type=password] {}
.login form .forgetmenot {}
.login form .forgetmenot label {}
.login form input[type=checkbox] {}
.login form p.submit {}
.login form p.submit .wp-core-ui .button.button-large {
	border: solid 2px #fff;
	box-shadow: none;
	background: transparent;
}

.login #nav {}
.login #nav a { color: #fff; }
.login #nav a:hover {}
.login #backtoblog {}
.login #backtoblog a { color: #fff; }
.login #backtoblog a:hover {}
.login .privacy-policy-page-link {}
.login .privacy-policy-page-link a { color: #fff; }
.login .privacy-policy-page-link a:hover {}

最後に

制作会社の方は、汎用性の高い基本パターンを用意しておき、デフォルト画面を避けるだけで、お客様の満足度アップ＆UIやUXの向上が図れます。
せめてロゴとリンク先は変えておきたい所ですね。