夢みるゴリラ
夢みるゴリラ
  • 最終更新日：

WordPressに独自のjQueryを追加・管理する方法〜functions.phpへの書き方

今回はWordPressが読み込んでいるjQueryを解除し、自分が読み込みたいjQueryを追加する方法を説明します。

WordPressには初めからJquery本体が読み込まれているため、独自に設定する必要はありません。ただ、使用するjQueryのバージョンを自分で選びたい場合や、プラグイン以外でスライダーやアニメーションに必要なjQueryライブラリを読み込みたい場合は、functions.phpで追加・管理する必要があります。

この記事の目次

WordPressで独自にjQueryを追加・管理する方法

このブログのjqueryは以下のように配置しています。jsフォルダの中に、jQuery1.11.1バージョンとinit.jsというファイルが入っている状態です。

そしてfunctions.phpには以下のように記述しています。

if (!is_admin()) {
   function deregister_script(){  //　管理画面以外のjQueryを解除する設定
        wp_deregister_script('jquery');
    }
 
   function register_script(){  //　独自jQueryの出力方法の設定
        wp_register_script('jquery', get_template_directory_uri() . '/js/jquery-1.11.1.js', array(), null, true);
        wp_register_script( 'init', get_template_directory_uri() . '/js/init.js', array( 'jquery' ), filemtime( get_template_directory() . '/js/init.js' ), true);
        }
    function add_script() {  // 上で定義した内容を装備、出力
        deregister_script();
        register_script();
        wp_enqueue_script('jquery');
        wp_enqueue_script('init');
        }
    add_action('wp_enqueue_scripts', 'add_script');
}

これでWordPressが持つオリジナルのjQueryを解除した後、設定した２つのjQueryが</body>直前で読み込まれるようになります。

それでは３つに分けて説明していきます。

管理画面以外のjQueryを解除する設定

下のコードでWordPressのjQueryを解除しています。ただし管理画面で使われているjQueryまで解除してしまうと不具合が起きる可能性があるので、管理画面だけは独自のjqueryを使えるようにしています。

if (!is_admin()) {
   function deregister_script(){  //　管理画面以外のjQueryを解除
        wp_deregister_script('jquery');
}

独自jQueryの登録・出力方法の設定

下のコードで自分で使いたいjQueryを登録しています。簡単に説明すると読み込んだJQueryに【jquery】や【init】と名前をつけて、</body>直前で出力する設定をしてます。ここでは登録と設定のみで出力はまだされていません。

function register_script(){  //　独自のjQueryを登録
     wp_register_script('jquery', get_template_directory_uri() . '/js/jquery-1.11.1.js', array(), null, true);
     wp_register_script( 'init', get_template_directory_uri() . '/js/init.js', array( 'jquery' ), filemtime( get_template_directory() . '/js/init.js' ), true);
 }

定義した内容を装備、出力

設定した内容をWordPressに装備して、出力を行います。

function add_script() {  
        deregister_script(); // jQuery解除の設定を装備
        register_script(); // 独自jQueryの設定を装備
        wp_enqueue_script('jquery'); // 【jquery】と名前をつけたjQueryを出力
        wp_enqueue_script('init'); // 【init】と名前をつけたjQueryを出力
        }
    add_action('wp_enqueue_scripts', 'add_script');
}

設定が完了すると以下のように表示されます。

「?ver=数字」の部分は、ファイルを更新するごとに数字を変更する設定をしています。ブラウザがこのファイルを1度キャッシュしてしまうとファイルを変更してもすぐに反映されないため、数字を変えることでブラウザのキャッシュを避けています。

ページごとにjQueryを出力するには？

全ページに読み込んだjQueryを出力するとエラーが出ることがあります。そのときは、ページごとに必要なjQueryを出力しましょう。下のコードはトップページなら【slider】と名前をつけたjQueryを出力し、投稿ページなら【init】と名前をつけたjQueryを出力する設定をしています。

if (!is_admin()) {
   function deregister_script(){  //　管理画面以外のjQueryを解除する設定
        wp_deregister_script('jquery');
    }
 
   function register_script(){  //　独自jQueryの出力方法の設定
        wp_register_script('jquery', get_template_directory_uri() . '/js/jquery-1.11.1.js', array(), null, true);
        wp_register_script( 'slider', get_template_directory_uri() . '/js/slider.js', array( 'jquery' ), filemtime( get_template_directory() . '/js/slider.js' ), true);
        wp_register_script( 'init', get_template_directory_uri() . '/js/init.js', array( 'jquery' ), filemtime( get_template_directory() . '/js/init.js' ), true);
        }
    function add_script() {  // 上で定義した内容を装備、出力
        deregister_script();
        register_script();
        wp_enqueue_script('jquery');
        if(is_front_page()){ //　トップページなら出力
        wp_enqueue_script('slider');
        }
        if(is_single()){ //　投稿ページなら出力
        wp_enqueue_script('init');
        }
        }

    add_action('wp_enqueue_scripts', 'add_script');
}

WordPressではWordPressが持つjQueryを使うことが推奨されています。今回の設定で不具合が起きないとも限らないので、必ずバックアップをとってから行うようにしましょう。

こちらの記事も読まれています