通常、HTMLにjQueryを読み込む際には…

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

のように記述する。しかし上記のように一般的な記述方法だと、きちんと読み込んでくれない場合がある。それは、WordPressの各種プラグインのJavaScriptが、競合しないように内部処理が行われているためである。各プラグインとの競合を起こさないためには、wp_enqueue_script()という関数を使ってjQuery等の外部ファイルを読み込む必要がある。

下記は前回までに制作したhead内のjQueryの読み込み部分。本体が1つと、使用するjQueryプラグイン6つを読み込んでいる。
　

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.heightLine.js"></script>
<script type="text/javascript" src="js/responsiveslides.js"></script>
<script type="text/javascript" src="js/responsiveslides.min.js"></script>
<script type="text/javascript" src="js/function.js"></script>
<script type="text/javascript" src="js/scrolltopcontrol.js"></script>
<script type="text/javascript" src="js/jquery.meanmenu.js"></script>

WordPressでjQueryを正常に動かすためのコードはこれだ

<?php
wp_deregister_script( 'jquery' );
wp_enqueue_script('jquery','http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js');
/* 以下、その他のjQueryプラグインの読み込み */
wp_enqueue_script('name1', get_template_directory_uri().'/js/jquery.heightLine.js',array('jquery'),'1.10.2');
wp_enqueue_script('name2', get_template_directory_uri().'/js/responsiveslides.js',array('jquery'),'1.10.2');
wp_enqueue_script('name3', get_template_directory_uri().'/js/responsiveslides.min.js',array('jquery'),'1.10.2');
wp_enqueue_script('name4', get_template_directory_uri().'/js/function.js',array('jquery'),'1.10.2');
wp_enqueue_script('name5', get_template_directory_uri().'/js/scrolltopcontrol.js',array('jquery'),'1.10.2');
wp_enqueue_script('name6', get_template_directory_uri().'/js/jquery.meanmenu.js',array('jquery'),'1.10.2');
?>

〜省略〜

<?php wp_head(); ?>
</head>

シンプルに解説しよう。「/* 以下、その他のjQueryプラグインの読み込み */」より上の記述はjQuery本体の読み込み。その他のjQueryプラグインの読み込み部分では、それぞれ6つのプラグインへのパスと、バージョンを記述してある。ここではjQueryのバージョン「1.10.2」を使用。現在、jQueryのバージョンは2.x系が最新となっているが、IE8以前のサポートはしていないため、1.x系を使っている。この「1.10.2」の部分を単に「1」と記述すると1.x系の最新バージョンを読み込んでくれる。しかし具体的なバージョンを示してあげる方がサイトの読み込み速度は早くなる。また、1.x系の最新バージョンを読み込んで不具合がある場合には、不具合のない具体的なバージョン（1.2.6、1.3.1などの過去のバージョン）を記述してあげればいいだろう。
　
あとポイントとなるのは「name1〜6」のところ。ここは任意の名前をつけるだけでいいが、名前が重複しないようにしてもらいたい。そして今回最も重要となるのは、<?php wp_head(); ?>の部分。これは次回、詳しく説明するが</head>の直前に記述してもらいたい。たったこれだけでWordPressでjQueryが機能するようになる。

jsファイル内では画像の相対パスは使えない

さあ、これでjQueryが動作する！と思って確認してみると、トップへ戻るの画像が認識されていない。
　

jsファイル内の画像は絶対パスで

WordPressではjsファイル内の画像の相対パスを、前回説明した「テンプレートタグ」を使用しても機能してくれない。なら絶対パスを使ってやればいい。

jsフォルダ内にある「scrolltopcontrol.js」の12行目あたりの「up.png」への相対パスを下記のような絶対パスに変更してやる。そうすればWordPressのjsファイルで画像が読み込める。
　

	controlHTML: '<img src="http://y-jet.xii.jp/wp-content/themes/mono-press/images/up.png" style="width:47px; height:66px" />',

　
WordPressは様々な情報がネット上には満載なので、PHPの知識がなくとも案外コピペでいけてしまう。「なぜ、そうなるのか」と深く考えてしまうタイプの人はPHPを基礎から学ぶといいだろう。しかし当サイトでは深く考えずとも、コピペでいけてしまう“夢コード”を追究していく。次回はindex.phpを分割していく方法を伝授する。乞うご期待！
　

Tweet