WordPressにJavascript追加(JQueryなど)


WordPressにJQueryや自作のJavascriptファイルを追加挿入するやり方としては、

  • サイト全体(全てのブログ記事)共通で、Javascriptを追加挿入したい場合
  • サイト内の個別の記事に、Javascriptを追加挿入したい場合

の二つがあると思います。

サイト全体(全てのブログ記事)共通で、Javascriptを追加挿入したい場合

「wp-content/themes/<テーマディレクトリ>/header.php」のファイルをエディタで開き、wp_enqueue_script()という関数をwp_head()の前に埋め込みます。
参考 : Function Reference/wp enqueue script

ワードプレスに最初から入っているJQuery,prototype.jsなどを有効にするには、単純に
wp_enqueue_script('jquery'); や 
wp_enqueue_script('prototype'); のように呼ぶだけです。

また、例えばJQueryに依存する自作のJavascriptファイルを読み込む場合は、
wp_enqueue_script('example',get_bloginfo('template_url') . '/js/example.js', array('jquery'));

のように第2引数に自作Javascriptファイルのパス、第3引数に依存するJavascriptライブラリ(=例の場合JQueryを示す’jquery’)を配列で指定してあげると、wordpressが依存関係を保ってscriptタグをヘッダーに埋め込んでくれます。

↓header.php

.....
//WordPressにインストール済みのJQueryを読み込む場合
wp_enqueue_script('jquery');
.....
//JQueryに依存するexmple.jsという自作Javascriptライブラリファイルを読み込む場合
wp_enqueue_script('example',get_bloginfo('template_url').'/js/example.js', array('jquery'));
.....
wp_head();
.....

↓生成されるhtmlヘッダ

.....
<script type='text/javascript' src='http://www.tomiryu.com/wp-includes/js/jquery/jquery.js?ver=1.4.4'></script>
<script type='text/javascript' src='http://www.tomiryu.com/wp-content/themes/my-twentyten/js/my329.js?ver=3.1.2'></script>
.....

サイト内の個別の記事に、Javascriptを追加挿入したい場合

個別のページで柔軟にjavascriptの読み込みをコントロールしたい場合は、pluginを自作することも考えられますが、時間がないので既存のプラグインを活用することにします。

HeadSpace2というのがあったので、これを導入しました。
元々はSEO対策用にkeywordやdescriptionといったhtmlのヘッダー部のメタ情報をページ毎に管理できるプラグインなのですが、cssやscriptの読み込みも含まれるのでこれを利用しています。

【補足】
WordPressに標準でインストールされているJQueryを使う場合注意が必要なのが、
prototype.jsの$関数と干渉を防ぐため、“no-conflictモード”になっていて$が使えなくなっていることです。
したがってJQueryを書く場合は、

$(document).ready(function(){
$(...) ...
});

ではなく、$を使わずに

jQuery(document).ready(function(){
    jQuery(...) ...
});

と書きます。
あるいは、以下のようにWrapしてやると、中では$が使えるようになるようです。

jQuery(document).ready(function($) {
    // この中は $() が使える。
});

タグ: ,
カテゴリー: WordPress

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

はてなブックマーク人気エントリー
カテゴリー