WordPress Twenty Sixteen カスタマイズ 12-4 「Contact Form 7」プラグイン 「reCAPTCHA」 設定

ごけたです。
「reCAPTCHA」は「リキャプチャ」と読むそうですが、
暫く目にしないと読めなくなる類の単語です。

はじめに


Wordpress Twenty Sixteen カスタマイズ その12-4

今回は「お問い合わせページ」の設定に使用したプラグイン「Contact Form 7」の
「フォーム」タグのメニュー欄にある「reCAPTCHA」の設定です。

ページ構成
OSはWindows、ブラウザーはchrome、レンタルサーバーはエックスサーバーです。
画像、ソースコード、その下に説明文の構成になっています。
画像はクリックすると拡大されて表示されます。

「reCAPTCHA」とは

「Contact Form 7」の「フォーム」タグのメニュー欄にある
「reCAPTCHA」を見て、何でしょ、これ? となりまして検索すると

「海外の通販サイト」、「コメント欄」、「お問い合わせページ」などで見る
「私はロボットではありません」表示ができるGoogle提供のシステムだそうです。
設置することでサイト自体の安全性を高めてくれます。
ロボットからだけなく、個人からの攻撃も多少なり守れます。

「reCAPTCHA」の設定

事前準備-1

Googleが提供していますので、「Google アカウント」が必要になります。

ここでは既に「Googleアカウント」を取得されている前提で進めさせて頂きます。

事前準備-2


Wordoressにログインして、管理画面のメニューから「お問い合わせ」の
「インテグレーション」をクリックします。

「他のサービスとのインテグレーション」が表示されます。

「キーを設定する」はまだクリックしません。
Wordpredsdsはそのままの状態で一旦離れます。

新規ウインドウを開きます。

「Google reCAPTCHA」と入力検索します。

reCAPTCHA is a security service that protects your websites from fraud and abuse.

新規ウインドウで「Google reCAPTCHA」と入力検索します。

画面右上の


「My reCAPTCHA」をクリックします。
「Google カウント」のログインページが表示されます。
「アカウントとパスワード」を入力してログインします。

Register a new site


ログインが完了すると「Register a new site」が表示されます。
※Google翻訳では「新しいサイトを登録する」

Label
「Label」は「サイト名」が無難です。
私の場合:「ごけたブログ」です。

Choose the type of reCAPTCHA
※Google翻訳では「reCAPTCHAのタイプを選択しますか?」

「Checkbox」にチェックを入れます。
「私はロボットではありません」の設定になります。

Domains
「Domains」は自分のサイトのドメインです。
私の場合:「0street-0times.com」になります。
一行で入力しないといけないようです。

Accept the reCAPTCHA Terms of Service.
※Google翻訳では「reCAPTCHA利用規約に同意します。」
チェックを入れます。

Send alerts to owners?
※※Google翻訳では「オーナーにアラートを送信しますか?」
チェックを入れたままです。

右側の「Register(登録)」ボタンをクリックします。

画面中段の


「Register(登録)」ボタンをクリック後に
画面中段に表示されている「sitekey」と「secretkey」を確認します。
ここで「sitekey」をコピーします。

WordPressに戻ります

WordPressを表示します。

「事前準備-2」で表示した「他のサービスとのインテグレーション」内の
「キーを設定する」ボタンをクリックします。


「サイトキー」に「Google reCAPTCHA」の「sitekey」をペーストします。

同様に「シークレットキー」に「Google reCAPTCHA」の「secretkey」をコピペします。

「保存」ボタンをクリックします。

コンタクトフォームの表示


同じ「お問い合わせ」設定の「コンタクトフォーム」をクリックします。

「お問い合わせページ」のタイトルをクリックして、
「コンタクトフォームの編集」画面を表示します。

「フォーム」タグが表示されているか確認します。

[submit “sendボタン”]に


「[submit “送信”]」の最後尾の「]」の後ろにカーソルを置いて、
「Enterキー」を2回押します。
カーソル位置が「reCAPTCHA」の「タグを挿入」する場所になります。

「フォーム」タグの
メニュー欄から「reCAPTCHA」をクリックします。


「フォームタグ生成: reCAPTCHA」ウインドウが表示されます。

サイズ ノーマル コンパクト
テーマ 明るい 暗い
表示設定をしますが、初期設定のままで行っています。

一番下の「タグを挿入」ボタンをクリックします。


「フォーム」設定画面一番下に「[recaptcha]」が設置されます。
一番下か右上の「保存」ボタンをクリックします。

お問い合わせページを表示


「お問い合わせページ」を表示して、「送信ボタン」の下に
「私はロボットではありません」表示があるか、
「私はロボットではありません」に「チェックを入れて」、
表示問題、回答後、お問い合わせページ内容を入力後、
「送信」ボタンをクリックして、送信できたか確認します。

送信ができていたら「Google reCAPTCHA」の設定は完了です。

さいごに


サイトを表示すると「Version3.0 Beta」となっていますが、
実際に設定すると「Version2.0」になっています。

エラーがでなければバージョンは気にしなくても宜しいかと。
「お問い合わせページ」では「Google reCAPTCHA」でしたが、
「コメント欄」では表示されている数字や文字を入力する
「キャプチャコード」が多いようです。

コメント欄に「Google reCAPTCHA」に設置するにも、
「キャプチャコード」を設置するのも、「プラグイン」使用なので
現状保留にしています。

最後までお合い下さいまして有難うございました。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク