コンタクトフォーム7のCSSとJSを制御する方法

 Wordpressを使っているならほとんどの人がインストールしていらしゃるであろうお問い合わせフォーム作成プラグイン「Contact From7」。

 このプラグインは非常に便利なのですが、インストールすると、当然のことながら、お問い合わせページ以外のページにもスタイルシートとJAVAスクリプトが読み込まれます。

 そこで、これを制御するのが本稿の主題です。なお、これはプラグインの公式ページにも書かれていますが、この記事は、それをよりかみ砕いてご紹介することを目的としています。

jquery

  • プラグインのコアファイルは触らない。
  • header.phpを改変する方法を取った。

方法論

 公式ページにあるとおり、方法論としては、まず、プラグインから出力されるようフックされているファイルを全て出力しないように設定します。

 次に、出力すべきページのIDを調べ、それのみ出力させるようにコードを追加します。

1.プラグインから出力の出力を制御する。

 functions.phpに以下のコードを書き足します。

<?php
//++++++++++++++++++++++++++++++++
//CF7のスクリプトを制御
add_filter( 'wpcf7_load_js', '__return_false' );
add_filter( 'wpcf7_load_css', '__return_false' );
?>

これで、ヘッダーやフッターにロードされていたファイルが、ロードされなくなります。

2.お問い合わせを設定しているページを特定する。

 次に、お問い合わせフォームを設置しているページのIDを調べます。

  1. ワードプレスにログインし、お問い合わせフォームを設置しているページの編集画面を開きます。
  2. パーマリンクの右側にあるボタン「短縮URLを表示」をクリックします。
  3. 表示されたURL末尾の「/?p=**」のアスタリスク部分がページIDとなります

3.お問い合わせフォームのページだけにファイルをロードする。

 以下のコードをheader.phpの【wp_head();】直前に挿入します。

<?php
    if ( is_page( '**' ) ) {
        wpcf7_enqueue_scripts();
        wpcf7_enqueue_styles();
    }
?>

 以上で作業は完了です。

まとめ

 グーグル社のモバイルフレンドリーは、レイアウトだけでなくページの読み込み速度を上げることも重要です。そのページで使わないスクリプトをロードさせるよりは、させない方がより良いと言えるでしょう。このTipsは案外簡単にできるにもかかわらず、それをしていらっしゃるサイトを見かけることはあまりありません。是非お試しください。

 ちなみに、このサイトではやってません(笑)。