スポンサード

WordPress にはjquery 本体が同梱されていて、header.php に <?php wp_head(); ?> を書けばjquery ファイルが呼び出されます。

ただ、「最新版のjQuery を使いたい！」なんて場合に同梱のjquery ファイルを使わないことも稀にありますので、今回はその辺の処理を中心にまとめてみました。

WordPressに同梱されたjQuery を利用する

と言いながらも、今でもたまに「WordPress でjquery 動かねー…」とやらかしてしまうので、まずは同梱のjquery ファイルを使う場合の注意点から改めてご紹介。。。

WordPress 同梱のjquery を使う場合、
$(document).ready(function() {}); や $(function() {});
と書いても動いてくれないので、以下のように書きます。

<script>
jQuery(document).ready(function($){
	
	//処理
	
});
</script>

WordPressに同梱されたjQuery を使わない

ここから本題の、WordPressに同梱されたものではないjquery ファイルを使う場合の処理のご紹介です。

静的サイトを構築する場合は、jquery.com や Google で用意された jquery ファイルを読み込ませることが多いと思いますが、WordPress でもそのまま

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

のように header.php に書いても動くことは動きます。
が、これだと同梱しているjquery 本体と重複してしまいます。

functions.php を編集して、同梱のjquery ファイルを呼び出さない

同梱している方は呼び出さずに Google Libraries API などCDN で用意されているjquery だけを利用する場合は、functions.php で以下の記述を追加します。

<?php
function load_jquery() {
	if ( !is_admin() ) {
		wp_deregister_script('jquery');
		wp_enqueue_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js', array(), '1.10.1');
	}
}
add_action('init', 'load_jquery');
?>

同梱のjquery ファイルを完全に呼び出さないようにすると、管理画面で一部機能が使えなくなってしまいますので、if ( !is_admin() ) で「フロント画面のみ」に適用する必要があります。

テーマファイルへの記述例

以下のように header.php に書いておくことで、フロント画面で同梱のjquery 本体の変わりにfunctions.php で指定したjquery ファイルを呼び出すことができます。

<?php load_jquery(); ?>

スポンサード