WordPressパスワードリセットページのカスタマイズ方法

WordPressサイトでユーザーがパスワードをリセットしようとすると、美しくデザインされたサイトとは似ても似つかない一般的なフォームが表示されることを想像してみてください。これは訪問者を混乱させる可能性があり、特に会員になったり、頻繁にログインするようなサイトであればなおさらです。

私たちは、長年にわたって多くのサイトと仕事をしてきました。パスワードリセットページをサイトの他の部分と同じように見せることで、ユーザーがパスワードを変更する必要があるときに、どのように役立ち、より快適に感じるかを見てきました。

この投稿では、WordPressのパスワードリセットページの外観を変更し、ユーザーを安心させる一貫性のある視覚的に魅力的なエクスペリエンスを作成する方法を紹介します。

なぜWordPressのパスワードリセットページをカスタマイズするのか？

WordPressウェブサイトには、ユーザーアカウントの作成、ログイン、パスワードのリセットができる強力なユーザー管理システムが付属しています。

これらのページには、デフォルトでWordPressのブランドとロゴが表示されます。特に、あなたやあなたのチームだけが管理エリアにログ記録している場合、これは大きな問題ではありません。

ただし、eコマースストアや会員制サイトを運営している場合は、カスタムにもログインが必要な場合があります。

これらのページをあなたのサイトのデザインやブランディングに一致するようにカスタマイズすることで、より良いユーザーエクスペリエンスを提供することができます。必要であれば、ロゴや最近の投稿リストなどの追加コンテンツを追加することもできます。

カスタムユーザー登録フォームと ログインページを追加する方法については、すでに他のガイドをご覧になったかもしれません。

それでは、パスワード再設定ページのカスタマイズ方法を見てみましょう。以下のクイックリンクから、お好きな方法をお選びください：

方法1: Formidable Formsを使ってパスワードリセットページをカスタマイズする (簡単)

WordPress のパスワードリセットページを置き換える最も簡単な方法はFormidable Forms を使うことです。このプラグインはショートコードを使って初期設定のパスワードリセットページを置き換えることができます。

この方法では、パスワードリセットフォームを編集することはできませんが、その周りに独自のコンテンツを追加することができます。例えば、WordPressの標準投稿エディターを使ってテキストや画像、その他のコンテンツを追加することができます。

まず、Formidable Formsプラグインをインストールする必要があります。さらに詳しく知りたい方は、WordPress プラグインのインストール方法のステップバイステップガイドをご覧ください。

有効化した後、Formidable Forms Lite をインストールする必要があります。この無料プラグインはプレミアムプラグインのより高度な機能のコアとなる基礎を提供します。

それができたら、ダッシュボードのFormidable Forms ” グローバル設定 ページに行き、’クリックしてライセンスキーを手動で入力’ を選択します。

ライセンスキーは Formidable Forms サイトのアカウントにあります。この情報を入力したら、「ライセンスを保存」ボタンをクリックしてください。

Formidable ” Add-Ons にアクセスしてユーザー登録アドオンをインストールします。この画面でユーザー登録アドオンを見つけ、「インストール」ボタンをクリックしてください。

これでカスタマイザーページを作る準備ができました。

まず、ページにタイトルをつけ、＋ボタンをクリックする。表示されるポップアップで、「ショートコード」と入力し始める。

右のブロックをクリックするだけでページに追加できます。

以下のショートコードを追加できます：[frm-reset-password]を追加します。

この時点で、パスワードリセットページに表示したい他のコンテンツを追加することができます。

ページのレイアウトに満足したら、’Publish’ボタンをクリックして公開します。

最後に、デフォルトのパスワードリセットページではなく、このページを使うようにWordPressに指示する必要があります。Formidable ” Global Settingsにアクセスして、メニューの ‘Registration’ タブをクリックしてください。

ここから、’Reset Password Page’ ドロップダウンを開き、先ほど作成したページを選択します。

画面上部の「更新」ボタンをクリックし、設定を保存することをお忘れなく。

これでWordPressサイトにアクセスし、カスタマイザーのパスワードリセットページを実際に見ることができます。

方法2：「テーマ・マイ・ログイン」を使ってすべての会員ページをカスタマイズする（無料）

