WordPressのログインページやユーザー登録ページは、しばしばハッカーやスパマー、ブルートフォース攻撃の格好の標的となります。これらの攻撃を回避する一つの方法は、CAPTCHAを使用することです。CAPTCHAは効果的にスパムボットをブロックし、サイトをハッキングから守ります。
WPBeginnerやその他のブランドのすべてのフォームにCAPTCHAがあります。これは、ユーザーに「私はロボットではありません」と尋ねる小さなチェックボックスです。実装はとても簡単で、ログインや登録フォームを保護することができます。
この投稿では、WordPressのログインフォームと登録フォームにCAPTCHAを追加する方法を紹介します。
CAPTCHAとは?
CAPTCHAは、誰かが人間か自動化されたユーザーかを判別するコンピュータープログラムです。これは、人間のユーザーにとっては非常に簡単であるが、自動化されたスクリプトやボットにとってはほとんど不可能なテストを表示することによって行われます。
CAPTCHAの初期の頃は、ユーザーは画像に表示されたテキストを入力するよう求められた。この画像には、ランダムな文字、単語、数字が歪んだスタイルで表示されていた。
その後、reCAPTCHAと呼ばれる新しい技術が導入された。
ランダムな単語を課題として表示し、ユーザーからの入力を本のデジタル化に役立てた。
Googleは2009年にこの技術を買収した。それ以来、何千冊もの書籍のデジタル化に貢献し、ニューヨーク・タイムズのアーカイブを完成させた。
しかし、これらの新しいCAPTCHAは依然として煩わしく、しばしばサイトのユーザー体験を台無しにしていた。
これを解決するため、Googleは人工知能(AI)とユーザーとのやりとりを利用してスパムボットを捕まえる「No CAPTCHA reCAPTCHA」を導入した。
人間のユーザーがクリックしやすいチェックボックスが表示されます。その他の不審なトラフィックに対しては、画像内のオブジェクトを識別するような、より難しいCAPTCHAを表示する。
とはいえ、WordPressサイトがCAPTCHAを使ってどのようにセキュリティを向上できるかを見てみましょう。
なぜWordPressのログインと登録にCAPTCHAを使うのか?
WordPressのログインページや登録ページは、スパマーやハッカー志願者、ブルートフォース攻撃の格好の標的です。
WordPressは世界で最も人気のあるサイトビルダーであり、悪意のある試みのターゲットになりやすいからだ。
攻撃者の動機は、多くの場合、WordPressの管理エリアに不正アクセスしてマルウェアを配布することです。また、特定のホスティングサービス会社でホスティングされているサイトネットワーク全体をクラッシュさせ、身代金を要求するケースもあります。
WordPressサイトを保護する最も簡単な解決策は、SucuriのようなWordPressファイアウォールプラグインを使用することです。あなたのサイトに悪質なトラフィックが到達するのをブロックし、不正アクセスを防ぎます。
もう一つの解決策は、WordPressのログインや登録ページにパスワード保護の第二のレイヤーを追加することです。しかし、この方法の問題点は、各ユーザーと2つ目のパスワードを共有する必要があり、大規模なマルチオーサーブログや会員制サイトでは拡張性がないことです。
CAPTCHAは、これらのソリューションに代わる簡単な代替手段を提供します。CAPTCHAは、GoogleのAI技術を使用して、本物のビジターを検出し、不審なユーザーにCAPTCHAの課題を提示します。
初期設定とカスタマイザーのWordPressログイン・登録フォーム
初期設定のWordPressログイン・登録フォームは基本的な機能を備えています。
ログインページでは、ユーザーがそれぞれの権限グループに従ってサイトのバックエンドにアクセスすることができます。
初期設定のWordPress登録フォームでは、訪問者がサイトにアカウントを作成することができます。一度登録されると、サイトのバックエンドにログインし、ユーザー権限グループによって許可された特定のタスクを実行することができます。
多くのサイトオーナーは、初期設定のWordPressログインページや登録ページを自分のロゴやスタイルなどでカスタマイズしたいと考えています。多くのプラグインを使用して、初期設定のログインページと登録ページを置き換えるためのカスタマイザーページを作成します。
初期設定のページでも、カスタマイザーのページでも、私たちにお任せください。
このガイドでは、WordPressの初期設定とカスタマイザーのログインと登録ページの両方にreCAPTCHAを設定する方法を紹介します。下のリンクをクリックすると各セクションにジャンプできます:
WordPressのログインフォームと登録フォームの初期設定にreCAPTCHAを追加する
最初に必要なことは、CAPTCHA 4WPプラグインをインストールして有効化することです。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。
プラグインを有効化したら、管理画面から CAPTCHA 4WP” CAPTCHA Configurationページにアクセスする必要があります。
セットアップウィザードが表示されます。次へ」ボタンをクリックしてください。
その後、使用するreCAPTCHAのタイプを選択する必要があります。
ユーザーが’I am not a robot’(私はロボットではありません)チェックボックスにチェックを入れるバージョン2、ユーザーとの対話は必要ないが、不審なトラフィックに対してCAPTCHAが表示されるバージョン2など、3つのオプションから選択できる。最後に、バージョン3は、ユーザーとの対話なしにスコアでリクエストを検証します。
このチュートリアルでは、「バージョン2(ユーザーは “I’m not a robot “チェックボックスにチェックを入れる必要があります)」タイプを選択します。
完了したら、「次へ」ボタンをクリックする。
次の画面では、Google reCAPTCHAサイトキーを入力する必要があります。
これらのGoogle reCAPTCHA APIキーを取得するには、reCAPTCHAのサイトにアクセスする必要があります。
次に、上部にある「v3 Admin Console」オプションをクリックします。
次の画面で、Googleはあなたのアカウントにログインするよう求めます。ログイン中、新規サイトの登録ページが表示されます。
まず、「Label」フィールドにサイト名を入力する必要があります。その後、reCAPTCHAのタイプを選択する必要があります。例えば、reCAPTCHA v2 ‘I’m not a robot’ チェックボックスを選択します。
次に、「ドメイン」セクションにドメイン名を入力する必要があります。
ドメイン名は必ず「https://www」の部分を除いて入力してください。
送信」ボタンをクリックしてください。
次に、WordPressサイトで使用できるサイトキーとシークレットキーとともに、成功メッセージが表示されます。
サイトとシークレットキーをコピーできる。
次に、CAPTCHA 4WPセットアップウィザードが開いているブラウザータブまたはウィンドウに戻る必要があります。ここから、Google CAPTCHAサイトキーキーを入力することができます。
完了したら、「I’m not a robot(私はロボットではありません)」にチェックを入れ、「Proceed to secret key(シークレットキーに進む)」ボタンをクリックします。
次にシークレットキーを入力し、「Validate & proceed」ボタンをクリックします。
すると、成功のメッセージが表示されます。
Finish」ボタンをクリックするだけです。
その後、CAPTCHA 4WPの追加設定を行うことができます。
例えば、言語の変更、エラーメッセージの編集、テーマの選択などのオプションがある。
完了したら、「変更を保存」ボタンをクリックするだけです。
これで完了です!これでWordPressの初期設定ログインと登録フォームにreCAPTCHAを追加することに成功しました。
プレビューするには、WordPressのログインURLをブラウザーで開きます。例えば、www.example.com/wp-login.php。
登録フォームでreCAPTCHAを確認したい場合は、ログインフォームの下にある「登録」リンクをクリックしてください。その後、WordPressの登録フォームが開き、reCAPTCHAがどのように機能するかを見ることができます。
カスタムWordPressログインフォームと登録フォームのreCAPTCHA
先に述べたように、WordPressのカスタムログインと登録フォームは、サイトのメンバーや訪問者によりユーザーフレンドリーな会員設定を提供します。
まず、これらの WordPress フォームを使用することで、ユーザーはフロントエンドからサイトに登録またはログインすることができます。これにより、ユーザーエクスペリエンスが向上し、サイト全体のデザインを同じに保つことができます。
次に、あなたのサイトのロゴを追加し、ログインと登録ページをあなたのスタイルでカスタマイズすることができます。
さらに、最もユーザーフレンドリーなWordPressフォームプラグインであるWPFormsを使えば、カスタマイザーによるログインフォームやユーザー登録フォームの作成も簡単です。WordPressで最高のお問い合わせフォームプラグインです。
このチュートリアルでは、ユーザー登録アドオンとより多くのカスタマイザーオプションが含まれているため、WPForms Proバージョンを使用します。ただし、WPForms Lite版(無料)もあります。
使い始めるには、WordPressサイトにWPFormsプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法のステップバイステップガイドを参照してください。
有効化した後、WPForms ” SettingsページにアクセスしてWPFormsのライセンスキーを入力してください。このキーはWPFormsサイトのアカウントエリアから取得できます。
その後、上部の「CAPTCHA」タブをクリックして、カスタマイザーWordPressフォーム用のreCAPTCHAを設定します。
まず、CAPTCHAのタイプを選択する必要があります。reCAPTCHA’オプションをクリックしてください。
先ほどはv2を選択したので、この例ではreCAPTCHA v3を選択し、さまざまなオプションを確認できるようにします。
しかし、我々の推奨は依然としてv2である。
その後、サイトキーとシークレットキーのフィールドが表示されます。これらのキーを取得するには、Google reCAPTCHAのサイトにサイトを登録する必要があります。
Google reCAPTCHAのサイトにアクセスし、右上の「v3 Admin Console」ボタンをクリックするだけです。
その後、Googleはあなたのアカウントにサインインするよう求めます。登録が完了すると、「新規サイトの登録」ページが表示されます。
次に、あなたのサイト名を入力し、reCAPTCHAのタイプから「Score based (v3)」を選択します。
次に、以下のスクリーンショットに示すように、ドメイン名(https://www.を含まない)を入力する必要があります。
送信」ボタンをクリックしてください。
その後、GoogleはあなたのサイトにreCAPTCHAを追加するためのサイトキーとシークレットキーとともに成功のメッセージを表示します。
これらのキーをコピーしてください。
Google reCAPTCHA APIキーが手に入ったので、WPForms reCAPTCHAの設定が開かれているブラウザータブまたはウィンドウに戻る必要があります。
次に、reCAPTCHAタブに行き、サイトキーとシークレットキーを入力するだけです。入力が完了したら、設定を保存してください。
WPFormsにreCAPTCHAを追加できたので、カスタマイザーログインフォームやユーザー登録フォーム、WPFormsで作成したフォームで簡単にreCAPTCHAを有効化できます。
では、WordPressのカスタム登録フォームを作ってみましょう。
まず、WPForms ” Addonsページにアクセスし、User Registration Addon を見つけてください。ここから’アドオンのインストール’ボタンをクリックします。
その後、WPFormsがアドオンをダウンロードしてインストールします。ユーザー登録アドオンの状態が ‘有効化’ になっていることを確認したら、新規ユーザー登録フォームを追加する準備は完了です。
WPForms ” 新規追加で WPForms Builder を起動します。WPForms 設定ページで ‘ユーザー登録フォーム’ テンプレートを選択し、フォームの名前を入力します。
テンプレートを選択すると、WPFormsドラッグアンドドロップフォームビルダーがドロップされます。
その後、WPFormsは自動的にカスタマイザー登録フォームを作成し、フォーム設定ページを開きます。
これで、新しいフィールドを追加したり、フィールドオプションを編集してフォームをカスタマイズすることができます。初期設定のフォームが気に入ったのであれば、何も変更せずにそのまま使うことができます。
次に、左メニューの’設定’タブでフォームの設定を行います。そして’スパム保護とセキュリティ’設定に切り替え、Google v3 reCAPTCHA を有効化します。
完了したら、右上の「保存」ボタンをクリックします。
これで完了です!カスタムWordPressユーザー登録フォームを作成し、reCAPTCHAを追加しました。
次にすることは、カスタマイザーユーザー登録フォームをサイトに追加することです。フォームビルダーの’埋め込み’ボタンをクリックしてください。
次に、既存のページを選択するか、フォームを埋め込むための新しいページを作成する必要があります。
このチュートリアルでは、「新規ページ作成」オプションを使用します。
その後、新しいページの名前を入力することができます。
それが完了したら、「Let’s Go」ボタンをクリックするだけだ。
次に、コンテンツエディターに登録フォームのプレビューが表示されます。
また、WPFormsブロックを使ってフォームを追加することもできます。
ページを公開し、ウェブブラウザーでアクセスすると、Google reCAPTCHAを使ったカスタマイザー登録フォームを見ることができます。
この例ではreCAPTCHA v3を選んだので、「私はロボットではありません」のようなGoogle reCAPTCHAのチェックボックスは表示されません。これはreCAPTCHA v3がバックグラウンドで動作するためですが、それでも右下に小さなバッジが表示されます。
カスタムログインフォームの作成方法はほとんど同じです。
唯一の違いは WPForms 設定ページからユーザーログインフォームのテンプレートを選択する必要があることです。
詳しくは、WordPressでカスタムログインページを作成する方法をご覧ください。
WordPressのログインフォームや登録フォームにCAPTCHAを追加する方法について、この投稿がお役に立てば幸いです。WordPress ログインページプラグインのベストリストと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.
Ayanda Temitayo
This is truely a step by step guide. I just created my own captcha form with this guide. Thank you wpbeginner for always dishing fantastic article. However, I noticed most of the plugin require pro version to use the captcha. Is there any free form plugin that allows captcha?
And if I want to use captcha on another website, I have to create another Google recaptcha?
WPBeginner Support
Unless there has been a change in the requirements, you can either create a new key or use the same one depending on your needs.
管理者
Mrteesurez
Nice article.
Add this forms of security especially to a Wordpress site seem to be saver for me than using just an Akismet plugin or using both together.
Can I use the same captcha keys on all other websites I have ??
WPBeginner Support
Unless Google changes their terms then you can use the same key for multiple domains.
管理者
Logan Cale
Why are so many of your screen grab images so blurry? I would like to think in 2024 we can finally have only sharp images in webpages…
WPBeginner Support
The only blurs should be our secret keys but we will take a look and update any images that may be blurry.
管理者
Ralph
I do not have a problem with anyone trying to register to my website but recently many spammers are using my contact form and send rubbish to my email. Do you guys have tutorial how to set captcha for contact forms?
WPBeginner Support
You can see our guide on preventing contact form spam below!
https://www.wpbeginner.com/plugins/how-to-block-contact-form-spam-in-wordpress/
管理者
Frankie
I added reCAPTCHA on my test site. The reCAPTCHA box is left aligned. I prefer to have it centered. Is there a way to achieve it?
Thanks in advance.
WPBeginner Support
It would depend on the method you used to add the reCAPTCHA to your site, you should be able to use inspect element following our guide below to find and change the alignment:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site
管理者
Farhan
Thanks a lot! Really saved my time.
WPBeginner Support
You’re welcome
管理者
Kenny Sawyer
I have several web sites and it looks like I need to use different Google reCAPTCHA keys on each web site using the WPForms Lite version… I can’t just use the same keys over and over because each set of keys is associated with a particular site. Is this correct?
WPBeginner Support
Correct
管理者
s sah
Thankyou so much for great articles.
i add captcha on my site via 1st method.
WPBeginner Support
You’re welcome, glad our recommendation was helpful
管理者