WEBサイト制作

【Luxeritas】固定ページにも「reCAPTCHA v3」を導入する方法

当サイトでも使用している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」を使うような呼び出し方になっています。

そこで、るなさんに教えていただいた方法だと、

  1. 「Luxeritas」で「reCAPTCHA v3」を入れる
  2. 「Contact Form 7」で「reCAPTCHA v3」を入れる
  3. 「Contact Form 7」の対象をお問い合わせページのみにする
  4. 問い合わせページの「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)に以下のコードを記述します。

/contact/の部分は、ご自身がお問い合わせページに設定したスラッグ(URL)を記載してください。
簡単にいうと、/contact/というURLがリクエストされた(呼び出された)ときに、「google-recaptcha」を使用しますよ、ということを記述しています。

問い合わせページの「Page Top ボタン」の位置をCSSで調節する

お問い合わせページに設定した固定ページを編集します。

固定ページ > お問い合わせに設定したページの編集ページ > 追加ヘッダー

に、以下のコードを記述します。

もし「追加ヘッダー」を記載する場所が見当たらなかったら、右上の「表示オプション」にチェックがついているかを確認してください。
これは、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だけにしたら快適になりました。好みに合わせて、いろいろと試してみてください。