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でCloudflare Turnstile CAPTCHAを追加する方法

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

WordPressにCloudflare Turnstile CAPTCHAを追加しますか?

CAPTCHAとreCAPTCHAはスパムボットを阻止できますが、訪問者には不評です。Turnstileのような非侵入型テクノロジーを使用することで、訪問者に迷惑をかけることなく、スパムボットや自動スクリプトからサイトを保護することができます。

このガイドでは、WordPressサイトにCloudflare Turnstileを追加する方法を紹介します。

How to add Cloudflare Turnstile CAPTCHA in WordPress

なぜWordPressにCloudflare Turnstile CAPTCHAを追加するのか?

スパムやボットは、スパムリンクの送信、ログインフォームへの侵入、リードジェネレータフォームへのスパムメールの殺到など、サイトに問題を引き起こす可能性があります。

これらはすべて、ブルートフォース攻撃の余地を生み出し、訪問者のエクスペリエンスを台無しにする可能性がある。オンラインストアを運営している場合、自動化されたスクリプトが不正な注文を行う可能性もあります。

多くのサイトオーナーは、スクリプトやボットをブロックするためにCAPTCHAやreCAPTCHAを使用しています。しかし、これらのテクノロジーはユーザーエクスペリエンスを低下させると不満を持つ人も多く、CAPTCHAにデータを盗まれるのではないかと心配する人さえいます。

このような懸念を念頭に置いて、CloudflareはTurnstile CAPTCHAを導入しました。この技術は、ブラウザー上で不可視に実行されるシンプルで非侵入的なチャレンジを使用し、訪問者に複雑なパズルを解くよう求めることなくサイトを保護します。

さらに、アップルのプライベート・アクセストークンを使用することで、余分なデータを収集することなくユーザーを確認することができる。

フォームビルダーやWooCommerceを使用している場合、Turnstileはこれらのサードパーティプラグインとも統合します。これにより、WordPressサイトの様々なエリアに不可視のCAPTCHAを追加することができます。

それでは、WordPressにCloudflare Turnstile CAPTCHAを追加する方法を見てみましょう。以下のクイックリンクからお好きな方法にジャンプしてください:

方法1: WordPressのフォームにCloudflare CAPTCHAを追加する(推奨)

CloudflareのCAPTCHAをフォームに追加する最も簡単な方法は、無料のWPFormsプラグインを使用することです。

WPFormsは600万以上のサイトで使用されているドラッグ&ドロップ式のWordPressフォーム作成プラグインです。お問い合わせフォーム、予約フォームなど、すべての種類のフォームを作成するために使用することができます。

無料のWPFormsプラグインには、任意のフォームにドラッグ&ドロップできる既製のCloudflare Turnstileフィールドがあります。

WPFormsにターンスタイルCAPTCHAを追加する方法

まず、WPFormsプラグインをインストールして有効化する必要があります。ヘルプが必要な場合は、WordPressプラグインのインストール方法のガイドを参照してください。

有効化した後、WPForms ” Settingsに行き、CAPTCHAタブをクリックします。

Adding Cloudflare Turnstile to a WordPress form using WPForms

このページで「ターンスタイル」を選択する。

サイトキーとサイトシークレットを入力する新しい設定が表示されます。

Adding Cloudflare Turnstile CAPTCHA to a WordPress website

この情報を取得するには、新しいブラウザータブを開き、Cloudflareのログインページに移動します。メールアドレスを使ってCloudflareアカウントを作成する必要があります。

ダッシュボードにログインしたら、左側のメニューから「Turnstile」を見つけてクリックします。

The Cloudflare dashboard

Cloudflare Turnstileの基本情報が表示される画面が表示されます。

よろしければ、「サイトを追加」ボタンをクリックしてください。

Adding a site to the Cloudflare dashboard

この画面で、まず「サイト名」を入力する。

これはあくまで参考なので、お好きなものを使ってください。

