開発ブログ

WWWクリエイターズが送る、Git、CSS、HTML、コマンドライン、Macの便利機能など、開発に関する役立ち情報発信します。気まぐれに更新。

WordPress テーマ開発:jQueryの正しいロード方法と使い方

最終更新:2017-07-15 by Joe

ワードプレスのテーマ開発者の、初期に起こりやすい疑問や迷いを解決するシリーズです。

今日は、必須ともいえる「jQueryなどの読み込み方法と、正しい使い方」です。

HEADタグにscriptタグの追加する

WordPressの世界には、その世界の作法があります。まずは、何も考えずに、このenqueue_script関数を使ってください。

もしheader.phpの<HEAD>タグ内に、直接jQueryロード用のscriptタグを書き込んでいるあなたは、やり方を見直すべきです。

<?php 
/**
* Load scripts and style sheets
*/
function load_scripts(){ 
  wp_enqueue_script(
    'fancyboxs', // ハンドル名
    get_template_directory_uri() . '/js/main.js', // ソース
    array( 'jquery' ), // 先に読み込まれているべきScript(ハンドル名) 
    filemtime( get_template_directory() . '/js/mainjs' ), // バージョン情報 
    false // Bodyタグの最後でロードしますか?
  );
}
add_action( 'wp_enqueue_scripts', 'load_scripts' );
?>

プチ解説します。

第一引数:ハンドル名

あなたがロードしようとしている自分のコードがmain.jsだとすれば、上記の様にそのファイル名を書きます。他と重複しない様に命名してください。

第二引数:ソース

ただのファイルパスです。

第三引数:依存するScriptのハンドル

この引数は重要です。ここに「jquery」と記載することで、もともとWordpressが持っている(/wp-include 配下に含まれる)jQueryをロードします。自分のテーマ内に独自に配置したjQueryや、CDN経由のjQueryを(特別な理由がなければ)ロードしないでください。

WordPressがこの様な作法になっているには、理由があります。その理由を知らないうちは、とりあえず作法に従ったほうがよいでしょう。

第四引数:バージョン情報

こちらはブラウザキャッシュが残ってしまうことによる問題を解決するものです。

「main.js?ver=1.32」など、クエリ文字列を変更してやることで、ブラウザにキャッシュを利用することを防ぐ方法はご存知だと思いますが、上記は、それを自動化したものです。ファイル更新があれば、自動的にverの値が変わってくれます。

第五引数:ロードする場所

これは特に気にしなくていいでしょう(特別な理由がなければ)。現在としては、headでロードしようが、footerでロードしようが、そこまでの大きなパフォーマンスの違いは生まれないと思います。この引数を省略するか、falseにすることで、普通にHEADにScriptをロードします。

自分のScriptを書く。「$」をうまいこと参照する

上記のmain.jsの中身です。よくある問題は、

「jQueryをつかいたいのに「$」が参照できない?!」

という問題です。

上記のロード方法では、デフォルトでは、「jQuery」という変数名で参照する必要があることです。これは以下の様に解決するのが WordPress での作法です。(正確には、デファクトスタンダードです)

(function($) {

  // ここに書く。「$」が参照できる。例:
  $('.button').click( function() {
     alert('Thank you for loading jQuery!');
  });

})(jQuery);

グローバルに置いたクロージャに「jQuery」オブジェクトを引数でわたし、それを内部で「$」で参照してやります。

$が利用できないのは、ワードプレスはデフォルトで、jQuery を「no-conflictモード」でロードしているためです。もしかするとあなたのテーマや、利用しているプラグインが、「$」を変数として利用するjQuery以外のjavascriptライブラリを利用しているかもしれませんので、それを避ける様に、ワードプレスでは、no-confilictモードがデフォルトなのです。

まとめ

間違っても、独自に<HEAD>内に、ロード用のスクリプトは書かないで下さい。あなたのWordPress開発レベルが疑われる事は必須です。

また、多くのプラグインはjQueryを必要としますので、プラグイン側でjQueryをロードします。上記の作法に従ってwp_enqueue_script() を利用しておけば、重複してjQueryがロードされる事が防がれ、ページ表示のパフォーマンスも向上します。

繰り返しですが、<HEAD>内に、独自にjQueryロード用のスクリプトは書かないで下さい。どうかお願いします。

参考

閉じる