テーマでwp_enqueue_scriptを使う

コリスさんが作成されたページの先頭や任意の要素に、スムーズにスクロールさせることができるスクリプトPage Scroller」を入れてみました。ページの右下の方にある「↑toTop」をクリックしてみてください。スムーズにページ上部へスクロールするはずです。

で、このスクリプトを実装するときに使ったのがwp_enqueue_script();と言うWordPressのアクションフック。Ver. 2.1から導入されたみたいなんだけど、プラグイン向けの関数と言うこともあって、その存在すら全然知りませんでした(汗)

wp_enqueue_scriptとは

何をするフックかと言うと、外部参照のスクリプトを:

  1. 重複しないように
  2. 適切な順番で

読み込むように自動的に調節してくれるフックです。なぜこんなのが必要かと言うと、最近のプラグインやWPコアの機能において、jQueryscript.aculo.usと言ったJavaScriptのライブラリとそれらプラグインがよく利用されているからです。これらスクリプトはそれぞれ適切な読み込み順序があり、また当然の如く、同じライブラリを2回も3回も読み込むのは無駄です。

より詳しく知るにはこの2つの記事が勉強になります。

使ってみると、便利ですね。もしテーマを自作したり、カスタマイズしたりする時は、スクリプトの外部参照をheader.phphead内に直接記述するのではなく、wp_enqueue_script();を利用するのが必須となってきそうです。

テーマではfunction.phpに記述する

プラグインではwp_enqueue_script();をプラグインファイルに記述すると思いますが、これをテーマで利用するにはfunction.php内に記述します。

今回はPage Scrollerで利用した訳ですが、function.phpには次の様に書きました。

[php]
function addWD6Scripts() {
wp_enqueue_script(‘PageScroller’, get_settings(‘site_url’).’/wp-content/themes/WaviaeiDesign6/js/jquery.page-scroller-303.js’, array(‘jquery’), ‘3.0.3’);
}
add_action(‘wp_print_scripts’, ‘addWD6Scripts’);
[/php]

addWD6Scriptsの箇所はadd WaviaeiDesign6 Scriptsの意味です。他の関数名と重複しないようにわざとこんな長い関数名にしています。wp_enqueue_script();は先ほど上げた2つのサイトを参考にしてください。

WordPress 2.7 の jQuery は1.2.6

ちなみに今回知ったのですが、WordPress本体にバンドルされているjQueryのバージョンはちょっと古くてver. 1.2.6でした。Page Scroller は、現在ver.3.0.6 が最新ですが、jQuery 1.2.6 では動作しません。Page Scroller ver. 3.0.3 が必要でした。

他のjQueryプラグインでも、WordPress で利用しようとすると同様の問題に当たるかもしれません。

ちなみに、WordPress 2.7.x にバンドルされている jQuery を、最新の jQuery 1.3.2 に置き換えて利用しようとすると管理画面でバグがあるらしいです。WordPress 2.8 で解決しているそうなので、それまで大人しく待った方が無難かと。

3 Comments

  1. どもです。
    wp_enqueue_script をテーマで使うときは、わざわざフックを通さなくても大丈夫です。
    header.php の冒頭にいかのように書くだけでおっけ。

    <?php
    wp_enqueue_script('PageScroller', get_settings('site_url').'/wp-content/themes/WaviaeiDesign6/js/jquery.page-scroller-303.js', array('jquery'), '3.0.3');
    ?>

    こうしておけば、管理画面では呼び込まれないというメリットもあります。

    • おおおっ、そうなんですか!ありがとうございます。
      これってwp_headの前でもOKなんですかね?それともやっぱりあとじゃなきゃだめなのかな。

      • これってwp_headの前でもOKなんですかね?それともやっぱりあとじゃなきゃだめなのかな。

        wp_enqueue_script() で登録された js は wp_head() の中で処理されるので、wp_head() より前に書かないとダメです。