Adding a WordPress website to the Cloudflare dashboard

次に、あなたのサイトのドメイン名を「Domain」フィールドに入力します。

次のステップは、どのCAPTCHAウィジェットを作成するかを選択することである。最初の選択肢は「Managed」で、これはCloudflareが推奨する方法です。これはCloudflareがブラウザーからのリクエストを分析し、どのようなチャレンジを実行すべきかを決定するものです。

この間、訪問者はローディング・アニメーションを見ることになる。

Adding a Cloudflare Turnstile CAPTCHA to WordPress

可能な限り、Cloudflareは訪問者が何もする必要がないように、バックグラウンドで非インタラクティブなチャレンジを実行するようにします。この場合、ユーザーはブラウザーがテストに合格すると「Success」メッセージを見るだけです。

時には、Cloudflareが代わりにインタラクティブなチャレンジを表示した方が安全だと判断することもあります。しかし、訪問者はパズルを完成させるのではなく、ボックスをチェックするだけなので、従来のパズルベースのCAPTCHAよりはまだ簡単です。

特別な理由がない限り、管理されたCAPTCHAを使用するのが賢明です。これにより、訪問者のエクスペリエンスへの影響を最小限に抑えながら、十分なレベルのセキュリティを確保できます。

How to create a managed CAPTCHA for WordPress

WordPressサイトでインタラクティブチャレンジを使用したくないですか?代わりに「非インタラクティブ」または「不可視」を選択できます。

非インタラクティブチャレンジはブラウザーで実行されるため、訪問者は何もする必要がありません。管理されたCAPTCHAと同様に、訪問者はローディングアニメーションとチャレンジ完了時の「成功」メッセージを見ることができます。

代わりに「不可視」を選択すると、訪問者はアニメーションや成功メッセージを見ることができません。この設定により、訪問者からCAPTCHAを完全に非表示にすることができ、混乱を避けることができ、WordPressテーマが乱雑になることもありません。

決定後、「Create」ボタンをクリックします。そうするとすぐに、Cloudflareがあなたのサイトキーとシークレットキーを表示します。

Creating a site key and secret key for your WordPress website

WordPressでCloudflare Turnstile CAPTCHAを設定する方法

WordPressのブログやサイトに戻り、「サイト・キー」と「サイト・シークレット」を追加する。

初期設定では、WPFormsは訪問者がCAPTCHAに失敗するたびに次のメッセージを表示します: ‘Cloudflare Turnstile verification failed, please try again later’.

Fail Message’フィールドに入力することで、カスタマイザーに置き換えることができます。

Customizing the failed CAPTCHA message

その後、’Type’ ドロップダウンを開き、light、dark、autoから選択することで、サイト上でのCAPTCHAの見え方をカスタマイズすることができます。

次の画像は、カスタムユーザー登録フォームで「ダーク」テーマがどのように見えるかの例です。

An example of the Cloudflare dark theme, on a WordPress blog or website

この決定をした後、画面を一番下までスクロールし、「Save Settings」をクリックする。

これで、任意のフォームにTurnstile CAPTCHA保護を追加する準備が整いました。

Saving the Cloudflare Turnstile settings in WPForms

WordPressのフォームにCloudflare Turnstile CAPTCHAを追加する方法

WPFormsを使用したWordPressへのCloudflare Turnstileの追加はシンプルで簡単です。

WPFormsを使って新規フォームを作成するには、WPForms ” Add Newにアクセスします。

Adding a new form to your WordPress website

まず始めに、「フォームの名前フィールド」にフォームの名前を入力します。これは参考のためなので、好きなものを使ってください。

WPFormsには既製のテンプレートが用意されているので、すぐに使い始めることができ、さまざまな種類のフォームを作成することができます。使いたいデザインが見つかったら、オレンジ色の’テンプレートを使う’ボタンをクリックしてください。

Creating a new form using ready-made templates

