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

WordPressのデフォルトのパスワードリセットフォームはかなり基本的です。仕事はこなせますが、「プロフェッショナル」とは言い難いですし、あなたのブランドのルック&フィールにマッチしているとは言えません。

カスタムパスワードフォームのWordPressソリューションがなければ、ブランドの一貫性を保つことができません。さらに、ユーザーをスムーズにリセットプロセスに導くために、役立つ説明を追加したり、メッセージングをカスタマイズしたりすることもできません。

そこで便利なのがWPForms User Registrationアドオンです。このアドオンを使用すると、実際にあなたのサイトにあるような、完全にカスタマイズされたパスワードリセットフォームを作成することができます。

あなたのウェブサイトの色、フォント、全体的なデザインに合わせながら、明確で役立つ指示を提供することができます。それでは早速、このガイドの手順に従ってWordPressのパスワードリセットフォームをカスタマイズしてみましょう!

カスタムパスワードリセットフォームを今すぐ作成🚀

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

カスタムパスワードリセットフォームを作成するには、WPFormsのプレミアムバージョンを購読する必要があります。Proライセンスには、WordPressウェブサイトのカスタムパスワードリセット、ユーザー登録、ログインフォームを作成できるユーザー登録アドオンが含まれています。それでは始めましょう!

ステップ1:WPFormsプラグインをインストールする

まず、WPFormsをダウンロードしてインストールします。このチュートリアルでは、WPForms Liteの代わりにプロバージョンが必要です。ヘルプが必要な場合は、WordPressプラグインのインストールガイドをご覧ください。

プラグインをインストールした後、WPFormsアカウントにログインして Downloadsタブをクリックしてください。利用可能なライセンスがすべて表示されます。

矢印ハイライト WPForms ダウンロードタブ

プラグインをダウンロードするには、プロライセンスの横にある「WPFormsをダウンロード」ボタンをクリックしてください。これでWPFormsプラグインのzipファイルがあなたのコンピュータに保存されます。

WPFormsダウンロードボタン

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

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

ここからChoose Fileボタンをクリックし、先ほどダウンロードしたWPFormsのzipファイルを選択します。ファイルがアップロードされたら、「今すぐインストール」ボタンをクリックします。

wpformsをインストールする

プラグインがインストールされたら、Activate Plugin ボタンをクリックしてWPFormsを有効化します。プラグインを有効化した後、自動アップデートとプラグインサポートを受けるために WPFormsのライセンスキーを忘れずに 確認してください。

プラグインの有効化」ボタンを指す赤い矢印

ライセンスキーを追加することで、WordPressのダッシュボードから WPFormsアドオンを簡単に インストール・有効化することができます。

ステップ2:ユーザー登録アドオンの有効化

WPFormsが準備できたので、カスタムパスワードリセットフォームを作成するためにUser Registrationアドオンが必要です。WordPress管理画面の左サイドバーメニューからWPForms " Addonsに アクセスしてください。

WPFormsアドオン

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

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

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

WPFormsの'Search Addons'フィールドを強調する矢印

見つけたら、アドオンのインストールボタンをクリックしてください。

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

これにより、アドオンが自動的にインストールされ、有効化されます。インストール済みで使用可能なアドオンは、ステータスが表示されます:と表示されます。

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

プロのアドバイス

アドオンをインストールした後、WPFormsダッシュボードを更新し、すべての新しいテンプレートとフィールドが正しく読み込まれることを確認してください。

ステップ3: パスワードリセットフォームテンプレートを使用する

さて、いよいよWordPressでカスタムパスワードフォームを作成しましょう。ダッシュボードのWPForms " Add Newから新しいフォームの作成を開始します。

テンプレートライブラリで "Password Reset "を検索し、User Password Reset Formオプションにカーソルを合わせ、Use Templateをクリックします。

テンプレートを使用」ボタンをハイライトする

テンプレートを選択すると、パスワードリセットフォームが画面に表示されます。このテンプレートはパスワードリセット機能のために特別に設計されており、すべての必須フィールドがすでに設定されています。

パスワードリセットフォーム

フォームには、ユーザーが登録したEメールアドレスを入力できるEメールフィールドが自動的に含まれます。これはパスワードリセットプロセスを機能させるコアコンポーネントです。

私はいつもウェブサイトのブランディングに合わせてフォームのタイトルと説明をカスタマイズしています。一番上のフォームタイトルをクリックして編集してください。デフォルトから "Reset Your Password "や "Forgot Your Password? "のように変更することもできます。

注:

パスワードをリセットする際、ユーザー名/Eメールフィールドはユーザーにのみ表示されます。パスワードフィールドは、ユーザがパスワードリセットメールのリセットリンクをクリックしたときにのみ表示され、新しいパスワードを設定することができます。

