Jetpack のコンタクトフォームをカスタマイズする方法(google reCaptcha編)
前回の
それでは今回はカスタマイズ第一弾、google reCaptchaの設置をする方法を紹介しようと思います。
google reCaptchaの設置
カスタマイズ第一弾はgoogle reCaptchaの設置です。
こんな感じの物を見たことがあると思います。このreCaptchaはスパム対策にもなるので、設置しといた方がいいのではないかと思います。
プラグインのダウンロード
設置するにあたってまず、
このプラグインをダウンロードして有効化してください。そうすると「設定」に「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を取得したいと思います。(すでに取得されている方は読み飛ばしてください)
まずは、
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にしておきましょう。
最後に、「設定を変更」をクリックすれば、終了です。
これで前回作ったコンタクトフォームの送信の上に
が表示されれば設定は完了です。(表示されるまでサーバーによってはすこし時間がかかります。気長にお待ちください)
今回はこれぐらいにしておきます。
次回は送信後に別のページを表示する方法を紹介したいと思います。