Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPressのログイン・登録フォームにCAPTCHAを追加する方法

編集メモ: WPBeginner のパートナーリンクから手数料を得ています。手数料は編集者の意見や評価に影響を与えません。編集プロセスについて詳しく知る。

WordPressサイトのログインフォームや登録フォームにCAPTCHAを追加したいですか?

WordPressのログインページやユーザー登録ページは、しばしばハッカーやスパマー、総当たり攻撃の格好の標的となります。このような攻撃を避ける一つの方法は、CAPTCHAを使用することです。CAPTCHAは効果的にスパムボットをブロックし、サイトをハッキングから守ります。

この投稿では、WordPressのログインフォームと登録フォームにCAPTCHAを追加する方法を紹介します。

How to add captcha in WordPress login and registration form

CAPTCHAとは?

CAPTCHAは、誰かが人間か自動化されたユーザーかを判別するコンピュータープログラムです。これは、人間のユーザーにとっては非常に簡単であるが、自動化されたスクリプトやボットにとってはほとんど不可能なテストを表示することによって行われます。

CAPTCHAの初期の頃は、ユーザーは画像に表示されたテキストを入力するよう求められた。この画像には、ランダムな文字、単語、数字が歪んだスタイルで表示されていた。

Older captcha

その後、reCAPTCHAと呼ばれる新しい技術が導入された。

ランダムな単語を課題として表示し、ユーザーからの入力を本のデジタル化に役立てた。

Digital recaptcha

この技術は2009年にGoogleに買収された。それ以来、何千冊もの書籍やNew York Timesのアーカイブのデジタル化に貢献している。

しかし、これらの新しいCAPTCHAは依然として煩わしく、しばしばサイトのユーザー体験を台無しにしていた。

これを解決するため、Googleは人工知能(AI)とユーザーとのやりとりを利用してスパムボットを捕まえる「No CAPTCHA reCAPTCHA」を導入した。

New recaptcha

人間のユーザーがクリックしやすいチェックボックスが表示されます。その他の不審なトラフィックに対しては、画像内のオブジェクトを識別するような、より難しいCAPTCHAを表示する。

とはいえ、WordPressサイトがCAPTCHAを使ってどのようにセキュリティを向上できるかを見てみましょう。

なぜWordPressのログインと登録にCAPTCHAを使うのか?

WordPressのログインページや登録ページは、スパマーやハッカー志願者、ブルートフォース攻撃の格好の標的です。

WordPressは世界で最も人気のあるサイトビルダーであり、悪意のある試みのターゲットになりやすいからだ。

攻撃者の動機は、多くの場合、WordPressの管理エリアに不正アクセスしてマルウェアを配布することです。また、特定のホスティングサービス会社でホスティングされているサイトネットワーク全体をクラッシュさせ、身代金を要求するケースもあります。

WordPressサイトを保護する最も簡単な解決策は、SucuriのようなWordPressファイアウォールプラグインを使用することです。あなたのサイトに悪質なトラフィックが到達するのをブロックし、不正アクセスを防ぎます。

もう一つの解決策は、WordPressのログインや登録ページにパスワード保護の第二のレイヤーを追加することです。しかし、この方法の問題点は、各ユーザーと2つ目のパスワードを共有する必要があり、大規模なマルチオーサーブログや会員制サイトでは拡張性がないことです。

CAPTCHAは、これらのソリューションに代わる簡単な代替手段を提供します。CAPTCHAは、GoogleのAI技術を使用して、本物のビジターを検出し、不審なユーザーにCAPTCHAの課題を提示します。

初期設定とカスタマイザーのWordPressログイン・登録フォーム

初期設定のWordPressログイン・登録フォームは基本的な機能を備えています。

ログインページでは、ユーザーがそれぞれの権限グループに従ってサイトのバックエンドにアクセスすることができます。

The WordPress default login page

初期設定のWordPress登録フォームでは、訪問者がサイトにアカウントを作成することができます。一度登録されると、サイトのバックエンドにログインし、ユーザー権限グループによって許可された特定のタスクを実行することができます。

多くのサイトオーナーは、初期設定のWordPressログインページや登録ページを自分のロゴやスタイルなどでカスタマイズしたいと考えています。多くのプラグインを使用して、初期設定のログインページと登録ページを置き換えるためのカスタマイザーページを作成します。

初期設定のページでも、カスタマイザーのページでも、私たちにお任せください。

このガイドでは、WordPressの初期設定とカスタマイザーのログインと登録ページの両方にreCAPTCHAを設定する方法を紹介します。下のリンクをクリックすると各セクションにジャンプできます:

WordPressのログインフォームと登録フォームの初期設定にreCAPTCHAを追加する

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

プラグインを有効化したら、管理画面から CAPTCHA 4WP” CAPTCHA Configurationページにアクセスする必要があります。

