Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

@blog_bootcamp

Contact Form 7の読み込みをお問い合わせページのみに制限する方法

はじめに

Contact Form 7は、WordPressでのお問い合わせフォーム作成に便利なプラグインですが、全ページでJavaScriptとCSSを読み込むため、動作が重くなってしまいます。

この記事では、Contact Form 7のJavaScriptとCSSの読み込みをお問い合わせページのみに制限する方法を紹介します。

必要なページでのみJavaScriptとCSSを読み込むようにカスタマイズすることで、WordPressの高速化にも大きく貢献してくれます。

コンタクトフォームの読み込みを制限する

WordPressのfunction.phpに以下のコードを設置してください。
管理画面から、外観→テーマエディター→テーマファイルで編集できます。

function.php
//コンタクトフォーム読み込み制限 
function cf7_limitation() {
    add_filter( 'wpcf7_load_js', '__return_false' );
    add_filter( 'wpcf7_load_css', '__return_false' );
    if( is_page( 'contact' ) ){
        if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
            wpcf7_enqueue_scripts();
        }
    if ( function_exists( 'wpcf7_enqueue_styles' ) ) {
        wpcf7_enqueue_styles();
    }
    }
}
add_action( 'template_redirect', 'cf7_limitation' );

全てのページでContact Form 7のJavaScriptとCSSの読み込みを無効にした上で、

Contact Form 7を設置したページのみ、
wpcf7_enqueue_scripts();の部分でJavascriptを
wpcf7_enqueue_styles();の部分でCSSを読み込むようにしています。

is_page( 'contact' )の部分は、Contact Form 7を設置したページのパーマリンクに合わせて変更してください。
上記コードは、https://hogehoge.com/contact/に設置した場合です。

参考ページ

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
2
Help us understand the problem. What are the problem?