特定のページの時だけContact Form 7のCSSやJSをロードさせる方法

Contact Form 7のメールフォームプラグインを有効化すると、contact-form-7/includes/css/styles.cssとcontact-form-7/includes/js/scripts.jsのファイルが、ブログ内のすべてのページで読み込まれます。

サイドメニューやフッターにコンタクトフォームがある場合は別なんですが、お問い合わせページだけでContact Form 7のフォーム使っている場合は、その固定ページが表示された時のみCSSなどをロードしたいものです。

ということで今回は、特定のページの時だけContact Form 7のCSSファイルなどを読み込ませる方法について解説していきたいと思います。

Contact Form 7のJavaScriptとCSSを、お問い合わせページにだけロードさせる方法

ざっくり、以下の流れになります。

流れ

まず、すべてのページで該当のCSSやJavascriptのロードを無効化する
次に、お問い合わせメールフォームの固定ページでのみ、CSSなどを読み込ませるようにする

ロードを無効化したり、CSSやJavascriptを読み込ませたりするために、Contact Form 7ではWPCF7_LOAD_JSなどの定数や、wpcf7_enqueue_stylesなどの関数が使えます。その辺を組み合わせながら、適切なページでCSSなどのファイルを読み込ませるようにします。

また、編集するファイルによって2通りの方法があるので、それぞれ具体的なコードサンプルも交えながら紹介していこうと思います。

方法❶ wp-config.phpとお問い合わせページのテンプレートファイルを編集する

公式サイトでも紹介されている方法です。

まずwp-config.phpに以下の2行を追加して、JavaScriptとCSSのロードを無効化します。

define('WPCF7_LOAD_JS', false);
define('WPCF7_LOAD_CSS', false);

次に、お問い合わせページのテンプレートファイル（例：page-contact.php）を開いて、JavaScriptとCSSを読み込ませる処理を入れます。

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

実に面倒ですが、ページをロードする時点でそのページがコンタクトフォームを含んでいるかどうか、判断することが難しいようなので、このような処理をしないといけないみたいです。

必要な場合だけ JavaScript とスタイルシートをロードさせるには

方法❷ functions.phpを編集する

こちらは、テーマフォルダ内のfunctions.phpを編集して、ロードの無効化とお問い合わせページの時だけ読み込む条件分岐を、まとめてやってしまう方法です。

add_filter( 'wpcf7_load_js', '__return_false' );
add_filter( 'wpcf7_load_css', '__return_false' );
function cf7_enqueue_scripts_and_styles(){
	if ( is_page( 'contact' ) ) {
	    if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
	        wpcf7_enqueue_scripts();
	    }
	    if ( function_exists( 'wpcf7_enqueue_styles' ) ) {
	        wpcf7_enqueue_styles();
	    }
	}
}
add_action( 'wp_enqueue_scripts', 'cf7_enqueue_scripts_and_styles');

1〜2行目でJavaScriptとCSSのロードを無効化し、4行目からのif(is_page('contact')でcontactのスラッグの固定ページ（お問い合わせページ）の時だけ、という条件分岐を入れています。

5〜10行目は、方法❶で紹介した処理と同じです。

こちらの手法だとfunctions.phpの1ファイルで完結するので、方法❶よりはカスタマイズが楽になるんじゃないかと思います。

スポンサードリンク