セットアップウィザードが表示されます。次へ」ボタンをクリックしてください。

Captcha 4wp welcome note

その後、使用するreCAPTCHAのタイプを選択する必要があります。

ユーザーが’I am not a robot’(私はロボットではありません)チェックボックスにチェックを入れるバージョン2、ユーザーとの対話は必要ないが、不審なトラフィックに対してCAPTCHAが表示されるバージョン2など、3つのオプションから選択できる。最後に、バージョン3は、ユーザーとの対話なしにスコアでリクエストを検証します。

このチュートリアルでは、「バージョン2(ユーザーは “I’m not a robot “チェックボックスにチェックを入れる必要があります)」タイプを選択します。

Select captcha type in 4wp

完了したら、「次へ」ボタンをクリックする。

次の画面では、Google reCAPTCHAサイトキーを入力する必要があります。

Specify the site keys

これらのGoogle reCAPTCHA APIキーを取得するには、reCAPTCHAのサイトにアクセスする必要があります。

次に、上部にある「v3 Admin Console」オプションをクリックします。

View captcha admin console

次の画面で、Googleはあなたのアカウントにログインするよう求めます。ログイン中、新規サイトの登録ページが表示されます。

まず、「Label」フィールドにサイト名を入力する必要があります。その後、reCAPTCHAのタイプを選択する必要があります。例えば、reCAPTCHA v2 ‘I’m not a robot’ チェックボックスを選択します。

Enter captcha label and select version

次に、「ドメイン」セクションにドメイン名を入力する必要があります。

ドメイン名は必ず「https://www」の部分を除いて入力してください。

Enter domain for captcha

送信」ボタンをクリックしてください。

次に、WordPressサイトで使用できるサイトキーとシークレットキーとともに、成功メッセージが表示されます。

Copy site and secret key

サイトとシークレットキーをコピーできる。

次に、CAPTCHA 4WPセットアップウィザードが開いているブラウザータブまたはウィンドウに戻る必要があります。ここから、Google CAPTCHAサイトキーキーを入力することができます。

Enter site key

完了したら、「I’m not a robot(私はロボットではありません)」にチェックを入れ、「Proceed to secret key(シークレットキーに進む)」ボタンをクリックします。

次にシークレットキーを入力し、「Validate & proceed」ボタンをクリックします。

Enter secret key

すると、成功のメッセージが表示されます。

Finish」ボタンをクリックするだけです。

View success button

その後、CAPTCHA 4WPの追加設定を行うことができます。

例えば、言語の変更、エラーメッセージの編集、テーマの選択などのオプションがある。

Edit captcha 4wp settings

完了したら、「変更を保存」ボタンをクリックするだけです。

これで完了です!これでWordPressの初期設定ログインと登録フォームにreCAPTCHAを追加することに成功しました。

プレビューするには、WordPressのログインURLをブラウザーで開きます。例えば、www.example.com/wp-login.php。

reCaptcha preview

登録フォームでreCAPTCHAを確認したい場合は、ログインフォームの下にある「登録」リンクをクリックしてください。その後、WordPressの登録フォームが開き、reCAPTCHAがどのように機能するかを見ることができます。

カスタムWordPressログインフォームと登録フォームのreCAPTCHA

先に述べたように、WordPressのカスタムログインと登録フォームは、サイトのメンバーや訪問者によりユーザーフレンドリーな会員設定を提供します。

まず、これらのフォームにより、ユーザーはフロントエンドからサイトに登録またはログインすることができます。これによりユーザーエクスペリエンスが向上し、サイト全体で同じデザインエクスペリエンスを維持することができます。

次に、あなたのサイトのロゴを追加し、ログインと登録ページをあなたのスタイルでカスタマイズすることができます。

さらに、最もユーザーフレンドリーなWordPressフォームプラグインであるWPFormsを使えば、カスタマイザーによるログインフォームやユーザー登録フォームの作成も簡単です。WordPressで最高のお問い合わせフォームプラグインです。

WPForms

このチュートリアルでは、ユーザー登録アドオンとより多くのカスタマイザーオプションが含まれているため、WPForms Proバージョンを使用します。ただし、WPForms Lite版(無料)もあります。

使い始めるには、WordPressサイトにWPFormsプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法のステップバイステップガイドを参照してください。

有効化した後、WPForms ” SettingsページにアクセスしてWPFormsのライセンスキーを入力してください。このキーはWPFormsサイトのアカウントエリアから取得できます。

Adding a license key to the WPForms form builder plugin

その後、上部の「CAPTCHA」タブをクリックして、カスタマイザーWordPressフォーム用のreCAPTCHAを設定します。

まず、CAPTCHAのタイプを選択する必要があります。reCAPTCHA’オプションをクリックしてください。

Captcha tab in WPForms

先ほどはv2を選択したので、この例ではreCAPTCHA v3を選択し、さまざまなオプションを確認できるようにします。

