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

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

ビフォーアフター

WordPress ログイン画面 ビフォー
WordPress ログイン画面 アフター

ロゴのリンク先変更

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

WordPress ログイン画面のロゴ

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」を指定してそれより後に読み込まれるようにしています。