このテンプレートは最適な方法で非常に特殊な目的を果たすので、このテンプレートからフィールドを追加したり削除したりするのは良い考えではない。次のステップでリセットメールの設定を見てみましょう。

ステップ4:パスワード再設定メールの設定

それでは、パスワードリセットプロセスを微調整しましょう。パスワードリセットのオプションにアクセスするには、フォームビルダーの設定"ユーザー登録に進んでください。

パスワードリセットフォームの設定

まず最初にパスワードリセット機能を有効にします。そうしないと、ユーザーはカスタムフォームからパスワードをリセットすることができません。

これを有効にすると、リセットメールの件名をカスタマイズできます。デフォルトのままでもいいかもしれませんが、私は自分のブランドボイスに合ったものにしたいと思っています。サイト名]のパスワードをリセット "のようなものは、一般的なテキストよりも個人的な感じがします。

パスワード再設定メール

リセットメールメッセージを編集する場合は、必ず {user_registration_password_reset} スマート・タグ。このスマートタグは、ユーザーがクリックするためのリセットリンクを作成します。

リセット・リンク・スマートタグ

さらに下にスクロールすると、ログインユーザーからパスワードリセットフォームを隠すオプションが表示されます。このオプションを有効にすると、ログインユーザーがフォームを開いたときに表示するメッセージを編集することができます。

ログインユーザーのフォームを隠す

素晴らしい!設定をカスタマイズしたら、一番上の保存をクリックしてください。次のステップでは、新しいページにフォームを埋め込みます。

ステップ 5: パスワードリセットフォームの外観をカスタマイズする

パスワードリセットフォームは機能的ですが、今度は見栄えを良くしましょう。優れたデザインのフォームは信頼を築き、リセットプロセスをよりプロフェッショナルなものにします。

WPFormsには便利な埋め込みウィザードがあり、フォームビルダから直接新規または既存のページ内にフォームを配置することができます。

フォームが保存されたら、埋め込みボタンをクリックします。新しいパスワードリセットページにフォームを埋め込みたいので、新しいページを作成する オプションを選択します。

新しいページにフォームを埋め込む

あなたのページに適当な名前をつけて、Let's Goをクリックします。その後、WPFormsがWordPressのブロックエディタを開き、そこにパスワードリセットフォームが埋め込まれます。

ページに埋め込む

では、右側のWPFormsブロックオプションを使ってフォームのスタイリング機能を使い、数クリックでラベル、フィールド、ボタンをカスタマイズしましょう。

パスワードリセットフォームのスタイルのカスタマイズ

フォームに満足したら、公開ボタンを押してフォームを立ち上げてください。これでパスワードリセットフォームは公開され、使用できるようになりました!

パスワードリセットフォームの公開

しかし、まだ終わりではありません。パスワードをリセットする必要がある場合に備えて、このフォームをユーザーが見つけやすいようにしておくことが重要です。次のステップでは、パスワードリセットフォームをサイトのメインナビゲーションに追加します。

ステップ6:ナビゲーションメニューにパスワードリセットフォームを追加する

パスワードリセットページをユーザーにとって見つけやすくすることは良い習慣です。サイトのナビゲーションバー上部に新しく作成したフォームページを追加することでそれを実現します。

やり方は簡単です。WordPressのダッシュボードを開き、外観 " メニューを開きます。すでにナビゲーション・メニューが追加されているかもしれません。

ナビゲーションメニュー

その場合は、パスワードリセットのページをメニューに追加するだけです。メニュー画面で、左側の列にあるパスワードリセットフォームをクリックし、メニューに追加を押してください。

メニューにページを追加する

これにより、パスワードリセットページが右側のメニューに追加されます。メニューの保存ボタンを押して更新してください。

保存メニュー

初めてメニューを作成する手順もほとんど同じです。まずメニューに名前を付け、下にある青いメニュー作成ボタンを押すだけです。

新規メニューの作成

それができたら、上記の手順でメニューにページを追加することができます。ナビゲーションの例です:

ナビゲーションメニュー

あとは、リダイレクトを追加して、デフォルトのWordPressリセットページにアクセスしようとする訪問者が、新しいカスタムパスワードリセットページに自動的にリダイレクトされるようにするだけです。

オプションカスタムパスワードリセットフォームにリダイレクトを追加する

ウェブサイト上でパスワードをリセットするためのカスタムフォームを作成する場合、サイト用のカスタムブランドのログインフォームも作成することをお勧めします。

また、デフォルトのWordPressログインページを新しいカスタムページに置き換えるリダイレクトを追加してください。しかし、デフォルトのログインページがまだアクセス可能な場合は、パスワードリセットフォームへのリダイレクトを追加する必要があります。

