WordPressのパスワードリセットページをカスタムデザインにする手順

WordPressのパスワードリセット画面をサイトのデザインに合わせたいときは、本体の画面（wp-login.php）の処理はそのまま使い、見た目だけをCSSで整えるのが最も安全です。この記事では、リセット関連の画面だけにスタイルを当てる方法、「パスワードをお忘れですか？」のリンク先を固定ページのフォームに差し替える方法、そして自作を避けるべき部分を、コード例とともに説明します。

パスワードリセットに関わる画面を整理する

パスワードリセットは、次の3つの画面で構成されています。どれもログイン画面と同じ wp-login.php が action パラメーターで表示を切り替えています。

2つ目の画面では、メールに含まれる鍵（key）が正しいか、有効期限内かを本体が検証しています。パスワードの強度メーターもここで動いています。この検証を自前で書き直すと、期限切れの鍵が通る、他人のパスワードを変更できるといった深刻な不具合につながりかねません。そこで、この記事では「見た目は変える、検証は本体に任せる」方針で進めます。

作業前の準備

• 子テーマかmu-pluginに書く：親テーマの functions.php に書くと、テーマ更新で消えます。デザイン用のCSSファイルを置くなら子テーマが便利です。
• バックアップとステージング：ログイン画面まわりの変更でエラーが出ると、管理画面に入れなくなることがあります。変更前にバックアップを取り、ステージング環境で試してから本番に反映します。
• 復旧手段の確保：もし画面が表示されなくなったら、FTPなどで追加したファイルを外す、または子テーマのフォルダ名を一時的に変えると元に戻せます。
• 別のブラウザで確認：作業中のブラウザはログインしたままにし、確認はシークレットウィンドウなどログアウト状態のブラウザで行います。

方法1：リセット画面だけにCSSを当てる

wp-login.php の body 要素には、表示中の画面に応じて login-action-lostpassword、login-action-rp、login-action-resetpass といったクラスが付きます。これを使うと、通常のログイン画面とは別に、リセット関連の画面だけデザインを変えられます。

まず、子テーマの functions.php で、ログイン画面用のスタイルシートを読み込みます。

<?php
// ログイン関連画面に独自CSSを読み込む
add_action( 'login_enqueue_scripts', function () {
	wp_enqueue_style(
		'mytheme-login',
		get_stylesheet_directory_uri() . '/css/login.css',
		array( 'login' ), // 本体のログイン用CSSの後に読み込む
		'1.0.0'
	);
} );

// ロゴのリンク先と代替テキストをサイトのものにする
add_filter( 'login_headerurl', function () {
	return home_url( '/' );
} );
add_filter( 'login_headertext', function () {
	return get_bloginfo( 'name' );
} );

次に、子テーマの css/login.css を作成します。

/* リセット関連の3画面に共通の背景 */
body.login-action-lostpassword,
body.login-action-rp,
body.login-action-resetpass {
	background: #f3f5f7;
}

/* ロゴ画像を差し替える（画像は子テーマの images/ に置く） */
.login h1 a {
	background-image: url("../images/logo.png");
	background-size: contain;
	width: 220px;
	height: 72px;
}

/* フォームの見た目 */
body.login-action-lostpassword #lostpasswordform,
body.login-action-rp #resetpassform {
	border-radius: 8px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* ボタンの色をサイトのテーマカラーに合わせる */
body.login-action-lostpassword .button-primary,
body.login-action-rp .button-primary {
	background: #1f6feb;
	border-color: #1f6feb;
}

依存関係に login を指定しているのは、本体のCSSより後に読み込んで上書きしやすくするためです。それでも反映されない場合は、ブラウザの開発者ツールで対象要素のセレクターを確認し、本体側より詳細度の高いセレクターにします。フォームのIDやクラス名はバージョンで変わる可能性があるため、WordPressの更新後は表示を確認してください（2026年10月現在の構成で記載しています）。

ロゴのリンク先を変える login_headerurl と、代替テキストを変える login_headertext は、ログイン画面全体に効きます。古い記事で見かける login_headertitle は非推奨になっているため、login_headertext を使います。

方法2：申請フォームを固定ページに置く

「サイトのヘッダーやフッターが付いたページでリセットを申請させたい」という場合は、申請フォームだけを固定ページに置き、送信先は本体の wp-login.php?action=lostpassword にする方法があります。メールの送信や鍵の発行は本体の処理がそのまま行います。