注: 無料のWPFormsプラグインには、メールマガジンの登録フォーム、お問い合わせフォームなどを作成するためのテンプレートが用意されています。あなたがより多くをしたい場合は、WPFormsのプレミアムバージョンにアップグレードすることで、1500以上のテンプレートのロックを解除することができます。

テンプレートを選択すると、WPFormsエディターが表示されます。

フィールドをカスタマイズするには、フォームエディターでクリックして選択するだけです。サイドバーが更新され、選択されたフィールドのすべての設定が表示されます。

Adding fields to a WordPress form

また、ドラッグ&ドロップでこれらのフィールドの外観の順序を変更することもできます。

Cloudflare Turnstileをフォームに追加するには、左側のメニューにある「Add Fields」タブをクリックするだけです。

ここで、ビルトイン「Turnstile」フィールドを見つけ、クリックしてフォームに追加します。

Adding Cloudflare Turnstile CAPTCHA to a WordPress form

WPFormsの右上に’Turnstile Enabled’アイコンが表示されるようになりました。

これにより、フォームがCloudflare Turnstileで保護されていることがわかります。

An example of a Cloudflare Turnstile CAPTCHA, on a WordPress form

もう一つのオプションは、フォームの設定でCloudflareを有効化することです。左側のメニューから「設定」を選択し、「スパム保護とセキュリティ」をクリックするだけです。

ここで「Enable Cloudflare Turnstile」スイッチをクリックして、無効化(灰色)から有効化(青色)にします。

Protecting your WordPress website or blog using Turnstile CAPTCHA

フォームの設定に満足したら、「保存」ボタンをクリックしてください。

フォームを表示したいページや投稿日に行き、’+’アイコンをクリックします。ポップアップが表示されたら、’WPForms’ と入力します。

Adding the WPForms block to your website

適切なブロックが表示されたら、クリックしてページや投稿に追加する。

新規WPFormsブロックで、ドロップダウンをクリックし、先ほど作成したフォームを選択します。

Creating a form with Cloudflare Turnstile

これでページを更新または公開することができます。これで、このページや投稿にアクセスすると、フォームがライブで表示されます。

方法2:コメントやWooCommerceなどにTurnstile CAPTCHAを追加する(無料プラグイン)

フォームをCloudflare Turnstileで保護したい場合、WPFormsを使えば数クリックでCAPTCHA保護を追加できます。

しかし、あなたのサイトの他のエリアにTurnstileを追加したい場合があります。例えば、WordPressのコメントスパムに対抗するために使用することができます。

A Cloudflare Turnstile CAPTCHA with a dark theme

WooCommerceストアでTurnstileを使用することもできます。

例えば、WooCommerceのログイン、サインアップ、購入手続きなどのeコマースページをすべて保護することができます。これにより、WooCommerceでの詐欺や偽の注文を防ぐことができます。

The Cloudflare Turnstile CAPTCHA on the WooCommerce checkout page

WordPressの他のエリアにCloudflareのCAPTCHAを追加する最も簡単な方法は、Simple Cloudflare Turnstileを使うことです。この無料プラグインはFormidable Forms や WPForms など多くの人気の WordPress プラグインやフォームビルダーと統合できます。

まず、プラグインをインストールして有効化する必要があります。WordPressプラグインのインストール方法については、こちらをご覧ください。

有効化したら、Settings ” Cloudflare Turnstileに進みます。

Adding a site key and secret key to a WordPress website

プラグインはサイトキーとサイトシークレットを要求します。この情報を取得するには、Turnstileアカウントをセットアップするときに上で説明したのと同じ手順に従ってください。

これで、WordPressダッシュボードに「サイトキー」と「サイトシークレット」を追加します。

Adding the Cloudflare secret key and site secret to WordPress

