Contact Form 7の速度を向上させる

「Contact Form 7」プラグインは、日本人の三好 拓也氏によって作成され、500万を超えるWordPressサイトで使用されています。これは長らくWordPressでのコンタクトフォームのトップチョイスとして人気があります。多機能で非常に使いやすい反面、速度に関して大きな問題があります。「Contact Form 7」は、コンタクトフォームがないページにも、すべてのページでCSSとJavaScriptファイルを追加します。これらのファイルは大きくありませんが、それでもサイトの速度を遅くしてしまいます。これはウェブサイトの高速化が求められる中で、大きな問題となっています。

さて、問題が特定されました。次に、解決策について話しましょう。以下の2つのオプションで、コンタクトフォームがないページからこれらのファイルを削除できます。

オプション1: カスタムPHPコード

カスタムPHPコードを作成して、テーマのfunctions.phpファイルに追加することができます。このコードは、コンタクトフォームがないページでContact Form 7のファイルを読み込まないようにWordPressに指示します。

ただし、後で更新される可能性があるテーマに変更を加える場合は、子テーマを使用するのが最善です。そうすることで、メインテーマが更新されても変更が消えることはありません。

さて、それを行う方法は2つあります。

オプション1 – A. 正確なページ情報を使用する

コンタクトフォームがあるページのIDが分かっている場合、このコードを使用できます。このコードは、指定されたIDのページでContact Form 7のファイルをロードしないようにWordPressに指示します。

Copied!if ( !is_singular() && get_the_ID() != 65 ) {
        add_filter( 'wpcf7_load_js', '__return_false' ); 
        add_filter( 'wpcf7_load_css', '__return_false' );
}
if ( !is_singular() && get_the_ID() != 65 ) {
        add_filter( 'wpcf7_load_js', '__return_false' ); 
        add_filter( 'wpcf7_load_css', '__return_false' );
}

複数のページにコンタクトフォームがあり、それらのIDが65と99の場合:

Copied!if ( !is_singular() && !in_array(get_the_ID(), [65,99]) ) {
        add_filter( 'wpcf7_load_js', '__return_false' ); 
        add_filter( 'wpcf7_load_css', '__return_false' );
}
if ( !is_singular() && !in_array(get_the_ID(), [65,99]) ) {
        add_filter( 'wpcf7_load_js', '__return_false' ); 
        add_filter( 'wpcf7_load_css', '__return_false' );
}

ページのIDの代わりにスラッグを使用したい場合。

Copied!if ( !is_singular() ) { 

    $page_slug = get_post_field( 'post_name', get_queried_object_id() );
    $excluded_slugs = ['example-page-slug-1', 'example-page-slug-2']; 
    
    // Add your excluded slugs here 
    if ( !in_array($page_slug, $excluded_slugs) ) { 
          add_filter( 'wpcf7_load_js', '__return_false' ); 
          add_filter( 'wpcf7_load_css', '__return_false' ); 
    } 
}
if ( !is_singular() ) { 

    $page_slug = get_post_field( 'post_name', get_queried_object_id() );
    $excluded_slugs = ['example-page-slug-1', 'example-page-slug-2']; 
    
    // Add your excluded slugs here 
    if ( !in_array($page_slug, $excluded_slugs) ) { 
          add_filter( 'wpcf7_load_js', '__return_false' ); 
          add_filter( 'wpcf7_load_css', '__return_false' ); 
    } 
}

オプション1 – B. ページのコンテンツをスキャンしてコンタクトフォームのショートコードを探す:

このコードは、ページのコンテンツにContact Form 7のショートコードが含まれているかどうかを確認します。ショートコードが見つからない場合、そのページでCSSとJavaScriptファイルの読み込みを停止します。

Copied!function globaliser_page_has_contact_form() 
     {

        global $post;

        if ( is_singular() ) 
        {
           $content = $post->post_content;   
           if ( has_shortcode( $content, 'contact-form-7' ) ) 
           {
             return true;
           }
        }
        return false;
     }


     if ( !globaliser_page_has_contact_form() ) 
     {
         add_filter( 'wpcf7_load_js', '__return_false' ); 
         add_filter( 'wpcf7_load_css', '__return_false' );
     }
function globaliser_page_has_contact_form() 
     {

        global $post;

        if ( is_singular() ) 
        {
           $content = $post->post_content;   
           if ( has_shortcode( $content, 'contact-form-7' ) ) 
           {
             return true;
           }
        }
        return false;
     }


     if ( !globaliser_page_has_contact_form() ) 
     {
         add_filter( 'wpcf7_load_js', '__return_false' ); 
         add_filter( 'wpcf7_load_css', '__return_false' );
     }

オプション 2: Rufo WordPressプラグイン

コードをいじりたくないですか？問題ありません！代わりに、Rufo WordPressプラグインを使用できます。この便利なツールは、コンタクトフォームがないページを自動的に検出し、不要なCSSとJavaScriptファイルを削除します。カスタムコードを書くよりも簡単でユーザーフレンドリーなソリューションです。

これは上記の2つ目の方法と同じことを行います。コンタクトフォームがないページからCSSとJavaScriptファイルを自動的に削除します。

なぜこのためにプラグインを作成したのかというと、単にコードを使用するのではダメなのか？実は一部の人々は、Contact Form 7プラグインを直接編集することを提案するかもしれませんが、それはWordPressの世界では良い考えではありません。

さらに、オンラインで調査したところ、他のソリューションもコードを追加することを提案していました。そこで、私たちは技術に詳しくない方々を含め、皆さんが簡単に使えるようにこのプラグインを作成しました。

そして、もしMVCと呼ばれる洗練されたアーキテクチャを使用して独自のWordPressプラグインを作成することに興味があるなら、ATAという別のプラグインがありますが、それはまた別の日のお話です！