WordPressパスワードリセットフォームをカスタマイズする方法

公開: 2022-05-16

独自のWordPressパスワードリセットフォームを作成したいとお考えですか?

カスタムパスワードリセットフォームを作成することにより、これらのユーザーページをWebサイトのテーマに合わせてカスタマイズし、ロゴを表示し、追加のコンテンツを提供することで、より強力なユーザーエクスペリエンスを提供します。 eコマース会社またはメンバーシップサイトを運営している場合、Webサイト全体で一貫したブランディングを行うことが特に重要です。

WordPressのパスワードをリセットするにはどうすればよいですか?

WordPressの紛失したパスワードのリンクを使用して、WordPressのパスワードをリセットできます。 これにより、クリックしてパスワードをリセットできるリンクが記載されたメールが送信されます。

ユーザーエクスペリエンスを向上させるために、カスタムパスワードリセットフォームを使用すると、フォームの外観と電子メール通知の内容を微調整できます。 カスタムパスワードリセットフォームを作成し、ユーザーをページに送信して、パスワードを簡単にリセットできるようにする方法を説明します。

WordPressでパスワードリセットフォームを作成する方法

カスタムパスワードリセットフォームを作成するには、WPFormsのプレミアムバージョンにサブスクライブする必要があります。 Proライセンスには、Webサイトのカスタムパスワードリセット、ユーザー登録、およびログインフォームを作成できるユーザー登録アドオンが含まれています

記事上で

  • 1.WPFormsをインストールします
  • 2.ユーザー登録アドオンをインストールします
  • 3.フォームテンプレートを選択して公開します
  • 4.コードスニペットをインストールして使用する
  • 5.ログインフォームにパスワードリセットリンクを追加します
  • 6.最終フォームテスト
  • 7.スパムパスワードのリセット要求を停止します

始めましょう!

WPFormsは最高のWordPressフォームビルダープラグインです。 無料で入手!

1.WPFormsをインストールします

まず、WPFormsアカウントにログインします。 ログインしたら、[ダウンロード]タブをクリックします。

WPFormsダウンロードタブを強調表示する矢印

これは、利用可能なすべてのライセンスが記載されたページです。 プラグインをダウンロードするには、プロライセンスの横にある[ WPFormsのダウンロード]ボタンをクリックします。 これにより、WPFormsプラグインのzipファイルがコンピューターに保存されます。

WPFormsボタンをダウンロード

zipファイルをダウンロードしたら、WPFormsをインストールするWordPressサイトにアクセスします。 次に、管理ダッシュボードで、[プラグイン]»[新規追加]をクリックしてから、[プラグインのアップロード]ボタンをクリックします。

WordPressにプラグインボタンをアップロード

ここから、[ファイルの選択]ボタンをクリックして、ダウンロードしたWPFormszipファイルを選択します。

[ファイルの選択]ボタンを指す赤い矢印

ファイルがアップロードされたら、 [今すぐインストール]ボタンをクリックします。

今すぐインストールwpforms

プラグインがインストールされたら、[プラグインのアクティブ化]ボタンをクリックして、サイトでWPFormsをアクティブ化します。

[プラグインのアクティブ化]ボタンを指す赤い矢印

プラグインをアクティブ化した後、自動更新とプラグインのサポートを受けるために、WPFormsライセンスキーを確認することを忘れないでください。 ライセンスキーを追加すると、WordPressダッシュボード内からWPFormsアドオンを簡単にインストールしてアクティブ化することもできます。

2.ユーザー登録アドオンをインストールします

次に、パスワードリセットフォームを作成するために必要なアドオンをインストールします。

WordPress管理エリアで、 WPForms»Addonsに移動します。

WPFormsアドオン

ライセンスレベルのアドオンが表示されない場合は、[アドオンの更新]ボタンをクリックして強制的に更新します。

オレンジ色の[アドオンの更新]ボタンを指す赤い矢印

ユーザー登録アドオンを検索するには、ページの右上隅にある[アドオンの検索]フィールドにその名前を入力します。

WPFormsの[検索アドオン]フィールドを強調表示する矢印

見つけたら、 [アドオンのインストール]ボタンをクリックするだけです。

アドオンのインストールボタンを指す赤い矢印

これにより、アドオンが自動的にインストールされてアクティブ化されます。 インストールされて使用できる状態になっているアドオンには、ステータス:アクティブが表示されます。

使用登録プラグインがアクティブであることを示す赤い矢印

3.フォームテンプレートを選択して公開します

パスワードリセットフォームを作成するには、 WPForms»AddNewに移動します。 テンプレートライブラリで「パスワードのリセット」を検索し、 [ユーザーパスワードのリセットフォーム]オプションにカーソルを合わせて、[テンプレートの使用]をクリックします。

[テンプレートを使用]ボタンを強調表示する

次に、必要な数のフィールドを追加または削除して、パスワードリセットフォームをカスタマイズできます。 できるだけシンプルにすることをお勧めします。 フォームのカスタマイズが完了したら、パスワードリセットページにフォームを埋め込む必要があります。

まず、フォームエディタの右上隅にある[保存]ボタンをクリックします。

フォームを保存するための保存ボタン

フォームが保存されたら、フォームの横にある[埋め込み]ボタンをクリックします。

フォームボタンを埋め込む

これは新しいパスワードリセットページになるため、[新しいページの作成]を選択します。

