HoBoFoTo

Hobo everyday foto.

日本語 English

Jetpack のコンタクトフォームをカスタマイズする方法(google reCaptcha編)

 前回の

HoBoFoTo AMP
Jetpack のコンタクトフォームをカスタマイズする方法(コンタクトフォーム挿入編)
Contents1 google reCaptchaの設置1.1 プラグインのダウンロード1.2 Google resecret keyの取得  前回のにてJetpackのコンタクトフォーム挿入をする方法をしました。  ...
にてJetpackのコンタクトフォーム挿入をする方法をしました。
 それでは今回はカスタマイズ第一弾、google reCaptchaの設置をする方法を紹介しようと思います。

google reCaptchaの設置

 カスタマイズ第一弾はgoogle reCaptchaの設置です。

 こんな感じの物を見たことがあると思います。このreCaptchaはスパム対策にもなるので、設置しといた方がいいのではないかと思います。

プラグインのダウンロード

 設置するにあたってまず、

WordPress.org
Jetpack reCaptcha
Google reCaptcha integration for Jetpack contact forms
というプラグインを使用します。
 このプラグインをダウンロードして有効化してください。そうすると「設定」に「JP reCaptcha」というのができていると思います。
 英語表記になっていますが、設定自体は難しくありません。
(どうしても日本語化したい方はこちらに日本語版のmoファイルを用意しましたので使ってください。)

Google resecret keyの取得

 まず、reCaptcha credentials:(reCaptcha の情報)に
Before you setup this plugin, make sure to go to Google reCaptcha website and register your site. After that, insert both public and secret captcha keys in the following fields. A tutorial might also help.
(このプラグインを設定する前に、Google reCaptchaのウェブサイトにアクセスしてサイトを登録してください。 その後、以下のフィールドに public key と secret key の両方を挿入してください。不明な点があれば、チュートリアルも役立つと思います。)
 とありますので、Google reCaptchaのkeyを取得したいと思います。(すでに取得されている方は読み飛ばしてください)
まずは、

www.google.com
reCAPTCHA
reCAPTCHA is a free security service that protects your websites from spam and abuse.
を開いて、右上にあるをクリックしてください。(ここでGoogleアカウントにサインインしないといけないかもしれません)すると

Register a new site(新しいサイトを登録する)とあるので、

  • Label(ラベル):ここに自分のサイト名など(このサイトていえばwww.hobofoto.net)を入れる
  • Choose the type of reCAPTCHA(reCAPTCHAのタイプを選ぶ):reCAPTCHA V2を選択してください。

 そうすると以下のフォームが出てくるので、

  • Domains(ドメイン):自分のサイトのドメイン(このサイトていえばhobofoto.net)を入れる
  • Accept the reCAPTCHA Terms of Service.(reCAPTCHA利用規約に同意します。):チェックを入れてください。

 最後にRegister(登録)をクリックしてください。上手くいくと


 と表示されるので、Step 1 : Client side integrationの上にあるkeysをクリックしてください。
 そこに

と、表示されるので、Site keyとSecret keyをそれぞれ、「設定」「JP reCaptcha」にあるJetpack reCaptcha Setting(Jetpack reCaptcha設定)に記入していきます。このときreCaptcha Language:(reCaptcha言語)もJapaneseにしておきましょう。

 最後に、「設定を変更」をクリックすれば、終了です。

 これで前回作ったコンタクトフォームの送信の上に

が表示されれば設定は完了です。(表示されるまでサーバーによってはすこし時間がかかります。気長にお待ちください)

 今回はこれぐらいにしておきます。
 次回は送信後に別のページを表示する方法を紹介したいと思います。

共有:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です