WordPressのログイン画面をカスタマイズする方法

当ブログのログイン画面をカスタマイズしたのでその方法をご紹介。

ビフォーアフター

ロゴのリンク先変更

デフォルトでWordPressのロゴのリンク先はhttps://ja.wordpress.org/になっているので、それをサイトトップのURLに変更します。

function change_login_header_url( $login_header_url ) {
	$login_header_url = home_url();
	return $login_header_url;
}
add_filter( 'login_headerurl', 'change_login_header_url', 10, 1 );

ログイン画面用のCSSを読み込む

ログイン画面で使用するCSSファイルを任意のディレクトリに作成し、それをログイン画面で読み込みます。
※上書きするクラス等はデベロッパーツールなどを開いて確認してください。

function enqueue_login_style() {
	wp_enqueue_style( 'login-style', get_theme_file_uri() . '/assets/css/login.css', array( 'login' ), false );
	}
add_action( 'login_enqueue_scripts', 'enqueue_login_style', 1 );

wp_enqueue_styleの第三引数にはWordPressがデフォルトで読み込んでいるログイン用CSSのハンドル名「login」を指定してそれより後に読み込まれるようにしています。