当サイトでも使用しているWordPressの無料テーマ「Luxeritas」。ありがたいことに、Googleの「reCAPTCHA v3」にも対応していて、「カスタマイズ>画像認証」でSite key及びSecret keyを入力することで、自サイトに「reCAPTCHA v3」を導入することができます。
また、「Page Top ボタン」(右下のトップに戻るボタン)と被らないように、調節する機能も標準でついています。CSSをいじらないですむので、非常に簡単です。たぶんほとんどん人が使用しているプラグイン「Contact Form 7」でも「reCAPTCHA v3」は導入できますが、「Page Top ボタン」と被らないようにできるので、こちらの方が便利です。
しかし、これには一つ問題があって、「カスタマイズ>画像認証」で「reCAPTCHA v3」をONにするだけでは、固定ページに「reCAPTCHA v3」が適用されないのです。つまり、お問い合わせページも「reCAPTCHA v3」が適用されないということです。
そこで「Luxeritas」制作者のるなさんに聞いてみたところ、簡単に固定ページにも「reCAPTCHA v3」を使える方法を教えていただいたので、備忘録として、その方法をここに記載していきます。
固定ページに「reCAPTCHA v3」を使う
「Contact Form 7」で「reCAPTCHA v3」を使ったことがある人ならわかると思いますが、「Contact Form 7」だと全部のページに「reCAPTCHA v3」が表示されます。
対して「Luxeritas」では、「reCAPTCHA v3」が必要ないページにまで使われてしまうことを嫌って、「コメントフォーム」が表示されているページにのみ、「reCAPTCHA v3」を使うような呼び出し方になっています。
そこで、るなさんに教えていただいた方法だと、
- 「Luxeritas」で「reCAPTCHA v3」を入れる
- 「Contact Form 7」で「reCAPTCHA v3」を入れる
- 「Contact Form 7」の対象をお問い合わせページのみにする
- 問い合わせページの「Page Top ボタン」の位置をCSSで調節する
このような手順で、コメントフォーム&好きなページで「reCAPTCHA v3」を使うことができます。
るなさんの回答はコチラです。本当にありがとうございます。
一つずつ見ていきましょう。
「Luxeritas」で「reCAPTCHA v3」を入れる
上述している通り、
Luxeritas > カスタマイズ > 画像認証
に「reCAPTCHA v3」の設定場所があります。サイトキーとシークレットキーは、こちら(Google reCAPTCHA)から取得してください。
「Contact Form 7」で「reCAPTCHA v3」を入れる
プラグインを入れたら、
お問い合わせ > インテグレーション > reCAPTCHA
に「reCAPTCHA v3」のサイトキーとシークレットキーを入れてください。先ほど取得したものと全く同じものを入れれば大丈夫です。
「Contact Form 7」の対象をお問い合わせページのみにする
子テーマのfunction.php(Luxeritas > 子テーマの編集 > function.php)に以下のコードを記述します。
add_action( ‘wp_print_scripts’, function() {
if( $_SERVER[‘REQUEST_URI’] !== ‘/contact/‘ ) {
wp_dequeue_script( ‘google-recaptcha’ );
}
});
/contact/の部分は、ご自身がお問い合わせページに設定したスラッグ(URL)を記載してください。
簡単にいうと、/contact/というURLがリクエストされた(呼び出された)ときに、「google-recaptcha」を使用しますよ、ということを記述しています。
問い合わせページの「Page Top ボタン」の位置をCSSで調節する
お問い合わせページに設定した固定ページを編集します。
固定ページ > お問い合わせに設定したページの編集ページ > 追加ヘッダー
に、以下のコードを記述します。
<style>#page-top{right:76px}</style>
もし「追加ヘッダー」を記載する場所が見当たらなかったら、右上の「表示オプション」にチェックがついているかを確認してください。
これは、Google reCAPTCHAのロゴからずらすため、「Page Top ボタン」の右に76px分の余白を作りますよ、ということです。(もともとにCSSにある#page-topを上書きしています。right:76pxをいじって好きな場所に設定してもOKですが、この場所が一番しっくりきます。)これで、ロゴとボタンが被らないようになりました。
お問い合わせページを確認してみる。
お問い合わせページを確認し、無事にロゴを確認できたら導入終了です。お疲れさまでした。
「reCAPTCHA v3」のロゴは邪魔に思うかもしれませんが、消すことは規約違反になるので注意しましょう。ロゴにカーソルを合わせるとプライバシーポリシーと利用規約を見れるようになっているので、これを表示させるための措置ですね。
「reCAPTCHA v3」のロゴが広がると「Page Top ボタン」と重なってしまいますが、「Page Top ボタン」は上に行けば自然と消え、問題なくクリックできるようになるので、これは規約違反にならない程度の問題だと思います。気になる人はボタンの配置を上にするといいかもしれませんね。
もしくは「reCAPTCHA v3」をやめて「reCAPTCHA v2」にしたり、Akismetだけにしてみたり。私が持っているサイトだと、AkismetだけだとスパムがひどかったのですがreCAPTCHA v3だけにしたら快適になりました。好みに合わせて、いろいろと試してみてください。