41:jQueryとオリジナルJSファイルを読み込む
公開日:2018年11月08日
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
同じタグのコンテンツ
同じカテゴリーのコンテンツ