WordPressでjQueryが 動かない場合の対処法

WordPressでjQueryが 動作しない場合の対処法 javascript

WordpPressでテーマ開発する際、jQueryがきちんと動かない事があります。

その原因の大半はjQueryをテーマとwp_head()の双方で読み込んでいる事で発生するエラーです。

この記事ではWordPressでjQueryを扱う際の注意点や上手く動作しない場合の解決策について説明します。

wp_head()関数でjQueryが読み込まれている

WordPressでjQueryを利用する場合にエラー多いパターンがこちらです。

wp_head()はWordPress本体やプラグインが必要な情報を出力するための関数ですが、特定のプラグインをインストールすると、jQueryのscriptタグが出力されエラー発生する原因となります。

wp_headが原因でエラーとなる条件

contact form7 など、一部のプラグインをインストールすると以下のようにjQueryがheadタグに読み込まれます。

<script type='text/javascript' src='https://example.com/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>
<script type='text/javascript' src='https://example.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>

header.phpやfooter.phpでjQueryを直接読み込んでいる

wp_head()でjQueryが出力され、header.phpや内に以下のようにjQueryをコーディングしていた場合、jQuery同士が競合し、後に記述したスクリプトが優先されます。

また、jquery-migrate.min.jsが読み込まれるため、意図しない動作になりエラーが発生します。

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="crossorigin="anonymous"></script>

対処法

functions.phpに以下のコードを貼り付け、wp_head()でjQueryを出力されないようにします。

add_filter( 'wp_default_scripts', 'dequeue_jquery_migrate' );
 function dequeue_jquery_migrate( $scripts){
     if(!is_admin()){ $scripts->remove( 'jquery');
    }
}

WordPressでjQueryを読み込む正しい方法

WordPressでjQueryを読み込む場合、ソースに直接記述するのではなく、functions.phpで読み込むのが正しい方法です。

この例ではGoogleのCDNからjQueryを読み込んでいます。ダンロードして利用する場合はテーマディレクトリ内に設置してください。
また、バージョンが古い場合、Google Hosted Librariesから最新版を調べてください。

javasciptをfuctions.phpで読み込む

function load_js() {
	//管理画面を除外
	if ( !is_admin() ){
		//事前に読み込まれるjQueryを解除
		wp_deregister_script( 'jquery' );

		//Google CDNのjQueryを出力
		wp_enqueue_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js', array(), NULL, true );
	}
}
add_action( 'init', 'load_js' );

CSSをfuctions.phpで読み込む

CSSも同様にfunctions.phpから読み込みます。

function style_script(){
		wp_enqueue_style('anton' ,'https://fonts.googleapis.com/css?family=Oswald');
}
add_action( 'wp_enqueue_scripts' , 'style_script');

注意事項

  • この例ではGoogleのCDNからjQueryを読み込んでいます。ダンロードして利用する場合はテーマディレクトリ内に設置してください。
  • バージョンが古い場合、Google Hosted Librariesから最新版を調べてください。
  • jQueryをフッターに読み込ませる場合、第5引数をtrueに変更してください。
  • wp_enqueue_scriptのパラメータについては、関数リファレンス/wp enqueue scriptが参考になります。

コメント