フッター(bodyの閉じタグの前)でjQueryを読み込む

WordPressにはあらかじめjQueryがインストールされており、管理画面に使用されています。 そのままjQueryを読み込むとダブルでjQueryを読み込んでしまうため、一旦WordPressにインストールされているjQueryを削除(deregister)の上、新たに読み込みをします。 functions.phpに記述をします。

bodyの閉じタグの前にjQueryを読み込む記述

バージョン2.2.4のjQueryのCDNを読み込む例です。任意のバージョンに書きかえてください。

functions.php
if(!is_admin()){ //①
  function my_register_jquery() {
  wp_deregister_script( 'jquery' ); //②
  wp_deregister_script( 'jquery-migrate' ); //③
  wp_enqueue_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js', array(), '2.2.4', true); //④
  }
  add_action('wp_enqueue_scripts', 'my_register_jquery');
}
HTMLの出力結果
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js?ver=2.2.4'></script>
</body>
</html>
  1. 管理画面では実行しないようにする
  2. 元からインストールされているjQueryを削除
  3. 元からインストールされているjQuery-Migrate*を削除
  4. バージョン2.2.4のjQueryを登録

jQuery Migrateは1.9.0で廃止になった機能を補完する機能を持つプラグインですが、あまり必要が無いかもしれませんのでこちらも削除します。

その他のJavaScriptファイルをfooter.phpに記述する例

jQueryは<?php wp_footer(); ?>箇所に出力されます。
その他のJavaScriptファイルは<?php wp_footer(); ?>の後ろに記述します。

サイトルートにあるjsフォルダ内のscript.jsを読み込む例です。

footer.php
<?php wp_footer(); ?>
<script src="/js/script.js"></script>
</body>
</html>
ネットショップ向けWooCommerce対応WordPressテーマ「Japacart(ジャパカート)」

本サイトの内容に誤りや不正確な記述がある場合やサンプルに基づくいかなる結果も一切の責任を負いかねますので、あらかじめご了承ください。

ネットショップ向けWooCommerce対応WordPressテーマ「Japacart(ジャパカート)」
Copyright © WPスイッチ All Rights Reserved.