41：jQueryとオリジナルJSファイルを読み込む

WordPressにjQueryファイルとオリジナルJSファイルを読み込ませます。

functions.php

// jQuery読込
function load_js() {
  if ( !is_admin() ) {//管理画面以外で下記ブロック内を実行
    wp_deregister_script('jquery');//WPが持つjQueryを削除
    // 新たにjQuery読み込み
    wp_enqueue_script(
      'jquery',
      'https://code.jquery.com/jquery-3.3.1.min.js',
      array(),
      '3.3.1',
      false
    );
    // オリジナルJS読み込み
    wp_enqueue_script(
      'script1',
      get_template_directory_uri().'/js/script.js',
      array('jquery'),
      '1.0',
      true
    );
  }
}
add_action('init', 'load_js');

script.js

// jQuery
(function($) {
  $(function(){
    window.setTimeout(function(){
      $('body').css('background-color', '#ccc');
    }, 2000);
  });
})(jQuery);

jQueryの「$」記号が使えない

WordPressのjQueryはそのままだと「$」記号が使えません。

そのため「$」の代わりに「jQuery」を使用するか、「(function($) {」と「})(jQuery);」の間に記述します。

例）

$(function(){
  window.setTimeout(function(){
    $('body').css('background-color', '#ccc');
  }, 2000);
});

「$」の代わりに「jQuery」を使用

jQuery(function(){
  window.setTimeout(function(){
    jQuery('body').css('background-color', '#ccc');
  }, 2000);
});

「(function($) {」と「})(jQuery);」の間に記述

(function($) {
  $(function(){
    window.setTimeout(function(){
      $('body').css('background-color', '#ccc');
    }, 2000);
  });
})(jQuery);

このページで出てくる関数

WordPress関数は「公式サイトのドキュメント」で確認しましょう。

WordPress関数

wp_deregister_script()

wp_enqueue_script()

get_template_directory_uri()

add_action()

オリジナル関数

load_js()

欠席者対応：wireframe15