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

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

目次非表示

カスタム例
ロゴのリンク先を変更する
- サイトトップへリンクする場合
- 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