WEBやプログラムなど色々発信します

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

表示されているページで、使われていないファイルを読み込むのはサイトの表示速度にも影響します。無駄な部分を減らしてサイトのダイエットをしましょう。

今回は、WordPressでよく使われているお問い合わせプラグイン「Contact Form 7」について。

プラグインの有効化をすると全ページでお問い合わせフォームに関連するファイルが読み込まれます。

この無駄をスッキリさせます。

プラグイン公式のコードを参考にさせて頂きました。

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

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

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

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を設置した場所に合わせてください。

以上です。

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

コメントを残す

メールアドレスが公開されることはありません。