Contact Form 7のCSSをお問い合わせページにのみ有効にする方法

今回はWordPressのプラグインである「Contact Form 7」を使用している方で、当該のCSSとJava Scriptを「お問い合わせフォーム」ページにのみ読み込んで、その他のページでは一切読み込まない方法を紹介します。

「Contact Form 7」はデフォルトでは全てのページでCSSとJava Scriptが読み込みます。「お問い合わせフォーム」ページ以外のページでは無駄なCSSとJava Scriptを読み込んでいる事となり、サイトスピードに影響が起きてしまっています。

そこで今回は、function.phpに下記で紹介する記述を加える事で指定したページのみCSSとJava Scriptを読み込んで、その他のページでは無駄な読み込みを無くし、サイトスピードの改善を目指します。

CSSをお問い合わせページにのみ有効にする

下記の記述をfunction.phpに追加します。

function my_contact_enqueue_scripts(){
wp_deregister_script('contact-form-7');
wp_deregister_style('contact-form-7');
if (is_page('お問い合わせフォームページのディレクトリ')) {
	if (function_exists( 'wpcf7_enqueue_scripts')) {
        wpcf7_enqueue_scripts();
	}
	if ( function_exists( 'wpcf7_enqueue_styles' ) ) {
	wpcf7_enqueue_styles();
	}
}
}
add_action( 'wp_enqueue_scripts', 'my_contact_enqueue_scripts');

function.phpは、WordPressの左側管理バー→外観→テーマエディターの下記の部分「テーマのための関数」にあります。

4行目の「お問い合わせフォームページのディレクトリ」の部分にCSSを読み込みたいページのディレクトリを入力します。
例えば、私のサイトのお問い合わせフォームの場合「https://kt-life.net/page-44/」なので「’page-44’」と入力します。

これだけです。（自身のサイトに合わせて書き換えて下さい。）

この記述では「contact-form-7」に入ってるスクリプトとスタイルを一旦全て無効にしてから、指定したページのみ改めて読み込む処理をしています。

※phpをいじる際は、少しのミスで致命的で重大なエラーが起きる場合があります。コピペでも可能だが、知識のない方は必ずバックアップをとってから作業に取り掛かりましょう。

以上が「Contact Form 7のCSSをお問い合わせページにのみ有効にする方法」でした。