1,673 views

この記事は最終更新から 2183日が経過しています。

1. やりたいこと

投稿フォームを WEB上に公開するとスパムにゴミ投稿される危険性がある。

これを回避する策として、Googleが reCAPTCHA なるものを無料で公開してくれている。

reCAPTCHAが設置された投稿ページでは、投稿者は、
「この中からネコを選んでください。」
のような質問に答えて自分が BOTではないことを証明しなければならない。

Contact Form 7にはこれを使う仕組みが用意されている。

2. やってみる

「My reCAPTCHA」ボタンを押下する。
https://www.google.com/recaptcha/

その後、要求に従って情報を入力し、キーを得る。

この手順は、Contact Form 7 の公式ページに書かれている。
https://contactform7.com/recaptcha/

簡単に書くと以下の通り。
1) WORDPRESSの管理画面にログインする。
2) 「お問い合わせ」－「インテグレーション」メニューを選択する。
3) 上記(1)で取得したキーを設定する。
以上

任意の場所にカーソルを置き [reCAPCHA] ボタンを押下すると、コードが貼り付けられる。

これにチェックを付けずに [送信] ボタンを押すとエラーメッセージが表示される。

簡単に手順だけをメモっておく。

1) 上記 2.－(3) で reCAPCHAに以下の情報を追記する。
・IDを付与しておく。仮に my-recaptcha とする。
・中寄せ指定のブロック要素で囲んでおく。ここでは div を使う。

<div style="text-align:center">
    [recaptcha id:my-recaptcha]
</div>

2) style.css で aaaaa をインラインブロック指定しておく。

#my-recaptcha{
    display: inline-block;
}

これで reCAPTCHAがセンタリングされるようになる。