This page is also available in English.

デフォルトの設定では、Contact Form 7 はその JavaScript と CSS スタイルシートをすべてのページにロードします。きっと、こんな無駄の多いやり方をやめて、コンタクトフォームを含むページにだけロードすればいいのに、と考えていることでしょう。その気持ちはよくわかりますが、技術的な困難があって、ページをロードする時点でそのページがコンタクトフォームを含んでいるかどうかを判断することがプラグインにとって難しいのです。ともあれ、多少状況を良くするような方法を提示することならできなくもありません。

ステップ 1: すべてのページで JavaScript と CSS スタイルシートをロードしないようにする

定数 WPCF7_LOAD_JS の値が false の場合(デフォルト値は true)、Contact Form 7 は JavaScript のロードを行いません。次のように wp-config.php のなかでこの定数に値を設定するとよいでしょう:

define ('WPCF7_LOAD_JS', false);

同様に、CSS スタイルシートのロードは WPCF7_LOAD_CSS で制御できます。定数 WPCF7_LOAD_CSS の値が false の場合(デフォルト値は true)、Contact Form 7 は CSS スタイルシートのロードを行いません。次のように wp-config.php のなかでこの定数に値を設定するとよいでしょう:

define('WPCF7_LOAD_CSS', false);

または、次のように数行のコードをテーマの functions.php ファイルに追加することでも JavaScript と CSS のロードを無効化することができます:

add_filter( 'wpcf7_load_js', '__return_false' );
add_filter( 'wpcf7_load_css', '__return_false' );

これで JavaScript と CSS スタイルシートのロードを抑止することができました。が、残念なことに、これによってコンタクトフォームを含んでいるページでのロードまで一緒に殺してしまいました。次のステップでは JavaScript と CSS スタイルシートのロードを必要とするページにおいて明示的にファイルのロードを指定します。

ステップ 2: コンタクトフォームを含んだページで JavaScript と CSS スタイルシートをロードする

例として、「お問い合わせ」という名前のページがあって、そのページが唯一コンタクトフォームを含んでいるというケースについて考えてみましょう。それから、「お問い合わせ」ページ専用に ‘contact.php’ というテンプレートファイルがテーマのフォルダに用意されているとしましょう。この「お問い合わせ」ページに限っては Contact Form 7 の JavaScript の CSS スタイルシートのロードを行う必要があるというわけです。

これをするためには、’contact.php’ テンプレートファイルを編集して、次の内容を挿入します:

<?php
	if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
		wpcf7_enqueue_scripts();
	}

	if ( function_exists( 'wpcf7_enqueue_styles' ) ) {
		wpcf7_enqueue_styles();
	}
?>

wpcf7_enqueue_scripts() と wpcf7_enqueue_styles() の呼び出しは wp_head() より前に行われる必要があることに注意してください。