WordPressでjQueryが動かない人が確認すべきこと

top

スポンサーリンク

はじめに

WP初心者向けのエントリです。
ググりさえすれば大体のことが解決するこのご時世、
困ってググってきたWP初心者の方に、少しでもお役に立てればと思います。

スポンサーリンク

導入編

通常のHTML,CSS,jQuery等でサイトをつくることが出来ても、WPだと何故かjsが動かない場合があります。

可能性として
・WP独自のjQueryが入りっぱなし
・記述ミス
・サイバーテロ
などが考えられますが、
一番ハマりやすいのは1つ目の問題だと思います。

確認方法

ご自身のサイトのソースを確認していただければ一目瞭然です。
自分で入れたjQueryと入れた記憶のないjQueryがheadに二つ入っています。
この入れた記憶のないjQueryというのはWPにもともと入っているjQueryなのですが、
これが入っているとjQueryの書き方が従来のものと少し違ったものになります。
もちろん、書き方を変えればWP独自のjQueryでも問題なく動作するのですが、慣れない書き方でつまらない記述ミスをしてしまう可能性が拭いきれません。私はやらかしました。
なので、今回はWPのjQueryを切って、ご自身で準備したjQueryを使いましょう。
そうすればいつも通りにjQueryを動かせるはずです。

具体的になにをするのか

このコードをhead内に入れてください。

[php]
<?php
wp_deregister_script(‘jquery’);
wp_enqueue_script(‘jquery’, ‘http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js’, array(), ‘1.10.2’);
?>
[/php]

これはWP独自のjQueryを切ってGoogleさんのjQueryをお呼びするコードです。(もちろんコードを変えればご自身でアップロードしたjQueryでも問題ないです)

上記のコードを記述した後に、ソースを確認して下さい。
head内のjQueryがひとつになっていると思います。

そうなれば後はいつもの記述で思いのままです。

ついでに

問題なくjQueryは読み込んでいるみたいだけど、他のjsが読み込めていないという方へ。
いつも通り、ルートからの相対パスを書いていませんか。
jQueryだけでなく、CSSなども同様なのですが、WPは絶対パスじゃないと読み込みません。

[javascript]
<script type="text/javascript" src="<?php bloginfo(template_url);?>/js/pace.min.js"></script>
[/javascript]

この様に書いてあげましょう。
前半のphp部分がサイトのURLを表示する変数になります。
このサイトURLの後にいつも通りの相対パスを記述すれば、問題なく読み込んでくれるのではないかと思います。
私の場合はjsというフォルダの中にjsをまとめて入れているのでjsというフォルダを挟んでいます。
お試しください。h3

スポンサーリンク