しかし、我々の推奨は依然としてv2である。

Select v3 captcha type

その後、サイトキーとシークレットキーのフィールドが表示されます。これらのキーを取得するには、Google reCAPTCHAのサイトにサイトを登録する必要があります。

Google reCAPTCHAのサイトにアクセスし、右上の「v3 Admin Console」ボタンをクリックするだけです。

View captcha admin console

その後、Googleはあなたのアカウントにサインインするよう求めます。登録が完了すると、「新規サイトの登録」ページが表示されます。

次に、あなたのサイト名を入力し、reCAPTCHAのタイプから「Score based (v3)」を選択します。

Select v3 captcha version

次に、以下のスクリーンショットに示すように、ドメイン名(https://www.を含まない)を入力する必要があります。

送信」ボタンをクリックしてください。

Enter domain for captcha

その後、GoogleはあなたのサイトにreCAPTCHAを追加するためのサイトキーとシークレットキーとともに成功のメッセージを表示します。

これらのキーをコピーしてください。

Copy site and secret key

Google reCAPTCHA APIキーが手に入ったので、WPForms reCAPTCHAの設定が開かれているブラウザータブまたはウィンドウに戻る必要があります。

次に、reCAPTCHAタブに行き、サイトキーとシークレットキーを入力するだけです。入力が完了したら、設定を保存してください。

Enter site and secret keys in WPForms

WPFormsにreCAPTCHAを追加できたので、カスタマイザーログインフォームやユーザー登録フォーム、WPFormsで作成したフォームで簡単にreCAPTCHAを有効化できます。

では、WordPressのカスタム登録フォームを作ってみましょう。

まず、WPForms ” Addonsページにアクセスし、User Registration Addon を見つけてください。ここから’アドオンのインストール’ボタンをクリックします。

The WPForms user registration addon

その後、WPFormsがアドオンをダウンロードしてインストールします。ユーザー登録アドオンの状態が ‘有効化’ になっていることを確認したら、新規ユーザー登録フォームを追加する準備は完了です。

WPForms ” 新規追加で WPForms Builder を起動します。WPForms 設定ページで ‘ユーザー登録フォーム’ テンプレートを選択し、フォームの名前を入力します。

Select user registration form template in wpforms

テンプレートを選択すると、WPFormsドラッグアンドドロップフォームビルダーがドロップされます。

その後、WPFormsは自動的にカスタマイザー登録フォームを作成し、フォーム設定ページを開きます。

Edit user registration form

これで、新しいフィールドを追加したり、フィールドオプションを編集してフォームをカスタマイズすることができます。初期設定のフォームが気に入ったのであれば、何も変更せずにそのまま使うことができます。

次に、左メニューの’設定’タブでフォームの設定を行います。そして’スパム保護とセキュリティ’設定に切り替え、Google v3 reCAPTCHA を有効化します。

Enable v3 reCAPTCHA

完了したら、右上の「保存」ボタンをクリックします。

これで完了です!カスタムWordPressユーザー登録フォームを作成し、reCAPTCHAを追加しました。

次にすることは、カスタマイザーユーザー登録フォームをサイトに追加することです。フォームビルダーの’埋め込み’ボタンをクリックしてください。

Embed your form

次に、既存のページを選択するか、フォームを埋め込むための新しいページを作成する必要があります。

このチュートリアルでは、「新規ページ作成」オプションを使用します。

Embed a form in page

その後、新しいページの名前を入力することができます。

それが完了したら、「Let’s Go」ボタンをクリックするだけだ。

Enter name for form embed page

次に、コンテンツエディターに登録フォームのプレビューが表示されます。

また、WPFormsブロックを使ってフォームを追加することもできます。

Add a WPForms block in wordpress

ページを公開し、ウェブブラウザーでアクセスすると、Google reCAPTCHAを使ったカスタマイザー登録フォームを見ることができます。

この例ではreCAPTCHA v3を選んだので、「私はロボットではありません」のようなGoogle reCAPTCHAのチェックボックスは表示されません。これはreCAPTCHA v3がバックグラウンドで動作するためですが、それでも右下に小さなバッジが表示されます。

Registration form with recaptcha

カスタムログインフォームの作成方法はほとんど同じです。

唯一の違いは WPForms 設定ページからユーザーログインフォームのテンプレートを選択する必要があることです。

Select user login form template

詳しくは、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.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

17件のコメント返信を残す

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Ayanda Temitayo says

    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 says

      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.

      管理者

  3. Mrteesurez says

    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 says

      Unless Google changes their terms then you can use the same key for multiple domains.

      管理者

  4. Logan Cale says

    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 says

      The only blurs should be our secret keys but we will take a look and update any images that may be blurry.

      管理者

  5. Ralph says

    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?

  6. Frankie says

    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.

  7. Kenny Sawyer says

    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?

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。