さぁ!検索しよう!

WordPressでjQueryを動作させる方法はいくつか存在しますが、その中でも最も確実に動作させる方法を解説します。

WordPressを学習中、壁にぶち当たることが多い事象のうちに、WordPressでのjQueryの使用です。

その主な原因は、WordPressの内部で動作しているjQueryを用いるためです。jQuery本体を用意する必要がない利点があります。しかし、このjQueryはWordPressの管理画面等でも使用されているためか、干渉等で正常に動作しないときがあります。

そこで今回解説するWordPressでjQueryを動作させる最前の方法は、WordPressの内部で動作しているjQueryを停止させ、新たにGoogleのCDNを用いてjQueryを読み込む方法です。

手順は下記の通りです。

  1. WordPressの内部で動作しているjQueryとjQuery UIを停止させるため、head内の<?php wp_head(); ?>より上に下記のコードを記述します。
    	<?php wp_deregister_script('jquery'); ?>
    	<?php wp_deregister_script('jquery-ui-core'); ?>
    	
  2. GoogleのCDNを利用してjQueryとjQuery UIを動作させるため、head内の<?php wp_head(); ?>より上に下記のコードを記述します。
    	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
    	

これでWordPressでjQueryを動作させる準備が完了しました。実際にjsファイルやjQueryプラグインを動作させるには、head内の<?php wp_head(); ?>より上か、</body>の直前に下記のように記述します。

<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.jrumble.1.3.min.js"></script>

以上です。