WordPressにはjquery本体が同梱されていて、header.phpに<?php wp_head(); ?>を書けばjqueryファイルが呼び出されます。
ただ、「最新版のjQueryを使いたい！」なんて場合に同梱のjqueryファイルを使わないことも稀にありますので、今回はその辺の処理を中心にまとめてみました。
WordPressに同梱されたjQueryを利用する
と言いながらも、今でもたまに「WordPressでjquery 動かねー…」とやらかしてしまうので、まずは同梱のjqueryファイルを使う場合の注意点から改めてご紹介。。。WordPress同梱のjqueryを使う場合、
$(document).ready(function() {});や$(function() {});
と書いても動いてくれないので、以下のように書きます。
|
1 2 3 4 5 6 7 |
<script> jQuery(document).ready(function($){ //処理 }); </script> |
WordPressに同梱されたjQueryを使わない
ここから本題の、WordPressに同梱されたものではないjqueryファイルを使う場合の処理のご紹介です。静的サイトを構築する場合は、jquery.comやGoogleで用意されたjqueryファイルを読み込ませることが多いと思いますが、WordPressでもそのまま
|
1 |
<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で以下の記述を追加します。|
1 2 3 4 5 6 7 8 9 |
<?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ファイルを呼び出すことができます。|
1 |
<?php load_jquery(); ?> |
コメント