Invisible reCaptchaでエラーが発生する

WordPressを動かしているプログラム言語であるPHPのバージョンが8.0以上の場合、Invisible reCapchaに不具合が発生します。

PHPのバージョンが8.1の場合は、設定画面がおかしな表示になります。

8.0の場合は、設定画面の表示もコメント欄や問い合わせフォームのロゴマークの表示も正常になるので一見良いように思えますが、実際にコメントと問い合わせフォームの送信をするとエラーが表示されてしまいます。

原因は、Invisible reCapchaが長らく新しいバージョンをリリースしていないため、現行のPHPバージョンに対応しなくなったことにあります。

【PHPのバージョンの確認方法】

ConoHaのコントロールパネル「サイト管理」→「サイト設定」→「応用設定」内にてPHPのバージョンを確認することができます。
また、鉛筆マークをクリックすると他のバージョンに変更することができます。

PHPのバージョンを8.0より前の7.4に戻すと問題なく作動しますが、7.4のセキュリティサポートが2022年11月28日に終了してしまったので、安全面(脆弱性が発見されても今後はサポートを受けられない)を考えると戻すべきではありません。

そこで、Invisible reCapchaを使わずに同等の機能を使うための対策を以下に紹介します。

  1. 代替プラグイン「reCaptcha by BestWebSoft」を使用する
  2. 代替プラグイン「hCaptcha for WordPress」を使用する
  3. Contact Form7のインテグレーション機能を使用する

💡リベ大オススメ構成のサイトの場合
(Contact Form7によるお問い合わせページとコメント欄があるサイト)

Invisibla reCapchaと同等の機能を使用するためには、以下を組み合わせて下さい。

代替プラグイン「reCaptcha by BestWebSoft」を使用する
・Contact Form7のインテグレーション機能を使用する

ただし上記設定の場合、見た目の点でデメリットがあります。

CSSやphpファイルの編集が可能な方は、見た目の変更方法を解説している後半までお読みください。
あるいは、スキルマーケット等で得意な人に作業を代行してもらうのも良い方法だと思います。

1.代替プラグイン「reCaptcha by BestWebSoft」を使用する

このプラグインは、Invisible reCapchaと同じような設定方法で使用することができます。
GoogleのreCapchaサイトで取得したキーをコピペして、管理画面のログインフォームやコメント欄など、保護する対象にチェックを入れるだけです。

ただし、お問合せフォームを作成するプラグインである「Contact Form7」の保護は、有償版でないと利用することができません。

参考記事→ https://kmnmc.com/2022/08/02/5538/

2.代替プラグイン「hCaptcha for WordPress」を使用する

GoogleのreCaptchaサイトでキーを取得したように、このプラグインの公式サイトでキーを取得してから、プラグインにコピペして使用します。

reCapchaと比べて、保護機能がどれほど強力であるか(信頼して良いか)はハッキリわかりませんが、こちらのプラグインであれば、無料でContact Form7も保護することができます。

コメントやお問い合わせフォームの送信時には、読者にチェックを入れることを促します。

参考記事→ https://daikilog-p.com/hcaptcha-setting/

3.Contact Form7のインテグレーション機能を使用する

お問い合わせフォーム作成プラグインであるContact Form7には、外部のサービスと連携する機能(インテグレーション機能)があります。

この機能を利用してreCaptchaのキーを設定すれば、サイト全体を保護することができます。
メリットは以下の通りです。

・フォームの送信時に、読者に何もさせる必要がない(自動で保護されている)
・Googleのサービス(reCaptcha)なので信頼性が高い

ただし、デメリットもあります。

・管理画面のログインフォームは保護しない
・サイトの全てのページにreCaptchaのロゴマークが表示される

デメリットに対する対策は後述しますので、まずはインテグレーションの設定手順を説明します。

※問い合わせフォームを設置していないサイトでも、Contact Form7をインストールしてインテグレーション機能を使用することができます。

インテグレーションの設定手順

※Contact Form7をインストールしていない人は、管理画面のメニューより「プラグイン」→「新規作成」をクリックし、「contact form7」のキーワードで検索すると見つかりますので、インストール&有効化して下さい。

手順① 管理画面のメニュー「お問い合わせ」→「インテグレーション」をクリックし、reCaptchaの「インテグレーションのセットアップ」をクリックします。

手順② GoogleのreCaptchaサイトで取得したサイトキーとシークレットキーをコピペして「変更を保存」をクリックして下さい。

↓このような表示になりましたら、設定完了です。
これでサイトがreCaptchaで保護されるようになりました。

「管理画面のログインフォームは保護しない」への対策

SiteGuard」プラグインを使用していれば、管理画面にログインする際に「ユーザー名」と「パスワード」に加え、表示されている4文字のひらがな(デフォルト時)を求められますので、この一手間だけでも保護機能として十分ではないかと思います。

もし、この画面もreCaptchaで保護したい場合は、reCaptcha by BestWebSoft プラグインを併用して、そちらのプラグインでログインフォームを保護して下さい。

参考記事→ https://kmnmc.com/2022/08/02/5538/

「サイトの全てのページにreCaptchaのロゴマークが表示される」への対策

Contact Form7のインテグレーション機能でreCaptchaを設定すると、全てのページの画面右下にreCaptchaのロゴマークが表示されてしまいます。

特に投稿記事内でロゴマークが常に表示されていると大変うっとうしいですし、「戻るボタン」とロゴマークが重なってしまう可能性が高いです。

ロゴマークと戻るボタンが重なって表示された

