WordPress固定ページのパスワード保護フォームをオリジナルデザインに差し替える方法

WordPress固定ページのパスワード保護フォームをオリジナルデザインに差し替える方法

WordPressでは、固定ページや投稿ページを「パスワード保護」に設定することで、特定の閲覧者だけにページ内容を公開できます。
このときに表示される「パスワード入力フォーム」は非常にシンプルなデザインですが、
ブランドやサイトデザインに合わせて自由にカスタマイズしたい場合があります。

方法の一つとして、post_password_form フィルターを使う方法があります。
しかし、オリジナルテーマでは「関数(フィルター)を追加しても反映されない」ケースが少なくありません。

この記事では、フィルターが反映されない理由と、その根本的な対処法を具体的なコード例とともに解説します。

目次

1. 基本のカスタマイズ方法:post_password_formフィルター

まず、WordPressが出力する標準のフォームを置き換えるには、
以下のように functions.php にフィルターを追加します。

このコードのformタグ内を変更すれば、好きなデザインに変更することができます。

<?php

/**
 * パスワード保護フォームをオリジナルデザインに変更
 */

function my_custom_password_form()
{
	error_log('Custom password form called'); // debug.logに出るか確認用

	global $post;
	$label        = 'pwbox-' . (empty($post->ID) ? wp_rand() : $post->ID);
	$action_url   = esc_url(site_url('wp-login.php?action=postpass', 'login_post'));
	$redirect_url = esc_url(get_permalink());
	$template_uri = esc_url(get_template_directory_uri());

	return '
	<form action="' . $action_url . '" class="p-password-form" method="post">
		<input type="hidden" name="redirect_to" value="' . $redirect_url . '">
		<p class="p-password-form__title">web注文フォーム</p>
		<div class="p-password-form__input">
			<input class="p-password-form__input-password" name="post_password" id="' . $label . '" type="password" spellcheck="false" required size="20">
			<input class="p-password-form__input-submit" type="submit" name="Submit" value="ログイン">
		</div>
		<p class="p-password-form__text">専用パスワードを入力し、ログインしてください。</p>
	</form>';

	return $form;
}
add_filter('post_password_form', 'my_custom_password_form', 999);

これで通常は、パスワード保護ページにアクセスすると上記HTMLが出力されるはずです。

2. フィルターを設定しても反映されない!?

実際にChatGPTの情報をもとに設定したのに、
「functions.php に書いたのに変わらない」「標準フォームのまま」といったトラブルが起こりました…。

主な原因:そもそも「post_password_form()」を呼び出していなかった。

原因は、オリジナルテーマでは、「post_password_form()」を呼び出す設定になっていませんでした。

WordPressがフォームを出すタイミングは the_content() が呼ばれた時 です。
パスワード保護が呼び出されるタイミングが the_content() の前なので、
テーマによっては、post_password_form フィルターがそもそも呼び出されない設定になっています。

3. 原因の見分け方

以下のコードを、page.phpなどパスワード付きページのテンプレートに一時的に入れてみましょう。

<?php
if ( post_password_required() ) {
    echo '<p>パスワードフォームが呼ばれるはずの状態です。</p>';
    echo get_the_password_form();
} else {
    echo '<p>すでにパスワード入力済みです。</p>';
}

これで「パスワードフォームが呼ばれるはずの状態です。」が出るのに、
post_password_form のカスタムHTMLが出ない場合、
post_password_formフィルターを呼び出していないことが確定です。

4. 確実に反映させる方法

page.php などのテンプレートファイルで、 次のように 直接フォーム関数を呼び出す条件分岐 を追加します。

<?php
// パスワード保護ページかどうかをチェック
if (post_password_required()) {
	// カスタムパスワードフォームを表示
	if (function_exists('my_custom_password_form')) {
		echo my_custom_password_form();
	} else {
		echo get_the_password_form();
	}
} else {
	the_content();
} ?>

こうすることで、
パスワード保護ページなら、my_custom_password_form()に設定したpost_password_form フィルターを強制的に出力できるようになります。

5. まとめ

独自構造のテーマなら、「テンプレート内で my_custom_password_form() を直接呼ぶ」ようにしましょう。

同じ問題で悩んでいる方の参考になれば幸いです。

WordPress固定ページのパスワード保護フォームをオリジナルデザインに差し替える方法

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
目次