Contact Form 7で必要な場合だけJavaScriptとCSSをロードさせる

WordPress利用サイトの多くで使われているプラグインの「Contact Form 7」。

公式サイトでこんな記載を見付けました。

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

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

Contact Form 7で使われるJavaScriptやCSSは、負荷になる懸念があるようです。

プラグインに実装するのは技術的に困難ということですが、サイト側で実装するのは簡単だったので実装してみました。下記のコードをfunction.phpに追加するだけです。

function wpcf7_file_loader() {
  if( !is_page( 'contact' ) ){
    add_filter( 'wpcf7_load_js', '__return_false' );
    add_filter( 'wpcf7_load_css', '__return_false' );
  }
}
add_action( 'template_redirect', 'wpcf7_file_loader' );

コンタクトフォームを使っているページを判別し、コンタクトフォーム以外のページではJavaScriptとCSSをロードしないようにします。

is_pageの引数にコンタクトフォームを使っているページを判別する値を指定します。値には、ID、post_title、post_name（スラッグ）が指定できます。

このブログでは、コンタクトフォームのページのスラッグ「contact」を指定しています。

JavaScriptとCSSをロードしない分、ページの読み込み速度が向上します。簡単なので興味があれば試してみてください。