コンタクトフォーム7（Contact Form 7）指定ページのみjsとcssを読み込ませる方法。｜WordPress

WordPressで、プラグインを使わずにContactForm7のjsとcssを指定ページのみ読み込ませる方法をご紹介します。

通常ContactForm7を導入すると、すべてのページでjsとcssが読み込まれその分表示速度も低下してしまいますが、この方法を使うことによってそれを防止することができます。

functions.phpの編集を行います。

子テーマが利用できる環境であれば子テーマのfunctions.phpを利用してください。

※必ずバックアップをとってから編集してください。

読み込むページが1ページのみの場合

function deregister_cf7_files() {
    if ( ! is_page(ページID) ) {
        wp_dequeue_style( 'contact-form-7' );
        wp_dequeue_script( 'contact-form-7' );
    }
}
add_action( 'wp_enqueue_scripts', 'deregister_cf7_files' );

もっと簡単なコード

ページのスラッグが”contact”というページのみ読み込ませたい場合は、次の通り。

2行目の’contact’の部分に任意のスラッグを入力します。

add_action( 'wp', function() {
  if ( is_page( 'contact' ) ) return;
  add_filter( 'wpcf7_load_js', '__return_false' );
  add_filter( 'wpcf7_load_css', '__return_false' );
});

読み込むページが複数ある場合

function deregister_cf7_files() {
    if ( ! is_page(array('ページID1','ページID2')) ) {
        wp_dequeue_style( 'contact-form-7' );
        wp_dequeue_script( 'contact-form-7' );
    }
}
add_action( 'wp_enqueue_scripts', 'deregister_cf7_files' );

まとめ

私は、問い合わせページが後々増えることを想定して、上記の「読み込むページが複数ある場合」のコードをはじめから利用しています。

作業自体は時間もかからず、すぐに実装できますので宜しければ参考にされてください。

最後までご覧いただきありがとうございました。