WordPressには、固定ページや投稿にパスワードを設定し、限られた人だけが内容を閲覧できる「パスワード保護」機能があります。しかし、パスワードを設定したにもかかわらず、ページの内容がそのまま表示されてしまう場合があります。

今回は、特定の固定ページにパスワード保護を設定した際、認証前でもコンテンツが表示されてしまう問題について対応しました。原因は、ページ独自のテンプレートで表示している内容に、パスワード認証の判定が適用されていなかったことでした。

あわせて、パスワード入力フォームのデザイン調整と、英語ページでの表示文言の変更も行いました。WordPressの標準機能を活用しながら、既存のページ構成に合わせて表示を制御した事例をご紹介します。

今回のご相談内容

今回のご相談は、WordPressで作成された特定の固定ページについて、パスワードを知っている人だけが閲覧できるようにしたいというものでした。

会員ごとにIDやパスワードを発行するログインシステムではなく、共通のパスワードを入力した人だけがページの内容を確認できる仕組みをご希望でした。そのため、新たな会員管理プラグインなどは導入せず、WordPressに標準搭載されている「パスワード保護」機能を利用する方針としました。

また、対象のWebサイトには日本語ページと英語ページが用意されていたため、それぞれのページで適切な言語の案内を表示することも必要でした。

発生していた症状・エラー内容

WordPressの管理画面から対象の固定ページを「パスワード保護」に設定しましたが、ブラウザのシークレットモードでページを確認したところ、パスワードを入力していない状態でもコンテンツが表示されていました。

通常、パスワード保護が適切に機能していれば、認証前は保護対象の本文が表示されず、代わりにパスワード入力フォームが表示されます。しかし、今回のページでは期待した表示制御が行われていませんでした。

その後、パスワード入力フォームを表示できるようにしたところ、別の問題も確認されました。送信ボタンの背景や枠線が表示されず、「確定」という文字だけが不自然な位置に配置されていたのです。

さらに、英語ページでもパスワード入力時の説明文が日本語のまま表示されており、英語で閲覧する利用者にとって分かりにくい状態となっていました。

原因の特定ポイント

まず確認したのは、WordPressのパスワード保護機能が、どの範囲のコンテンツに適用されるのかという点です。

WordPress標準のパスワード保護は、主に投稿や固定ページの本文を保護する仕組みです。通常の本文表示では認証状態に応じた制御が行われますが、独自のPHPテンプレートを使用している場合、本文以外の情報がそのまま出力されることがあります。

今回のページでも、独自テンプレートによるコンテンツの出力に対して、パスワード認証の判定を追加する必要がありました。

WordPressには、対象の投稿や固定ページがパスワードによって保護されており、まだ認証されていないかを確認する post_password_required() という関数があります。この関数を使用することで、パスワード入力前と認証後で表示する内容を切り替えられます。

また、フォームのデザインについては、WordPressが標準で出力するHTMLと、既存テーマのCSSとの組み合わせが影響していると考えられました。英語ページの文言についても、フォームの出力内容をページごとに切り替える必要がありました。

実際に行った対応内容

最初に、対象の固定ページにWordPress標準のパスワード保護を設定しました。そのうえで、ページの表示に使用しているPHPテンプレートに、認証状態を確認する処理を追加しました。

具体的には、post_password_required() で認証状態を判定し、パスワードが必要な場合は get_the_password_form() で入力フォームを表示する構成としました。認証済みの場合にのみ、通常のページコンテンツを出力する仕組みです。

これにより、既存のページ構成を大きく変更することなく、パスワードによる表示制御を組み込むことができました。

続いて、パスワード入力フォームのデザインを調整しました。標準フォームには .post-password-form というCSSクラスが付与されるため、このクラスを対象に入力欄と送信ボタンのスタイルを指定しました。

入力欄の幅や余白、枠線を整えるとともに、送信ボタンには背景色や文字色、ホバー時の表示を設定しました。対象をパスワード入力フォーム内に限定することで、ほかのフォームへの影響を抑える構成としています。

最後に、英語ページの表示文言を変更しました。

WordPressには、パスワード入力フォームのHTMLを変更できる the_password_form というフィルターが用意されています。今回はこの仕組みを利用し、英語ページに該当する場合だけ、パスワード保護の説明文や入力欄のラベル、送信ボタンの表記を英語に置き換える処理を追加しました。

日本語ページには従来の日本語表記を残し、英語ページだけを変更することで、それぞれの言語に合わせた案内ができるように調整しました。

対応後の結果・改善点

今回の対応により、パスワード認証前には入力フォームを表示し、認証後にページのコンテンツを表示する構成へ変更できました。

また、パスワード入力フォームの送信ボタンについても、CSSによって見た目を整える対応を行いました。文字だけが表示されていた状態から、ボタンとして認識しやすいデザインに変更することで、操作性の改善を図っています。

英語ページについても、パスワード保護の説明文や入力フォームの表記を英語に切り替える処理を追加しました。

なお、パスワード保護はページ本文の表示を制御するものであり、ページ内で使用している画像やPDFなどのファイル自体への直接アクセスまで制限するものではありません。ファイルそのものを非公開にする必要がある場合は、別途アクセス制御を検討する必要があります。

今回の対応から分かったこと

今回の事例で重要だったのは、WordPressの標準機能が正常に設定されていても、サイトの制作方法によっては期待した動作にならない場合があるという点です。

WordPressでは、管理画面で設定した内容と、実際のWebページを表示するテンプレートの処理が組み合わさって動作しています。そのため、管理画面でパスワード保護を有効にするだけでは、独自に出力しているコンテンツまで自動的に保護されるとは限りません。

また、機能が正常に動作することと、利用者にとって分かりやすい表示になっていることは別の問題です。今回も、パスワード入力フォームの表示制御に加えて、ボタンのデザインや英語表記の調整が必要となりました。

単にパスワードを設定するだけでなく、認証前後の表示内容や操作画面まで確認することが大切だと分かる事例でした。

同様のトラブルを防ぐために

WordPressで固定ページにパスワード保護を設定する際は、管理画面で設定を保存した後、実際のページで動作を確認することをおすすめします。

特に確認しておきたいのは、パスワードを入力していない状態で保護対象の情報が表示されないかという点です。通常のブラウザでは、以前に入力したパスワードの認証情報がCookieに保存されている場合があるため、シークレットモードなどを利用して確認すると分かりやすくなります。

また、独自テンプレートやカスタムフィールドを使用しているページでは、WordPress標準の本文表示とは異なる方法で情報が出力されている可能性があります。パスワード保護が効かない場合は、設定だけでなくテンプレート側の表示処理も確認する必要があります。

多言語サイトの場合は、日本語ページだけでなく、英語ページなどでもフォームの説明文やボタンが適切に表示されているか確認しておくと安心です。

メディアプライムスタイルのサポートについて

メディアプライムスタイルでは、WordPressの保守・運用を通じて、既存サイトの機能調整や表示不具合への対応を行っています。

今回のように、WordPressに標準搭載されている機能でも、サイト独自の構成によっては追加の調整が必要になることがあります。

そのような場合も、現在のサイト構成や動作を確認し、既存の機能を活かしながら対応方法を検討しています。

「パスワードを設定したのにページが表示されてしまう」「特定のページだけ閲覧を制限したい」「日本語と英語でフォームの表示を切り替えたい」など、WordPressの運用でお困りのことがありましたら、お気軽にご相談ください。