WordPressのログインページをカスタマイズする方法｜ロゴ・背景・メッセージをコードで変更

WordPress のログインページ（wp-login.php）には、初期状態で WordPress のロゴが表示されます。企業サイトや制作したクライアントのサイトでは、自社のロゴや色に合わせたいことがあります。ログインページには専用のフックが用意されているので、コアのファイルを書き換えずに変更できます。

この記事のコードは、2026年11月時点の WordPress のソース（wp-login.php）でフックの名前と動きを確認しています。

コードを置く場所

次のどちらかに書きます。

• 子テーマの functions.php: テーマを変えるとカスタマイズも外れます。デザインをテーマに合わせたい場合に向いています。
• wp-content/mu-plugins/ の PHP ファイル: テーマを変えても残ります。ファイルの先頭に <?php を書いて保存すれば自動で読み込まれます。

親テーマの functions.php に直接書くと、テーマの更新で消えます。

ロゴとリンク先を変える

ロゴは #login h1 a の背景画像として表示されています（初期値は幅・高さ 84px）。login_enqueue_scripts アクションで CSS を出力して、背景画像と大きさを上書きします。

ロゴのリンク先は login_headerurl フィルター、リンクの文字（スクリーンリーダーが読み上げる文字）は login_headertext フィルターで変えます。初期状態ではリンク先が wordpress.org、文字が「Powered by WordPress」です。

<?php
// ログインページのロゴを子テーマの画像に差し替える。
add_action( 'login_enqueue_scripts', function () {
	$logo_url = get_stylesheet_directory_uri() . '/images/login-logo.png';
	?>
	<style>
		#login h1 a {
			background-image: url('<?php echo esc_url( $logo_url ); ?>');
			background-size: contain;
			background-position: center;
			background-repeat: no-repeat;
			width: 240px;
			height: 80px;
		}
	</style>
	<?php
} );

// ロゴのリンク先をサイトのトップページにする。
add_filter( 'login_headerurl', function () {
	return home_url( '/' );
} );

// ロゴのリンクの文字をサイト名にする。
add_filter( 'login_headertext', function () {
	return get_bloginfo( 'name' );
} );

画像は子テーマの images/login-logo.png に置きます。width と height は画像の縦横比に合わせて調整してください。

以前使われていた login_headertitle フィルター（ロゴの title 属性）は WordPress 5.2 で非推奨になりました。アクセシビリティの観点から、title 属性ではなくリンクの文字を変える login_headertext を使います。

背景色とフォームのデザインを変える

CSS が長くなる場合は、ファイルに分けて読み込むと管理しやすくなります。子テーマに css/login.css を作り、login_enqueue_scripts で wp_enqueue_style() を使って読み込みます。依存先に WordPress 標準の login スタイルを指定すると、標準の CSS のあとに読み込まれて上書きしやすくなります。

<?php
add_action( 'login_enqueue_scripts', function () {
	$path = get_stylesheet_directory() . '/css/login.css';
	wp_enqueue_style(
		'my-login',
		get_stylesheet_directory_uri() . '/css/login.css',
		array( 'login' ),
		file_exists( $path ) ? (string) filemtime( $path ) : null
	);
} );

css/login.css の例です。

body.login {
	background-color: #1a1a2e;
}

#login {
	width: 360px;
}

.login form {
	border-radius: 8px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
	padding: 32px;
}

.login label {
	color: #1d2327;
	font-weight: 600;
}

.login #nav a,
.login #backtoblog a {
	color: #ffffff;
}

#wp-submit {
	background: #0073aa;
	border-color: #0073aa;
	border-radius: 4px;
}

#wp-submit:hover {
	background: #005a87;
	border-color: #005a87;
}

背景を暗い色にすると、フォームの下にあるパスワード再設定のリンク（#nav）とサイトへ戻るリンク（#backtoblog）が読みにくくなるため、色も合わせて変えています。

フォームの上に案内文を出す

login_message フィルターで、ログインフォームの上に文章を表示できます。message クラスの p で囲むと、WordPress 標準のお知らせと同じ見た目になります。

<?php
add_filter( 'login_message', function ( $message ) {
	// パスワードの再設定画面などには出さず、通常のログイン画面だけに出す。
	$action = isset( $_REQUEST['action'] ) ? sanitize_key( $_REQUEST['action'] ) : 'login';
	if ( 'login' !== $action ) {
		return $message;
	}

	$notice = '<p class="message">ログインできない場合は、サイト管理者にお問い合わせください。</p>';
	return $notice . $message;
} );

login_message はパスワードの再設定画面など、wp-login.php のほかの画面でも使われます。上の例では、通常のログイン画面だけに表示するよう action を確認しています。

フッターに文字を出す

login_footer はアクションです（フィルターではありません）。ログインフォームの枠と言語切り替えのあと、</body> の直前で実行されます。

<?php
add_action( 'login_footer', function () {
	echo '<p style="text-align:center;color:#ffffff;">&copy; '
		. esc_html( wp_date( 'Y' ) . ' ' . get_bloginfo( 'name' ) )
		. '</p>';
} );

年は、サイトのタイムゾーン設定に従う wp_date() で出しています。

言語切り替えを非表示にする

サイトに複数の言語ファイルがあると、ログインページの下に言語の切り替えが表示されます（WordPress 5.9 以降）。不要なら login_display_language_dropdown フィルターで消せます。

<?php
add_filter( 'login_display_language_dropdown', '__return_false' );

JavaScript を読み込む

ログインページで JavaScript を使いたい場合も、login_enqueue_scripts で読み込みます。

<?php
add_action( 'login_enqueue_scripts', function () {
	$path = get_stylesheet_directory() . '/js/login.js';
	if ( ! file_exists( $path ) ) {
		return;
	}
	wp_enqueue_script(
		'my-login',
		get_stylesheet_directory_uri() . '/js/login.js',
		array(),
		(string) filemtime( $path ),
		true
	);
} );

使ったフックの一覧

プラグインで変える場合

コードを書かずに変えたい場合は、ログインページ用のプラグインがあります。wordpress.org で配布されている主なものは次のとおりです（2026年11月時点）。

• LoginPress（スラッグ loginpress）
• Custom Login Page Customizer（スラッグ login-customizer）
• Custom Login（スラッグ custom-login）

いずれも管理画面でロゴや背景、色を設定できます。プラグインとこの記事のコードを同時に使うと、CSS が競合して思った表示にならないことがあります。どちらか一方にしてください。

注意点

• ログインページの見た目を変えても、セキュリティは強くなりません。不正ログイン対策には、ログイン試行回数の制限や二段階認証を使います（WordPressのログイン試行回数を制限する方法、WordPressの二段階認証を設定する方法）。
• WordPress の更新で、ログインページの HTML 構造やクラス名が変わることがあります。更新後は表示を確認してください。
• ロゴや背景の画像を大きくしすぎると、ログインページの表示が遅くなります。

まとめ

• 見た目は login_enqueue_scripts で CSS を読み込んで変えます。
• ロゴのリンク先と文字は login_headerurl と login_headertext で変えます。
• 案内文は login_message（フォームの上）、フッターは login_footer（アクション）で出します。
• コードは子テーマの functions.php か mu-plugins に置き、親テーマには書きません。