その後、CAPTCHAがあなたのサイトでどのように見えるか、どのように動作するか、一般設定でカスタマイザーしたいかもしれません。まず、’テーマ’ドロップダウンを開き、ライト、ダーク、オートから選択することができます。

サイト訪問者がさまざまな国から来る場合は、「Language」フィールドで「Auto Detect」を選択できます。こうすると、Cloudflare Turnstileは訪問者が使用している言語を使用します。

外観」モードでは、Turnstileウィジェットをすべてのユーザーに表示するか、特定のインタラクションのみに表示するかを選択できます。最も安全なオプションは’Always’を選択することです。

改札口送信ボタンを無効化することも可能です。このオプションを設定すると、ユーザーが改札チャレンジを完了したときにクリックする送信ボタンはなくなります。

下にスクロールすると、高度な設定があります。

Cloudflare Turnstile's advanced settings

ここでできることの1つは、スクリプトを遅延させることです。この設定は、JavaScriptコードを実行する前にページ全体が読み込まれるまで待つようにブラウザーに指示するため、ウェブページの読み込みを速くすることができます。

ただし、この設定によってサイトの他の部分で問題が発生する場合は、オフにしたほうがよいでしょう。

また、改札メッセージをカスタマイズすることもできます。初期設定では、Cloudflareは訪問者に「あなたが人間であることを確認してください」というメッセージを表示します。独自の文言を追加するには、「カスタムエラーメッセージ」フィールドに入力するだけです。

最後に、[追加の失敗メッセージ]を有効化することができます。この設定では、ユーザーがチャレンジに失敗した場合に改札ウィジェットの下に表示される追加メッセージを追加できます。

高度な設定の下にはホワイトリスト設定があります。

ここでは、ログイン中のユーザーがCloudflare Turnstileを完了しないように設定できます。また、チャレンジを通過する必要のないIPアドレスをリストアップすることもできます。

Whitelisting users to not do the CAPTCHA using the Cloudflare Turnstile plugin

その後、Cloudflare Turnstile CAPTCHAを使用したいエリアを選択できます。

ログインページユーザー登録フォーム、パスワードリセットページなど、WordPressにビルトインされているすべてのフォームでTurnstileを使用できます。

Enabling Cloudflare Turnstile CAPTCHA for the WordPress forms

インストールしたプラグインによっては、追加のオプションが表示される場合があります。

例えば、WooCommerceを使ってオンラインマーケットプレイスやストアを作成した場合、WooCommerce Formsセクションが表示されます。

Adding CAPTCHAs to your WooCommerce forms

クリックしてこのセクションを展開すると、Cloudflare CAPTCHAを追加できるすべてのWooCommerceページが表示されます。

保護したいページの横にあるボックスにチェックを入れるだけです。

Protecting your WooCommerce store with a CAPTCHA

入力した情報に問題がなければ、画面を一番下までスクロールし、「変更を保存」をクリックします。

今、あなたのサイトにアクセスすると、Turnstile CAPTCHAが動作しているのがわかります。

究極のガイドでスパムからサイトを守る

あなたのサイトを不正ユーザーや悪意のあるボットからさらに安全に保ちたいですか?以下の投稿をチェックして、サイトのセキュリティを向上させましょう:

この投稿がWordPressにCloudflare Turnstile 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

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

  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. Dennis Muthomi says

    a huge thank you to the WPBeginner team for creating such a comprehensive, step-by-step guide with all the screenshots. You broke it down really well, making it easy for non-techie bloggers like myself to understand and implement. I used the simple Cloudflare Turnstile plugin method to add the Turnstile CAPTCHA to the comments section on my blog. Spam comments have been a major concern lately on my blog. its the guides like this are an absolute lifesaver

  3. Mohamad says

    Hi, thanks for the post. A quick question, do I think disabling submit button until the user answers CF Turnstile is required?

    • WPBeginner Support says

      It is not required but it can help reduce user confusion if you disable the submit button until it is checked.

      管理者

返信を残す

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