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='https://www.tomiryu.com/wp-includes/js/jquery/jquery.js?ver=1.4.4'></script> <script type='text/javascript' src='https://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($) { // この中は $() が使える。 });
コメントを残す