【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」を使う
お問い合わせページを確認してみる。

固定ページに「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ですが、この場所が一番しっくりきます。）これで、ロゴとボタンが被らないようになりました。