こうすることで、ユーザーが"Lost your password?"リンクをクリックすると、デフォルトのWordPressパスワードリセットフォームではなく、上記で作成したカスタムパスワードリセットページにリダイレクトされます。

ご心配なく、思ったより簡単です。まず、無料のWPCodeWordPressプラグインをインストールします。ワードプレスのダッシュボードで、プラグイン " 新規追加にアクセスしてください。

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

そこからWPCodeを検索し、「今すぐインストール」をクリックする。

WPCodeプラグイン

有効化」をクリックしたら、いよいよコードを追加します。WordPressのダッシュボードで、Code Snippets " + Add Snippetをクリックします。

スニペットの追加

クリックすると、さまざまなコード・オプションを選択できる、あらかじめ用意されたライブラリが表示されます。カスタムコードの追加(新規スニペット)オプションの下にあるスニペットの使用をクリックします、

カスタムコードスニペットを追加する

スニペットのタイトルを決めたら(ここでは "New Password Reset Page "としました)、コードプレビューの右側にあるコードタイプのドロップダウンをクリックし、PHP Snippetを選択します。

PHPスニペット

次のコードをコピーしてエディターに貼り付ける:

交換を忘れずに reset-password を新しいカスタムパスワードリセットページのスラッグに置き換えてください。

次に、挿入セクションまでスクロールダウンし、挿入方法と挿入場所を指定します。

挿入方法は、デフォルトの場所選択「どこでも実行」と「 自動挿入」のままにしておくことをお勧めする。

WPCコード挿入オプション

完了したら、右上のSave Snippet ボタンをクリックします。次に、その横にあるトグルスイッチをクリックすると、コードスニペットが有効になります。

WPCodeのアクティブ化とスニペットの保存

素晴らしい!これで、ユーザーがパスワード紛失のリンクをクリックすると、必ずあなたのカスタムパスワードリセットページにたどり着きます。

標準のWordPressパスワードリセットフォームからWPFormsのカスタムリセットフォームに移行することで、ブランディングの向上以外にも多くのメリットが得られます。

例えば、WPFormsに内蔵されているアンチスパム機能を使ってスパム防止機能を追加したり、スパムボットを寄せ付けないためにフォーム送信までの最短時間を設定するなどの便利なオプションを追加することができます。

詳しくは、WordPressで不正なパスワードのリセットを防ぎ、これらのスパム要求を排除するためのガイドをご覧ください!

パスワードリセットフォームのカスタマイズ方法に関するFAQ

WordPressのパスワードリセットフォームをWPFormsでカスタマイズする際によくある質問を紹介します。

パスワードリセットのEメールテンプレートをカスタマイズできますか?

はい、パスワードリセットのメールをカスタマイズすることができます。フォームの通知設定で、件名やメールの内容を変更したり、独自のブランディングを追加することもできます。

私は通常、明確な指示を盛り込み、次に何が起こるかについての期待値を設定します。スマートタグを使って、ユーザーの名前やその他の詳細情報をメッセージにパーソナライズすることができます。

ユーザーがパスワードリセットフォームを送信した後、どのようにリダイレクトすればよいですか?

これにはいくつかのオプションがあります。フォームビルダーの設定"確認に行き、ページを表示するかURL に移動(リダイレクト)を選択します。

私はよく、ユーザーに明確な次のステップを与えるカスタムの "check your email "ページにリダイレクトさせます。これは、ただ一般的な成功メッセージを表示するよりもプロフェッショナルな感じがします。

パスワードリセットフォームにフィールドを追加できますか?

もちろんです。基本的なパスワードリセットにはEメールフィールドだけが必要ですが、WPFormsの利用可能なフィールドタイプのいずれかを使用して、セキュリティ質問、電話番号、またはその他の検証フィールドを追加することができます。

ただ、フィールドを増やしすぎると、ユーザーがフォームに記入する意欲をなくす可能性があることを覚えておいてください。私は、必要な検証を行いながら、シンプルに保つようにしています。

登録されていないメールアドレスを入力した場合はどうなりますか?

ユーザー登録アドオンは、これを自動的に処理します。もし誰かがあなたのユーザーデータベースに存在しないメールアドレスを入力した場合、リセットメールは届きませんが、エラーメッセージも表示されません。

ユーザーから見れば、関係なく同じ確認メッセージが表示される。これは、私が本当に感謝しているセキュリティ機能です。

パスワードリセットフォームを自分のテーマに合うようにするにはどうすればよいですか?

WPForms ではフォームビルダー内でいくつかのスタイリングオプションを利用できます。ページエディタで埋め込みフォームをクリックするとスタイリングパネルにアクセスし、あらかじめ用意されたテーマから選択したり、色、フォント、スペーシングをカスタマイズすることができます。

