WordPressで同梱されているjQueryを読み込ませない方法

2019/8/22 WordPress

こんにちはイナフクカズヤ(@Inafuku_Kazuya)です。
WordPressは通常jQueryが同梱されています。

通常はそちらのjQueryを使えばよいのですが、サイト内容によっては同梱されているjQueryではなく、他のjQueryを読み込みたい場合があると思います。

今回は同梱されているjQueryを読み込ませない方法をご説明します。

方法についてはhead内に直接記述する方法とfunctions.phpで設定する方法があります。

Contents

1 head内に直接記述する方法
2 functions.phpで設定する方法

head内に直接記述する方法

head内に直接記述する場合は下記のように記載します。これで同行されているjQueryは読み込まないようになるので、新しくjQueryを読み込ませます。

functions.phpで設定する方法

WordPressではwp_enqueue_script関数を使って、jsを読み込んだり読み込ませないなど制御することが可能です。

設定方法は下記です。

if ( !is_admin() ) {
function add_jquery() {

 // jQueryを読み込まないようにする
 wp_deregister_script('jquery');

 // jQueryを新しくセットして読み込ませる(テーマ内にあるjsを読み込ませてます。)
 wp_register_script('local_jquery',get_template_directory_uri().'/assets/js/jquery-3.2.1.min.js');

 wp_enqueue_script( 'local_jquery');

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

7行目にあるパスについては適宜変更してください。

footerに表示させる場合は第5引数をtrueにすれば対応できます。

wp_register_script('local_jquery',get_template_directory_uri().'/assets/js/jquery-3.2.1.min.js',null,null,false.true);

詳細についてはWordPress Codexで、ご確認ください。

以上で実装完了です。