reCAPTHAのJavascriptを不要なページから消す方法

この記事は約7分で読めます。

invisible recaptcha

「Invisible reCAPTCHA」を使ってるのに、ページの速度が遅い!
「Invisible reCAPTCHA」を使ってるのに、他のページでもJavaScriptが読み込まれてる!
・・・そんなことに頭を悩ませていませんか?

こんにちは、野分です。

Origin Summaryでは、「このオリジンから配信されたすべてのページの総合的なエクスペリエンスは、ウェブに関する主な指標テストに合格しています。 」となっているのに、ページ速度の点数が低いことに悩んでいます。

今、あれこれ試している最中なのですが、その中で以前なんとかしたはずの「reCAPTCHA」がロゴの表示されていないページでも足を引っ張ってるらしいことに気づきました。

その問題は簡単に解決できましたので、メモしておきます。

reCAPTHAのJavascriptを不要なページから消す方法

「reCAPTCHAはページの読み込み速度を遅くする」
そう理解してなんとかしたはずでした。

reCAPTCHA導入後にサイトの読み込み速度を改善【初心者向け】
サーチコンソールの「ウェブに関する主な指標」で合格するために、これまでいろいろとやってきました。 今回はページの表示スピードを速くするために、Google reCAPTCHAをContact form 7でだけ表示するようにし...

ところが、今現在。
どうやら「reCAPTCHA」はインビジブルになってるだけ!!
見えないだけで、全部のページでJavaScriptが読み込まれているらしいことに気づきました。

なんて厄介なんだ・・・

invisible recaptcha

上は、当ブログ(hicolor times)のトップページの評価です。
「recaptcha__ja.js」というのが「reCAPTCHA」のJavaScriptです。

コンタクトフォームのページにしか存在を許されてないはずのアナタ。
どういうつもりなん・・・
しかも一番重いってなんなん・・・

先人の方のお知恵を拝借して、さっそくreCAPTCHAの駆除を行いました。

 

もともと「Invisible reCAPTCHA」を使っておらず、「Contacht Form 7」のページでだけ「reCAPTCHA」を作動させたい方はこちらへどうぞ。

「Invisible reCAPTCHA」を無効にする

任意のページでだけreCAPTCHAを表示させるために利用していた「Invisible reCAPTCHA」ですが、JavaScriptがビジブルしてたら意味ないので利用を停止します。

これは、プラグインのページで「無効」にするだけです。

ただし、別途「reCAPTCHA」の
・サイトキー
・シークレットキー
を保存してない方は、無効にする前にどこかにコピペしておくとスムーズです。

「Contact Form 7」の設定をする

「Contact Form 7」で「reCAPTCHA」の設定をします。

コンタクトフォーム7 reCAPTCHA

「ダッシュボード > お問い合わせ > インテグレーション」と進み、「reCAPTCHA」の欄の「インテグレーションのセットアップ」というボタンをクリック。

コンタクトフォーム7 reCAPTCHA

すると上のようなフォームがありますので、「reCAPTCHA」のサイトキーとシークレットキーを入力して、「変更を保存」。

これでセットアップは完了です。

「reCATCHA」を任意のページでだけ表示させるようにする

子テーマの「functions.php」に以下の記述を追記します。

もし子テーマに「functions.php」がなければ親テーマのでもかまいませんが、テーマのアップデートのたびに書き加えなければいけません。
「functions.php」を子テーマの中に作る方法もありますが・・・、初心者には少しハードルが高そうです。
「functions.php」はちょっとした間違いでサイト全体が真っ白になったりする繊細なものなので、触る際には必ずバックアップを取っておきましょう。また、プラグイン「Code Snippets」を導入することを検討してもいいと思います。
  1. function load_recaptcha_js() {
  2. if ( ! is_page( ‘XXXXX‘ ) ) {
  3. wp_deregister_script( ‘google-recaptcha’ );
  4. }
  5. }
  6. add_action( ‘wp_enqueue_scripts’, ‘load_recaptcha_js’,100 );


2行目の「’XXXXX‘」の部分を、自分のコンタクトフォームのスラッグに書き換えてください。

たとえば、このブログなら

//nowaki.work/contact

これがコンタクトフォームのURLなので、赤字になっている「contact」がスラッグです。

  1. if ( ! is_page( ‘contact’ ) ) {


このように書き換えてください。

invisible recaptcha

めでたく、「改善できる項目」から消えています。

数値も少しだけ減りました。

これだけを見ると「これっぽっち減らしても・・・」と思うかもしれませんが、全部のページにでしゃばっていたことを考えれば、やる価値はあると思います。

速度の評価としては、20くらい上昇していました。

「トップへ戻るボタン」をどうするのか問題

おそらく多くのブログでは、右下のちょうど「reCAPTCHA」のロゴが表示されるあたりに「トップへ戻るボタン」が設置されていると思います。

これをどのように処理するか、いくつかの方法があります。

・・・が。
「reCAPTCHA」のロゴを隠すのは規約違反となりますので絶対にやらないようにしてください

Google のコンテンツ

Google のサービスの一部には、Google に帰属するコンテンツが含まれています。たとえば、Google マップに表示される多くのイラストは Google に帰属します。ユーザーは Google のコンテンツを本規約およびサービス固有の追加規約で許可される範囲内で使用できますが、コンテンツに対して Google が所有するすべての知的所有権は Google が保持します。いかなるブランド表示、ロゴ、法的通知も、削除したり、隠したり、改ざんしたりしてはなりません。Google のブランド表示やロゴを使用したい場合は、Google Brand Permissions(Google ブランドの使用許諾について)のページをご覧ください。

利用規約:Googleサービス内のコンテンツより

方法1:「トップへ戻るボタン」を消す

「トップへ戻るボタン」は最近のテーマでは実装されていることも多いと思います。
つまり、そのような場合は、テーマの中で「トップへ戻るボタン」を表示するかどうかを選択できるはず。

Cocoonも「Cocoon 設定 > ボタン」からすぐに選択できます。

invisible recaptcha

プラグインなどで設置している場合は、その設定ページから選択できると思います。

方法2:「トップへ戻る」ボタンの位置をずらす

被らないように、ボタンの表示位置を上にずらすことで、両方を問題なく表示させることもできます。

以前使用していたLuxeritasには、テーマのカスタマイズの項目にボタンの位置の設定がありました。お使いのテーマにその便利機能があるかどうか、確認してみましょう。

ない場合は、スタイルシートにタグを記入します。
クラス名を調べて、数値を入れましょう。
Cocoonの場合は、以下のように記述します。

  1. #go-to-top {bottom: 100px;}


数値はお好みで。

recaptcha top

上の設定でこうなります。

この場合も、プラグインの場合はセレクタがあると思います。

reCAPTHAのJavascriptを不要なページから消す方法 まとめ

reCAPTHAのJavascriptを不要なページから消す方法

1、(「Invisible reCAPTCHA」を使っている場合:無効にする。)

2、(「Contact Form 7」にサイトキーとシークレットキーを記入する。)

3、「functions.php」に記述を書き入れる。

4、「トップに戻る」ボタンを非表示にするか、調整する。

「functions.php」を触るのでちょっとだけ注意が必要ですが、同じことで悩んでいる方はバックアップをとってからやってみてください。

 

今回参考にさせていただいたサイト様

▶︎Google reCAPTCHA V3 をお問い合わせ以外で非表示にする方法【2021年修正版】:Mirai Creators様
▶︎子テーマにfunctions.phpを追加する時の注意点:アフィリエイトで稼ぐ方法を全部話そうと思う様

 

WordPress バナー

タイトルとURLをコピーしました