一貫したユーザーエクスペリエンスを提供するには、すべての会員ページで同じスタイルを使用することをお勧めします。Theme My Loginは無料のプラグインで、WordPressダッシュボード、ログイン、ログアウト、登録、パスワード忘れ、パスワードリセットのビルトインページを置き換えることができます。

最もカスタマイズしやすいソリューションではありませんが、すべてのページがWordPressテーマを使用します。

最初に行う必要があるのは、Theme My Loginプラグインをインストールして有効化することです。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

有効化したTheme My Loginは、カスタムログイン、ログアウト、登録、パスワード紛失、パスワードリセット画面のURLを自動的に作成します。これらのURLはTheme My Login ” Generalページで確認できます。

これらのページを置き換えるには、このURLで新規ページを作成するだけです。

WordPressカスタムパスワードリセットページを作成するには、ページ ” 新規追加に進みます。ここで「+」アイコンをクリックし、「ショートコード」と入力し始める。

適切なブロックが外観されたら、クリックしてページに追加する。

ブロックの中に、以下のショートコードを追加する：

[theme-my-login action="lostpassword"]]。

パスワードリセットページに表示したいコンテンツ（ロゴなど）を追加できます。ページの設定に満足したら、「下書きを保存」をクリックします。

その後、「ページ」 ” 「すべてのページ」を開き、先ほど作成したパスワードリセットページを見つけてください。

ページにマウスオーバーし、「クイック編集」ボタンが表示されたらクリックするだけです。

スラッグ」フィールドに「lostpassword」と入力する。

その後、「状態」のドロップダウンを開き、「公開する」を選択する。

それが完了したら、先に進み、「更新」をクリックします。これで、ワードプレスのブログにアクセスすると、パスワード紛失のページが表示されます。

WordPressにビルトインされている他の会員ページを置き換えるには、上記の手順を踏むだけですが、正しいURLスラッグとショートコードを使用していることを確認してください。

例えば、カスタマイザーのパスワードリセットページを作成したい場合、[theme-my-login action="resetpass"]ショートコードを使用する必要があります。また、「URLスラッグ」をresetpasswordに変更する必要があります。

方法3：WPFormsを使ってパスワードリセットページを作る（完全にカスタマイズ可能）

初期設定のパスワードリセットページを完全にカスタムフォームに置き換えたい場合は、WPFormsの使用をお勧めします。

このプラグインには’ユーザーパスワードリセットフォーム’テンプレートがあり、独自のテキスト、画像、ブランディングでカスタマイズすることができます。フィールドを追加したり削除したりすることで、メンバーから必要な情報を正確に収集することもできます。

最初に行う必要があるのは、WPFormsプラグインをインストールして有効化することです。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

有効化した後、WPForms ” Settingsにアクセスしてライセンスキーを入力してください。この情報はWPFormsサイトのアカウントにあります。

ライセンスキーを入力した後、ユーザー登録アドオンをインストールする必要があります。このアドオンを使用すると、サイトのユーザー登録、パスワードリセット、ログインフォームのカスタマイザーを作成できます。

ダッシュボードでWPForms ” Addonsに移動し、ユーザー登録アドオンを見つけます。

インストーラ」をクリックしてアドオンをダウンロードし、「有効化」をクリックしてアドオンを有効化します。

これでWPForms ” 新規追加 ページに行き、カスタマイザーでパスワードリセットフォームを作成する準備ができました。ここで新規フォームのタイトルを入力します。

ユーザーパスワードリセットフォーム」テンプレートまでスクロールし、「テンプレートを使用」ボタンをクリックします。

WPFormsはユーザーパスワードリセットフォームテンプレートをロードするようになりました。

独自のテキスト、ラベル、または説明でフィールドをカスタマイズするには、単にクリックして選択し、左側のメニューの設定を使用します。

例えば、このテンプレートには「送信」ボタンがあります。別のボタンラベルを表示するには、単にクリックしてフィールドを選択し、’送信ボタンテキスト’に新しいメッセージを入力します。

また、ユーザーがパスワード再設定リクエストを送信したときの動作は、設定 ” 確認 で変更できます。

ここで、’Confirmation Type’ドロップダウンを開き、ユーザーを別のページやURLにリダイレクトするか、単にパスワードリセットのメールを受信トレイで確認するよう促すメッセージを表示するかを選択します。

また、小さなテキストエディターにメッセージを入力してカスタマイズすることもできます。例えば、ユーザーにスパムフォルダーをチェックするよう促すことができます。

