Contact Form 7のCSSやJavaScriptを止める方法

WordPress（ワードプレス）で1番有名なメールフォーム用プラグイン「Contact Form 7」が、全ページにCSSやJavaScript（ジャバスクリプト）を吐き出す問題を解決するカスタマイズ方法を紹介します。

メールフォームのプラグイン「Contact Form 7」は、全ページにCSSやJavaScriptを吐き出す仕様があるため、メールフォームは1ページしか設置していなくても、メールフォームを使用していないページのヘッダーにまで、CSSやJavaScriptが挿入されてしまう。

これは、プラグイン側ではメールフォームの設置を判定できないため、全ページにCSSやJavaScriptを吐き出すしようになっている。

これを解決するためには、CSSやJavaScriptの吐き出しを止めて、メールフォームを設置したページにだけ、CSSやJavaScriptを設置する必用がある。

では、「Contact Form 7」のCSSやJavaScriptを停止する方法から紹介する。カスタマイズ方法は2つあるが、私の環境では1つ目が失敗するので、2つ目の方法を使用している。

1つ目は、wp-config.phpをカスタマイズする方法である。ワードプレスのwp-config.phpに次の3行を追加して保存する。

/** メールのJS対策 */
define( 'WPCF7_LOAD_JS', false );
define( 'WPCF7_LOAD_CSS', false );

保存したら、ブログのソースを確認する。ヘッダー内に下のようなCSSがあれば、失敗である。

失敗した場合は、他のプラグインなどと競合しているの可能性があるので、wp-config.php元に戻して、次に紹介するカスタマイズ方法を試す。

2つ目は、プラグイン「Contact Form 7」を直接カスタマイズする方法である。カスタマイズと言ってもプラグインを2行書き換えるだけなので簡単だ。

まず、「plugins」フォルダ→「contact-form-7」フォルダとアクセスし、「wp-contact-form-7.php」を開く。

WordPressの管理画面から編集する場合は、プラグインの編集から「contact-form-7/wp-contact-form-7.php」を選択する。

次に、wp-contact-form-7.phpの46行目にある「define( 'WPCF7_LOAD_JS', true );」を「define( 'WPCF7_LOAD_JS', false );」へと書き換える。

そして、48行目にある「define( 'WPCF7_LOAD_CSS', true );」を「define( 'WPCF7_LOAD_CSS', false );」へと書き換える。

つまり、wp-contact-form-7.phpの46行目と48行目を下のように書き換える（wp-contact-form-7のバージョンによって行数は違うかもしれない）。

define( 'WPCF7_LOAD_JS', true );
↓
define( 'WPCF7_LOAD_JS', false );

define( 'WPCF7_LOAD_CSS', true );
↓
define( 'WPCF7_LOAD_CSS', false );

これで、ブログのソースを確認して、ヘッダーにContact Form 7のCSSやJavaScriptがなければ成功である。

成功すれば、メールフォームを設置したページに、Contact Form 7のCSSやJavaScriptを挿入する。

へージのヘッダーに生データを挿入できるSEOプラグイン「HeadSpace2」などを使い、メールフォームを設置したページのヘッダーにCSSやJavaScriptを挿入する（URLはサンプル）。

カテゴリー

ブログ内検索