より高度なカスタマイズのためには、テーマにカスタムCSSを追加することができます。私は、組み込みのスタイリングオプションがコードを必要とせずにほとんどのケースを処理することに気づく。

WordPressのデフォルトのパスワードリセットを無効にし、カスタムフォームのみを使用することはできますか?

はい、しかしこれにはいくつかの技術的な作業が必要です。WordPressのデフォルトのパスワードリセットの動作を上書きするには、テーマのfunctions.phpファイルにカスタムコードを追加する必要があります。

私は通常、両方のオプションを利用可能にしておくことをお勧めします。カスタムパスワードフォームを主な方法とし、デフォルトのワードプレスリセットはそれを必要とするユーザーのためのバックアップとして機能します。

パスワード再設定フォームへのスパム投稿を防ぐにはどうすればよいですか?

WPForms にはいくつかのスパム対策機能があります。カスタムCaptchaフィールドをオンにするか、フォームの設定"一般タブでhCaptchaを有効にしてください。

また、IPアドレスでフォーム送信を制限したり、ハニーポット機能を有効にすることもできます。これらの方法を併用することで、実際のユーザーをイライラさせることなく、ほとんどのスパムを阻止できることがわかりました。

パスワード・リセットのリクエスト数を追跡できますか?

はい、WPForms はパスワードリセット要求を含むすべてのフォームエントリを自動的に記録します。WPForms"Entriesにアクセスすると、送信の詳細、日付、ユーザー情報を見ることができます。

より詳細な分析が必要な場合は、Google Sheetsアドオンを使ってフォームをGoogle Sheetsに接続し、時系列でパターンを追跡することができます。これは、異常なアクティビティを見つけたり、ユーザーがプロセスの特定の部分で困っているかどうかを特定するのに役立ちます。

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

新しいページにパスワードリセットフォームを埋め込んだら、ブランディングを行いましょう。

なぜでしょうか?パスワードリセットのフォームとページをブランディングすることで、顧客に対して、あなたが合法的な企業であるという考えを固め、ブランド全体の信頼性を高めることができます。

WordPressでフォームページを作成・カスタマイズするための完全ガイドをご覧ください。さらに、WordPress でパスワードで保護されたページをカスタマイズする方法もご覧ください。

また、WordPressのテーマカラーをカスタマイズし、ブランドカラーに合わせたフォームを作成する方法についてもご紹介しています。

今すぐWordpressフォームを作成

フォームを作る準備はできましたか?最も簡単なWordPressフォームビルダープラグインで今すぐ始めましょう。WPForms Proにはたくさんの無料テンプレートが含まれており、14日間の返金保証がついています。

この記事がお役に立ちましたら、Facebookや TwitterでWordPressの無料チュートリアルやガイドをフォローしてください。

情報開示私たちのコンテンツは読者支援型です。つまり、あなたが私たちのリンクをクリックした場合、私たちはコミッションを得る可能性があります。WPFormsがどのように資金を調達しているのか、なぜそれが重要なのか、そしてどのように私たちをサポートできるのかをご覧ください。

レニー・デコスキー

2001年からブログを始め、2007年からWordPressを使っています。WordPressプラグインについて書いていないときは、本を読んだり、ロータリーを楽しんだりしています。 もっと知る

最高のWordPressドラッグ&ドロップフォームビルダープラグイン

簡単、速い、安全。WPFormsを信頼する600万人以上のWebサイトオーナーの仲間入りをしてください。

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

  1. メールで送られてきたパスワード再設定のリンクをクリックしても、フォームのパスワード欄が表示されません。

    1. やあ、アヨミクン - 喜んでお手伝いさせていただきます!お時間がありましたら、サポートまでご連絡ください。

      WPFormsのライセンスをお持ちの方は、メールサポートをご利用いただけますので、サポートチケットを送信してください。

      それ以外の場合は、WPForms Lite WordPress.orgのサポートフォーラムで限定的な無料サポートを提供しています。

      ありがとう🙂。

      1. ワグナー - 喜んでお手伝いさせていただきます!お時間がありましたら、サポートまでご連絡ください。

        WPFormsのライセンスをお持ちの方は、メールサポートをご利用いただけますので、サポートチケットを送信してください。

        それ以外の場合は、WPForms Lite WordPress.orgのサポートフォーラムで限定的な無料サポートを提供しています。

        ありがとう🙂。

コメントを追加する

コメントをお寄せいただきありがとうございます。すべてのコメントはプライバシーポリシーに従って管理され、すべてのリンクはnofollowであることにご留意ください。名前欄にはキーワードを使用しないでください。個人的で有意義な会話をしましょう。

このフォームはCloudflare Turnstileによって保護されており、Cloudflareプライバシーポリシーおよび利用規約が適用されます。