フォームの設定に問題がなければ、画面右上の「保存」ボタンをクリックします。

WordPressのデフォルトのパスワードリセットページを置き換えるには、’one password’というスラッグのページを作成します。そして、そのページにフォームを追加します。

これを行う最も簡単な方法は、WPFormsエディタの’Embed’ボタンをクリックし、’Create New Page’を選択することです。

次に、新しいページのタイトルを入力します。スラッグは後のステップで変更するので、好きなものを使ってください。

それが終わったら、『Let’s Go』をクリックする。

これでWordPressのページエディタが表示され、フォームがすでに新規ページに追加されています。このページにテキストを追加したり、カスタムロゴを追加したり、カテゴリーやタグを追加したりすることができます。

ページの見た目に満足したら、「下書きを保存」ボタンをクリックします。

その後、「ページ」 ” 「すべてのページ」を開き、先ほど作成したパスワードリセットページを見つけてください。

ここで「クイック編集」ボタンをクリックする。

スラッグ」フィールドに「lostpassword」と入力する。

その後、「状態」のドロップダウンを開き、「公開する」を選択する。

ここで、訪問者をWordPressビルトインページではなく、カスタムパスワードリセットページにリダイレクトする必要があります。これを行う最も簡単な方法は、無料のWPCodeプラグインを使用することです。

WPCodeは、200万以上のWordPressサイトで使用されている最高のコードスニペットプラグインです。functions.phpファイルを編集することなく、WordPressにカスタマイザーコードを簡単に追加することができます。

WPCodeを使用すると、初心者でもWordPressの一般的なエラーの原因となるミスやタイプミスのリスクを負うことなく、サイトのコードを編集することができます。

最初に行う必要があるのは、無料のWPCodeプラグインをインストールして有効化することです。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

有効化したら、Code Snippets ” Add Snippetにアクセスしてください。

ここでは、WordPressに追加ファイルタイプをアップロードしたり、添付ファイルページを無効化したり、コメントを完全に無効化したりすることができる既製のスニペットを見つけることができます。

カスタムコードを追加」にマウスオーバーし、表示されたら「スニペットを使用」をクリックするだけです。

はじめに、カスタムコードスニペットのタイトルを入力します。これは、WordPressダッシュボードでスニペットを識別するのに役立つものであれば何でも構いません。

その後、「コードタイプ」のドロップダウンを開き、「PHPスニペット」を選択する。

コードエディターで、以下のコード・スニペットを追加する：

add_filter( 'lostpassword_url', 'my_lostpassword_url' );
function my_lostpassword_url() {
return site_url('/lostpassword/');
}

次に、「インサーター」セクションまでスクロールします。WPCodeは、すべての投稿の後、フロントエンドのみ、管理者のみなど、さまざまな場所にコードを追加することができます。

サイト、ブログ、WooCommerceストア全体でカスタムPHPコードを使用するには、「Auto Insert」がすでに選択されていない場合は、「Auto Insert」をクリックしてください。次に、「Location」ドロップダウンを開き、「Run Everywhere」を選択します。

その後、画面上部にスクロールし、「Inactive」トグルをクリックして「Active」に変更すれば準備完了です。

最後に「Save Snippet」をクリックして、PHPスニペットをライブにする。

では、WordPressのビルトインログイン画面にアクセスしてみてください。

パスワードをお忘れですか？」リンクをクリックすると、先ほど作成したカスタムパスワードリセットページにリダイレクトされます。

サイトの設定によっては、他のページのパスワードリセットリンクを更新する必要があるかもしれません。

WPFormsなどのプラグインを使用してWordPressのカスタムログインページを作成した場合は、このフォームに新しいパスワードリセットリンクを追加することもお勧めします。

WordPressページのカスタマイズに関するエキスパートガイド

このチュートリアルでWordPressのパスワードリセットページをカスタマイズする方法をご理解いただけたと思います。WordPress ログインセキュリティの改善に関するチュートリアルもご覧ください：

• WordPressカスタムログインページの作り方（アルティメットガイド）
• WordPressでログイン試行を制限する方法と理由
• WordPressのログイン画面にセキュリティの質問を追加する方法
• WordPressでカスタムログインURLを追加する方法（ステップバイステップ）
• WordPress管理エリアを保護するための重要なヒント

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.