フォームを埋め込むための新しいページを作成します

後で簡単に見つけられるように、ページに「パスワードリセットページ」のような名前を付けます。 これで、フォームが新しいページに埋め込まれます。

この次のステップは非常に重要です。

URLに正しく名前を付けていることを確認する必要があるため、スラッグの名前を更新します。

これを行うには、WordPress管理ダッシュボードに移動し、[ページ] »[すべてのページ]をクリックします。 新しいページを見つけて、[クイック編集]をクリックします。 これが表示されます:

スラッグとしてlostpasswordを使用したクイック編集ボックス

Slugの横のセクションにlostpassword (1ワード)が書かれていることを確認してください。 これにより、すべてが接続されます。 これを行うと、たとえば、ページの最終URLはwww.example.com/lostpasswordのようになります。

これで、コードスニペットを追加する準備が整いました。

4.コードスニペットをインストールして使用する

ユーザーを新しいパスワードリセットページに送るには、カスタムコードスニペットを使用してリダイレクトを設定する必要があります。 心配しないでください、それは思ったより簡単です。

まず、無料のCodeSnippetsWordPressプラグインをインストールします。 WordPressダッシュボードで、 [プラグイン]»[新規追加]に移動します。

新しいワードプレスプラグインを追加する

そこから、コードスニペットを検索し、[今すぐインストール]をクリックします。

コードスニペットプラグイン

[アクティブ化]をクリックしたら、コードを追加します。 WordPressダッシュボードで、[スニペット]»[新規追加]をクリックします。

新しいコードスニペットボタンを追加

スニペットにタイトルを付けたら([新しいパスワードのリセット]ページに移動しました)、次のコードをコピーしてフィールドに貼り付けます。

 add_filter( 'lostpassword_url', 'my_lost_password_page', 10, 2 );
function my_lost_password_page( $lostpassword_url, $redirect ) {
return home_url( '/lostpassword/?redirect_to=' . $redirect );
} 

重要:コードの長さは4行のみにする必要があります。 また、デフォルトの[スニペットをどこでも実行]オプションをオンのままにしておくことをお勧めします。

次に、下にスクロールして、[変更を保存してアクティブ化]ボタンをクリックします。 注:説明とタグを追加することもできますが、必須ではありません。

5.ログインフォームにパスワードリセットリンクを追加します

これが確実に行われるようにする必要がある理由は、ユーザーがパスワードをリセットできるようにするためです。 まだ作成していない場合は、テンプレートを使用してログインフォームをすばやく作成してください。

次に、パスワードを忘れた場合のリンクをログインフォームに追加します。 これを行うには、[パスワード]フィールドをカスタマイズします。

ここの説明にリンクを追加して、フィールドのすぐ下に表示されるようにします。 リンクには{url_lost_password}スマートタグを使用できます。

パスワードフィールドをクリックして開始します。 説明で、これを次の場所に貼り付けます。

Forgotten your password? <a href={url_lost_password} >Click here</a> to reset it.

カスタムパスワードを忘れたリンク

これで、フォームに「パスワードをお忘れですか? リンクをリセットするには、ここをクリックしてください。

6.最終フォームテスト

ここで、すべてが正しく機能していることを確認したいと思います。 この段階では、2つの形式の2つのページがあります。

  • フォームに「パスワードを忘れた場合のリンク」が表示されたユーザーログインページ
  • 「パスワードリセット」フォームが記載された新しいパスワードリセットリンクページ

すべてが機能していることを確認するには、ユーザーログインページに移動します。 パスワードリセットリンクをクリックします。

ユーザーログインテストページのパスワードリセットリンク

次に、新しいパスワードのリセットページにリダイレクトされます(www.yourwebsite.com/lostpasswordがURLになります)。 そうでない場合は、前の手順を慎重に繰り返し、2つの重要な手順が実行されていることを確認してください。

  • コードスニペットは、手順4で説明したとおりに正確にコピーされました。
  • パスワードのリセットページのスラッグとしてパスワードが失われました

7.スパムパスワードのリセット要求を停止します

最後に、スパムパスワードのリセット要求を防ぎます。 絶え間ないパスワードリセット要求は、Webサイトのセキュリティリスクになる可能性があり、誰かがWebサイトに侵入しようとしていること、または誰かがパスワードを盗もうとしていることを示している可能性があります。 いずれにせよ、それは迷惑です。

これらのスパムボットを阻止するために、WordPressでの不正なパスワードのリセットを防ぎ、これらのスパムリクエストを排除するためのガイドに従って、サイトとログインページへのアクセスを制限することができます。

次に、パスワードリセットページをカスタマイズします

パスワードリセットフォームを新しいページに埋め込んだら、ブランド化する必要があります。

なんで? パスワードリセットフォームとページにブランドを付けることで、あなたは合法的な会社であるという顧客への概念を固め、ブランドの全体的な信頼性を高めることができます。

WordPressでフォームページを作成およびカスタマイズするための完全なガイドに従ってください。

今すぐWordPressフォームを作成する

フォームを作成する準備はできましたか? WPForms Proには、ユーザー登録アドオン、多数の無料テンプレート、および14日間の返金保証が含まれているため、必ずサインアップしてください。

この記事が役に立った場合は、FacebookとTwitterでフォローして、無料のWordPressチュートリアルとガイドを入手してください。