<?php
// [mytheme_lost_password] ショートコードで申請フォームを表示する
add_shortcode( 'mytheme_lost_password', function () {
	if ( is_user_logged_in() ) {
		return '<p>' . esc_html__( 'すでにログインしています。', 'mytheme' ) . '</p>';
	}

	$output = '';
	if ( isset( $_GET['sent'] ) ) {
		// 登録の有無が分からない表現にする
		$output .= '<p class="mytheme-notice">' . esc_html__( '登録されている場合は、再設定用のメールを送信しました。', 'mytheme' ) . '</p>';
	}

	$action   = network_site_url( 'wp-login.php?action=lostpassword', 'login_post' );
	$redirect = add_query_arg( 'sent', '1', get_permalink() );

	ob_start();
	?>
	<form class="mytheme-lostpassword" method="post" action="<?php echo esc_url( $action ); ?>">
		<label for="mytheme-user-login"><?php esc_html_e( 'ユーザー名またはメールアドレス', 'mytheme' ); ?></label>
		<input type="text" name="user_login" id="mytheme-user-login" autocomplete="username" required>
		<input type="hidden" name="redirect_to" value="<?php echo esc_url( $redirect ); ?>">
		<?php do_action( 'lostpassword_form' ); // CAPTCHA等のプラグインが項目を追加できるようにする ?>
		<button type="submit"><?php esc_html_e( '再設定用のリンクを送信', 'mytheme' ); ?></button>
	</form>
	<?php
	return $output . ob_get_clean();
} );

// 「パスワードをお忘れですか？」のリンク先を固定ページに変える
add_filter( 'lostpassword_url', function ( $url, $redirect ) {
	return home_url( '/lost-password/' );
}, 10, 2 );

「lost-password」というスラッグの固定ページを作り、本文に [mytheme_lost_password] を入れれば完成です。送信が成功すると、本体は redirect_to に指定した同じサイト内のURLへ戻します。入力に誤りがあった場合は本体のリセット画面でエラーが表示されるため、方法1のCSSも併せて当てておくと見た目の差が小さくなります。

このコードでは $_GET['sent'] の値そのものは出力せず、存在するかどうかだけを見ています。利用者が入力した値をページに出す場合は、esc_html() などでエスケープしてから出力してください。また do_action( 'lostpassword_form' ) を残しておくと、CAPTCHAやセキュリティプラグインが申請フォームに項目を追加できます。ただしプラグインによっては専用のスクリプト読み込みが必要なため、導入済みのプラグインと組み合わせて動作を確認します。

メール内のリンク先は本体の画面のままにする

再設定メールのリンクは、本体の wp-login.php?action=rp を指しています。この画面まで固定ページで作り直そうとすると、check_password_reset_key() による鍵の検証、reset_password() による更新、エラー時の処理、強度メーターの読み込みなどを自分で正しく組み立てる必要があります。デザインのためだけにそこまで行う利点は小さいため、新しいパスワードの入力画面は方法1のCSSで整えるのが現実的です。

どうしてもすべての画面をサイトのデザインに統一したい場合は、自作ではなく、この機能を備えたプラグインを検討してください。たとえば LoginPress はカスタマイザーからログイン関連画面のデザインを変更でき、Ultimate Member などの会員系プラグインは独自のパスワードリセットページを用意しています。対応範囲や設定画面の構成はプラグインのバージョンで異なるため、導入前に公式ドキュメントで確認します。

公開前に確認すること

• 一連の流れを最後まで試す：ログアウト状態で申請し、届いたメールのリンクから新しいパスワードを設定し、そのパスワードでログインできるかまで確認します。
• 存在しないユーザーで試す：本体はユーザーが見つからない場合にエラーを表示します。登録の有無を知られたくない場合は、セキュリティプラグインの設定で表示を抑えられるかを確認します。
• キャッシュの除外：申請フォームの固定ページや wp-login.php がページキャッシュの対象になっていると、メッセージが正しく表示されないことがあります。キャッシュプラグインやCDNの除外設定を確認します。
• ログインURL変更プラグインとの相性：ログインURLを変えるプラグインを使っている場合、フォームの送信先が想定どおりに変換されるかを確認します。
• 試行回数の制限：リセット申請は、悪用されると大量のメール送信につながります。ログイン試行回数を制限するプラグインが申請画面も対象にしているかを確認しておくと安心です。

まとめ

• リセット関連の画面は wp-login.php の3つの表示で構成され、鍵の検証は本体が担っている。
• デザインの変更は login_enqueue_scripts でCSSを読み込み、login-action-lostpassword などのクラスで対象を絞るのが安全。
• 申請フォームだけを固定ページに置き、送信先を本体にする方法なら、処理を自作せずにサイトのデザインに合わせられる。
• 新しいパスワードの入力画面まで作り直すのは避け、必要なら実績のあるプラグインを使う。
• 子テーマかmu-pluginに書き、バックアップとステージングでの確認、ログアウト状態での通し確認を行う。

• WordPressのパスワードリセットメールをカスタマイズする方法
• WordPressのパスワード強度ポリシーを設定する方法