最近、コメント欄のスパムが多いので、対策をしてみました。
今回使ったのは google の reCAPTCHA (リキャプチャ) です。
reCAPTCHA とはスパムなどを自動送信したり、不正アクセスを試みるコンピュータからサイトを守るセキュリティサービス。よくある「私はロボットではありません」とか「車の画像を全て選択してください」とかのテストが出てくるあれです。
（ちなみにCompletely Automated Public Turing test to tell Computers and Humans Apartの略だそうです。）
コメント欄のスパム対策だと「Akismet」というプラグインも有名ですが、こちらは広告などを付けている商用サイトでは有料となっているので、reCAPTCHAを使用しました
reCAPTCHAの公式サイトで自分のウェブサイトを登録する
以下の公式サイトのリンクにアクセス。
公式サイトの上部にある「v3 Admin Console」をクリックして「新しいサイトを登録する」という画面に行く。
ラベル、reCATCHAタイプ、ドメインを入力・選択して送信をクリック。
reCATCHAタイプは最新版のv3でよいかと。
「サイトキー」と「シークレットキー」が表示されるので、控えておく。
WordPressでプラグインをインストール
「Invisible reCaptcha for WordPress」というプラグインをインストールし、有効化する。
設定 → Invisible reCAPTCHA と辿ってreCAPTCHAの設定画面へ
「サイト鍵」と「秘密鍵」にreCAPTCHAの公式サイトで得た「サイトキー」と「シークレットキー」をコピペする。
「言語」は「自動検出」、「バッジ位置」は好きな位置を選択し、変更を保存
サイドバーの「WordPress」をクリックして「コメントフォームの保護を有効化」にチェックを入れる。
他の選択肢もチェックを入れておくと、セキュリティーが高まるので入れておくとよい。
バッジ位置を調整する
サイトで使っているのテーマによってはトップへ戻るボタンと表示が被る。
場所が気に入らない場合は、以下のコードをstyle.cssに追記して、バッジの表示位置をずらすこともできる。
（外観 → テーマエディター → style.cssファイルを選択し、追記）
/*reCaptchaの表示位置*/
.grecaptcha-badge {
bottom: 80px!important;
}バッジを上にずらして表示できる。
補足
!importantを入れないと上手く表示されなかった。
（importantは他のcssで指示があった場合でもこちらを優先する命令文）
cssを書き込むには、外観 → カスタマイズ → 追加css
と辿って追加cssに書き込んでも良いが、ここに書き込むとヘッダーにコードが書き込まれる。
HTMLにCSSを埋め込むのはGoogleのガイドライン（Google HTML/CSS Style Guide）としては推奨されていないらしい。
ちなみに、このバッジを隠したり、表示を消したりするのはreCAPTCHAの規約違反。ただし、reCAPTCHAブランディングをユーザーの目に見える形で表示しておけば、バッジを消しても良いとのこと。（参考：reCAPTCHAのQ&A）
参考サイト
初心者でも簡単！WordPressコメント機能の設定とスパム対策
↑コメント機能の設定からreCaptchaによるスパム対策まで
reCAPTCHA v3のバッジの位置を調整する
↑バッジ位置の調整について
スパム対策してみた！reCAPTCHA設定方法
↑バッジの位置の調整について
なべたろさんという方のページ
↑reCAPCHAについて詳しい。規約についても詳しく。
コメント