ログイン画面をカスタムする方法

ログイン画面をオリジナルにします。
ロゴマークの変更やロゴマークのリンク先を変更していきます。

目次非表示

カスタム例
ロゴのリンク先を変更する
- サイトトップへリンクする場合
- URLで指定する場合
見た目を変える
まとめ

目次へ

カスタム例

ロゴのリンク先とCSSを変更しています。

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

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

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

URLで指定する場合

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

見た目を変える

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

get_template_directory_uri() はテーマフォルダの場所に置き換わります。
JSファイルが不要な場合は、3行目を消してください。

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

装飾に使えるCSSクラスを抜粋

おおまかなCSSクラスを抜き出しました。

SCSSCSS

.login {
}
#login {	.wp-login-logo {	a {	}	}	#login-message,	#login_error {	.notice {	&.notice-info {	}	&.notice-error {	}	&.message {	}	}	}	#loginform {	.user-pass-wrap {	}	.forgetmenot {	}	label {	}	.input {	}	input[type=text] {	}	input[type=password] {	}	input[type=checkbox] {	}	p {	&.submit {	.wp-core-ui {	.button.button-large {	}	}	}	}	}	#nav {	a {	&:hover {	}	}	}	#backtoblog {	a {	&:hover {	}	}	}	.privacy-policy-page-link {	a {	&:hover {	}	}	}
}
.language-switcher {	#language-switcher {	#language-switcher-locales {	}	}
}

.login {
}
#login {
}
.wp-login-logo {
}
.wp-login-logo a {
}
#login-message,
#login_error {
}
.notice {
}
.notice-info {
}
.notice-error {
}
.message {
}
#loginform {
}
.user-pass-wrap {
}
.forgetmenot {
}
#loginform label {
}
#loginform .input {
}
#loginform input[type=text] {
}
#loginform input[type=password] {
}
#loginform input[type=checkbox] {
}
#loginform p {
}
#loginform p.submit {
}
#loginform p.submit .wp-core-ui {
}
#loginform p.submit .wp-core-ui .button.button-large {
}
#nav {
}
#nav a {
}
#nav a :hover {
}
#backtoblog {
}
#backtoblog a {
}
#backtoblog a:hover {
}
.privacy-policy-page-link {
}
.privacy-policy-page-link a {
}
.privacy-policy-page-link a:hover {
}
.language-switcher {
}
#language-switcher {
}
#language-switcher-locales {
}

最初のカスタム例の場合のCSS

SCSSCSS

.login {	position: relative;	z-index: 0;	background: url( "../images/login-bg.jpg" ) no-repeat center center;	background-size: cover;	&::before {	position: absolute;	top: -5px;	right: -5px;	bottom: -5px;	left: -5px;	z-index: -1;	background: inherit;	content: "";	filter: blur(5px);	}
}
#login {	.wp-login-logo {	a {	background: url( "../images/login-logo.png" ) no-repeat center center;	background-size: 84px 84px;	}	}	#loginform {	border-color: #0073aa;	border-radius: 10px;	background-color: rgba(0, 0, 0, .5);	label {	color: #fff;	}	p {	&.submit {	.wp-core-ui {	.button.button-large {	border: solid 2px #fff;	box-shadow: none;	background: transparent;	}	}	}	}	}	#nav {	a {	color: #fff;	}	}	#backtoblog {	a {	color: #fff;	}	}	.privacy-policy-page-link {	a {	color: #fff;	}	}
}

.login {	position: relative;	z-index: 0;	background: url("../images/login-bg.jpg") no-repeat center center;	background-size: cover;
}
.login::before {	position: absolute;	top: -5px;	right: -5px;	bottom: -5px;	left: -5px;	z-index: -1;	background: inherit;	content: "";	-webkit-filter: blur(5px);	filter: blur(5px);
}
#login .wp-login-logo a {	background: url("../images/login-logo.png") no-repeat center center;	background-size: 84px 84px;
}
#login #loginform {	border-color: #0073aa;	border-radius: 10px;	background-color: rgba(0,0,0,.5);
}
#login #loginform label {	color: #fff;
}
#login #loginform p.submit .wp-core-ui .button.button-large {	border: solid 2px #fff;	box-shadow: none;	background: rgba(0,0,0,0);
}
#login #nav a {	color: #fff;
}
#login #backtoblog a {	color: #fff;
}
#login .privacy-policy-page-link a {	color: #fff;
}

まとめ

クライアントワークでは、ロゴとリンク先の変更だけでもクライアントの満足度UPにつながります。
複数サイトの管理をしている場合も、ロゴの変更をする事でミスを防げます。

検証環境

サーバー：heteml / テーマ：検証用のオリジナルテーマ
WordPress 6.8 / PHP 8 / MySQL 8