サイトを軽くする、ContactForm7の最適化をしよう

ファイルの全ページ読み込みを停止してフォーム設置ページだけ読み込む

特定のページで必要なファイルを読み込むために、まずファイルの読み込みを停止します。

wp-configを編集して読み込みを停止する方法

//javaScriptとcssを読み込ませない設定
define ('WPCF7_LOAD_JS', false);
define('WPCF7_LOAD_CSS', false);

functions.phpを編集して読み込みを停止する方法

//javaScriptとcssを読みこませない設定
add_filter( 'wpcf7_load_js', '__return_false' );
add_filter( 'wpcf7_load_css', '__return_false' );

この時点では全ページで必要なファイルが使えない状態なので、必要なページだけ読み込ませるようにします。

お問い合わせページだけファイルを読み込ませる

functions.phpを編集します。

contactという固定ページにお問い合わせフォームを設置している場合。

function add_cf7_script(){
 if(is_page('contact')):
  if ( function_exists( 'wpcf7_enqueue_scripts' )):
        wpcf7_enqueue_scripts();
    endif;
 
    if ( function_exists( 'wpcf7_enqueue_styles' )):
        wpcf7_enqueue_styles();
    endif;
 endif;
}
add('after_setup_theme','add_cf7_script');

これでお問い合わせページだけ必要なファイルが読み込まれます。

複数のページを指定することもできて、ページタイトル、スラッグ以外にIDを指定できます。

//if(is_page('contact')):を変更
if(is_page(array(10, 'about', 'contact' ))):

また、オリジナルのCSSを使いたい場合

//javaScript読み込み
function add_cf7_script(){
 if(is_page('contact')):
  if ( function_exists( 'wpcf7_enqueue_scripts' )):
        wpcf7_enqueue_scripts();
    endif;
 endif;
}
add('after_setup_theme','add_cf7_script');

//オリジナルcss読み込み
function my_contactpage_scripts() {
 if(is_page('contact')):
   wp_enqueue_style( 'style-name', get_stylesheet_uri()./css/contact.css );
 endif;  
}
add_action( 'wp_enqueue_scripts', 'my_contactpage_scripts' );

get_stylesheet_uri()./css/contact.cssの部分はオリジナルのCSSを設置した場所に合わせてください。

以上です。

一気にパフォーマンスが改善するわけではないですが、表示速度向上やモバイル端末の負荷を減らすことはユーザーにとっていいことなので、オススメします。

目次

ファイルの全ページ読み込みを停止してフォーム設置ページだけ読み込む

wp-configを編集して読み込みを停止する方法

functions.phpを編集して読み込みを停止する方法

お問い合わせページだけファイルを読み込ませる