そこで、この問題への対策を3つ紹介します。

1.reCaptchaのロゴマークの位置を少し上にあげる

この方法の場合、全てのページにロゴマークが表示される問題は解消されませんが、マークの位置を少し上にずらすことによって、戻るボタンと表示が重ならないようにすることができます。

手順① サーバーのコントロールパネルにて「WAFをオフ」にします。

参照記事→ https://blog-advice.notion.site/ConoHa-WING-WAF-29338c8e5eb241a6854e6ff1353962d3

手順② 管理画面のメニュー「外観」→「カスタマイズ」→「追加CSS」内に、以下のコードをコピペして「公開」をクリックして下さい。

/*reCaptchaのバッジの位置を上にずらす*/
.grecaptcha-badge { bottom: 100px!important; }

※コード内の数値を変更するとロゴマークの位置を変更することができますので、ちょうど良い位置になるように適宜数字を変更してみて下さい。
※コードの貼り付けが終了しましたら、忘れずにWAFをオンに戻して下さい。

2.ロゴマークを表示させる代わりに文章を表示させる

指定された文章を表示すれば、ロゴマークは非表示にすることができます。

この事は、reCapchaの「よくある質問ページ」に記載されています。
https://developers.google.com/recaptcha/docs/faq

ここでは、お問い合わせページの「問い合わせフォームの下」に文章を表示させる手順を説明します。

手順① お問い合わせページの編集画面で、問い合わせフォームの下に「ショートコードブロック」を追加して、以下のコードを貼り付けます。

日本語の場合↓

<p>このサイトはreCAPTCHAによって保護されており、Googleの<a href="https://policies.google.com/privacy">プライバシーポリシー</a>と<a href="https://policies.google.com/terms">利用規約</a>が適用されます。</p>

英語の場合↓

<p>This site is protected by reCAPTCHA and the Google<a href="https://policies.google.com/privacy">Privacy Policy</a> and<a href="https://policies.google.com/terms">Terms of Service</a> apply.</p>

↓お問い合わせページの編集画面。(上のショートコードは取り合わせフォームのもの)

↓お問い合わせページの表示

文章を表示させることができましたら、次にロゴマークを非表示にする設定をします。

手順② サーバーのコントロールパネルにて「WAFをオフ」にします。

参照記事→ https://blog-advice.notion.site/ConoHa-WING-WAF-29338c8e5eb241a6854e6ff1353962d3

手順③ 管理画面のメニュー「外観」→「カスタマイズ」→「追加CSS」内に、以下のコードをコピペして「公開」をクリックして下さい。

/*reCaptchaのマークを非表示にする*/
.grecaptcha-badge {
		visibility: hidden;}

これでロゴマークは表示されなくなります。

参考記事→ https://webst8.com/blog/contact-form-recaptchav3/

3.お問い合わせページだけにロゴマークを表示させる

問い合わせフォームを設置している、「お問い合わせページ」だけにreCaptchaのロゴマークを表示させます。

手順① ConoHaのコントロールパネルにて「サイト管理」→「ファイルマネージャー」をクリックします。

手順② 画面の左にあるツリーから「public_html」→「サイトドメイン」→「wp-content」→「themes」→「cocoon-child-master」と、クリックしながら展開して下さい。

手順③ 画面から「function.php」を見つけて右クリックをし、開いたメニューから「ファイル編集」→「ACE Editor」をクリックして下さい。

※テーマがCocoon以外の場合でも、子テーマの中に「function.php」ファイルはあります。
また、子テーマを使用していない場合は親テーマ内のfunction.phpを編集しますが、テーマを更新する際に上書きされる可能性があります。もし上書きされた場合は、再度「function.php」 を編集する必要があります

手順④ エディターが開いたら「//以下に子テーマ用の関数を書く」以降に↓のコードをコピペして、「保存して閉じる」をクリックして下さい。

※お問い合わせページのスラッグ(URLの末尾)が「contact」でない時は、コード内のcontactの部分を自分のサイトのスラッグに変更して下さい。

// お問い合わせページ以外は、reCAPTCHAを読み込ませない
 
function load_recaptcha_js() {
 if ( ! is_page( 'contact' ) ) {
  wp_deregister_script( 'google-recaptcha' );
 }
}
add_action( 'wp_enqueue_scripts', 'load_recaptcha_js',100 );

これで「お問い合わせページ」以外のページは、reCapchaのロゴマークが非表示となりました。

参考記事→ https://mirai-creators.com/6033/

サイトにコメント欄を設置している場合

上記で説明した「サイトの全てのページにreCaptchaのロゴマークが表示される」への対策のもしくはを実行した場合は、コメント欄のある投稿ページにreCaptchaのロゴマークが表示されませんので、代わりに文章を表示させましょう。

英語表記になってしまいますが、プラグイン「reCaptcha by BestWebSoft」を利用すると全ての投稿ページのコメント欄に、reCapchaで保護している皆の文章が表示されるようになります。

手順① ↓の記事を参照して、reCaptcha by BestWebSoftプラグインをインストールして、キー(サイトキーとシークレットキー)を設定して下さい。

参照記事→ https://kmnmc.com/2022/08/02/5538/

手順② プラグインの設定画面(reCaptcha Settings)で「Comments form」にチェックを入れて保護対象としたら、さらに下に移動して「Hide reCaptcha Badge」にもチェックを入れて保存(Save Changes)して下さい。

これで、投稿ページのコメント欄に文章が表示されるようになりました。

コメント

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