「Contact Form 7」を使ってサイトに問い合わせフォームを表示しているんですが、最新バージョンにアップデートして設定を済ませたら何やらサイトの右下にロゴが表示されるようになりました。
「eCAPTCHA で保護されています」というメッセージと、プライバシーと利用規約のテキストリンクもあります。
…いや、めちゃくちゃ邪魔!!
サイト右下に常に固定されていて(position:fixed;
)、ページトップに戻るボタンと重なったり、別サイトでは下の固定メニューと重なったり、控えめに言って「超邪魔」でした。
ということで今回はこのロゴを消す方法をご紹介します。
【関連】サイトのお問い合わせフォームに「formrun」がおすすめな理由
reCAPTCHAを使っているページにはロゴを必ず表示しなければいけない
その前に超大事なことをお伝えしますが、reCAPTCHAのロゴは勝手に消すと規約違反になります。
つまり、CSSのdisplay:none;
を指定して非表示にしたり、JavaScriptで要素を消したり、PHPの正規表現で削除したり、すべてダメってことですね。
前のバージョンでは「私はロボットではありません」にチェックを入れて、自動車やら信号機やらの画像を判別していたのでそういったロゴを表示する必要がありませんでしたが、reCAPTCHAの新しいバージョンであるv3から自動で認証する仕様になったため(チェック不要)、ユーザーにreCAPTCHA認証を使っていることを知らせないとダメだよってことらしいです。
reCAPTCHAを使っているページにだけロゴを表示しよう
では、どうすればいいのかと言うと、最も簡単で安全なのはreCAPTCHAを使っているページにだけロゴを表示することです。
逆に言えば、reCAPTCHAで認証する必要がないページではreCAPTCHA関連のプログラムを読み込まないってことですね。
今回はお問い合わせページ(Contact Form 7)での話ですが、フォーラム(bbpress)やECサイト(woocommerce)に関しても同じことが言えます。
functions.phpに追加するコード
以下が、お問い合わせフォームがあるページ以外でreCAPTCHAのロゴを非表示にするコードです。Contact Form 7によって追加されるreCAPTCHA関連のコードがすべて読み込まれなくなります。
functions.phpにコピペし、一部修正するだけで終わりです。
add_action( 'wp_enqueue_scripts', function() {
if(is_page('contact')) return;
wp_deregister_script( 'google-recaptcha' );
});
変更するのは「contact」の部分。
ここにはお問い合わせページのIDか、パーマリンク(最後のスラッシュ以降の文字列)が入ります。
当サイトの場合、「fantastech.net/contact」がお問い合わせページのURLなので、文字列は「contact」となります。
◯◯.com/otoiawaseがお問い合わせページなら「otoiawase」、◯◯.net/4536/なら「4536」、◯◯.◯◯.jp/contact/aboutなら「about」となります。
「こういうカスタマイズすると画面が真っ白になるかもしれないんでしょ?!怖い!触りたくない!」なんて方もいるかと思いますが、今のWordPressはそういったエラーに強くなっているのでご安心ください。
お問い合わせページが固定ページではない場合
基本的に、お問い合わせページは「固定ページ」で作成しますが、よくわからずに通常の記事で作成しているかもしれません。
その場合は、is_pageの部分を「is_single」にすればOKです。
add_action( 'wp_enqueue_scripts', function() {
if(is_single('contact')) return;
wp_deregister_script( 'google-recaptcha' );
});
その他に、テーマ側で用意されている専用のページ(カスタム投稿タイプ)で作成している場合なんかもあると思いますが、そういった場合はテーマの作者さんに聞いてみてください。
もちろん、ウィジェットを使ってすべてのページにお問い合わせフォームを表示している場合は今回の方法が使えないのでご注意ください。
お問い合わせフォームが複数のページにある場合
(コメントいただいたので追記です)
複数ページでお問い合わせフォームを非表示にするやり方ですが、return;
がある行を複数回記述すればOKです。多分それが1番わかりやすいと思います。
こんな感じです。
add_action( 'wp_enqueue_scripts', function() {
if(is_page('contact')) return;
if(is_page('sitepolicy')) return;
if(is_page(4536)) return;
if(is_single('about')) return;
wp_deregister_script( 'google-recaptcha' );
});
また、このようにまとめて記述してもOKです。
add_action( 'wp_enqueue_scripts', function() {
if(is_page([
'contact',
'about',
4536,
'sitepolicy',
])) return;
wp_deregister_script( 'google-recaptcha' );
});
(このような条件分岐のことでわからないことがあればお気軽にコメントください)
ロゴの位置を変更する
ロゴを削除したり非表示にするのは禁止されていますが、位置の調整は問題ありません。
ロゴ要素のclass名は記事の更新時点で「grecaptcha-badge」で(※idはない)、このクラスに対してCSSをあてればOKです。
例えば、画面下部の固定メニューやページトップに戻るボタンとかぶらないように下から80pxの位置にしたい場合はこのようになります。
.grecaptcha-badge {
bottom: 80px !important;
}
※スタイル属性で指定されているため、importantを使うか、top:calc(100% - 140px)
のようにしてください。
お問い合わせページ以外でContact Form 7関連のコードを削除する方法
最後に余談ですが、ついでにお問い合わせフォームを設置していないページでContact Form 7のコードを読み込ませないようにしましょう。サイトの読み込み速度がアップします。
さきほどご紹介したコードにwp_dequeue_style( 'contact-form-7' );
とwp_deregister_script( 'contact-form-7' );
を追加すればOKです。
追加後はこのようになります。
add_action( 'wp_enqueue_scripts', function() {
if(is_page('contact')) return;
wp_dequeue_style( 'contact-form-7' );
wp_deregister_script( 'contact-form-7' );
wp_deregister_script( 'google-recaptcha' );
});
高速化に興味があれば関連記事もぜひチェックしてみてください。
【追記】お問い合わせフォームならformrunもいいですよ
長らくContact Form 7を愛用してきましたが、少し前に「formrun」というツールに乗り換えました。
- プラグインが外せる
- 今回のような作業が不要
など、メリット多いです。
「そもそもなんでプラグインでお問い合わせフォームを表示してるんだっけ?」という方はぜひチェックしてみてください。