パスワードリセットページのデザインをカスタマイズする

こんにちは、(株) オルタ WordPress担当の篠原です！
今回は、WordPressサイトで重要な役割を果たす「パスワードリセットページ」の文言をカスタマイズする方法について紹介します。
ユーザーにとってわかりやすく、親切なメッセージを表示することは、サイトの信頼性を高める上で重要です。

パスワードリセットページの文言をカスタマイズする理由

WordPressのデフォルト設定では、パスワードリセットページに次のようなメッセージが表示されます。

「ユーザー名、またはメールアドレスを入力してください。パスワードのリセット手順が記されたメールが送信されます。」

確かにこれでも機能は果たせますが、サイトのブランドや利用者のニーズに合わせて、もう少し親切なメッセージに変更したいと考えたことはありませんか？
特に、非技術的なユーザーが利用するサイトでは、「ユーザー名」という言葉が混乱を招く場合もあります。そのため、明確で具体的なメッセージにカスタマイズすることで、利用者の不安を減らすことができます。

どのようなケースで役立つのか？

例えば、以下のようなユースケースがあります。

1. ブランドイメージを統一したい場合
   サイト全体で統一感のあるデザインや文言を採用することで、ユーザーに一貫した印象を与えることができます。特に、パスワードリセットのメッセージを、他の通知やガイドラインと統一することで、よりプロフェッショナルな印象を与えられます。
2. 非技術的なユーザーが多い場合
   「ユーザー名」と聞いてもピンとこない方が多い場合は、「メールアドレス」のみを入力させるように促すメッセージに変更することで、迷いを減らせます。
3. サポートコストを削減したい場合
   パスワードリセットに関する問い合わせを減らすことができます。ユーザーが簡単に手順を理解できれば、サポートの負担を軽減できます。

どのようにカスタマイズするのか？

WordPressには、メッセージを簡単に変更できる便利なフィルター login_message があります。このフィルターを利用すれば、コードを少し追加するだけで、パスワードリセットページの文言を自由にカスタマイズ可能です。

実際にコードを書いてみよう

以下のコードをテーマの functions.php ファイルに追加することで、パスワードリセットページのメッセージを変更できます。

// -------------------------------------------------------------------
// パスワードリセットページの文言
// -------------------------------------------------------------------
add_filter('login_message', function ($message) {

    // 【オリジナル】
    // <div class="notice notice-info message"><p>ユーザー名、またはメールアドレスを入力してください。パスワードのリセット手順が記されたメールが送信されます。</p></div>

    ob_start();
    ?>
        <div class="notice notice-info message">
            <p>
                パスワード再発行
            </p>
            <p>
                メールアドレスを入力してください。<br>
                パスワードのリセット手順が記されたメールが送信されます。
            </p>
        </div>
    <?php
    return ob_get_clean();
});

コードのポイント解説

1. add_filterでフィルターを登録
   このコードでは、login_message フィルターを使っています。このフィルターはログインページやパスワードリセットページのメッセージを変更するために使用します。
2. HTMLを生成して返す
   ob_start を利用してHTMLを生成し、ob_get_clean でその内容を返します。これにより、複数行のHTMLを安全に扱うことができます。
3. ユーザーにわかりやすいメッセージ
   「ユーザー名」という言葉を省略し、メールアドレスのみを入力させる形にすることで、利用者が迷うことなく操作できるデザインになっています。

結論

WordPressの標準機能であるフィルター login_message を使うことで、パスワードリセットページの文言を簡単に変更することができました。ユーザー体験を向上させるだけでなく、サイトのブランドイメージの向上やサポートコストの削減にもつながります。

あなたのWordPressサイトも、ぜひこのカスタマイズを試してみてください！
さらに柔軟な対応が必要な場合は、他のフィルターやアクションフックも活用して、サイトをより便利に進化させましょう。

開発・技術サポート

ということで宣伝です。

弊社では有償でWordpress案件も行っていますので、お気軽にお問い合わせください。
WordPressは2007年（バージョン2.2）頃から触り続けてきていることもあり得意中の得意です。

特にプログラム開発が必要になるようなカスタマイズは遠慮なくご相談ください。
リニューアルやサーバ引越しの技術サポートも行っております。

デザイナーの方、広告業の方、ディレクター専門の方などお互いの得意分野を生かして長いお付き合いの出来る方を募集しています。

お気軽にお問い合わせください。