先日初めてwordpressでjQuery関連の記事を書く際、コードをそのまま入れてみても動かすことができず、四苦八苦。
表示されているページのソースを見直して、思い当たるものをひとつひとつ確認してみました。
jQuery本体を読み込んでいる？
ほかの方が作ったものに手を加える場合、必要なものが入っていないことに気づかない時があります。
今回は問題なく入っていました。
追加コードはjQuery本体の後に書いてある？
最初に入れていた場所（カスタムフィールドのhead_custom）だとjQueryよりも前だったため、後ろに（カスタムフィールドのfooter_custom）行くように変更してみましたがまだ動きません。
現在利用中のワードプレステーマ「Simplicity2」では、デフォルトでカスタムフィールド「head_custom」「footer_custom」の設定がされているのですが、投稿ページのカスタムフィールド欄には初期値では入っておらず、使用時に自分で登録する必要があります。
こちらに関しては、また後日別記事でご説明したいと思います。
jQuery本体のバージョンにコードは対応している？
本体のバージョンによって、プラグインが動かない場合もあります。
また、コード自体の書き方がバージョンに合っていない時もあります。
今回はこちらに関しては問題ありませんでした。
jQuery本体を複数読み込んでいたりしてない？
過去に経験があるのですが、ほかの方が作ったものを変更したりする際、どこで何を読み込んでいるかわからない場合があります。
いろいろな人が手を加えているうちに、いろんなバージョンのものがいくつも入っていたりなんてことも。。。
こちらに関しても今回は問題なし。
追加コード・jQueryプラグイン利用時に必要な他のプラグインはきちんと入っている？
入れる際に参考にしているサイトがあれば、そちらをよく確認してみてください。
セレクタの指定を間違っていない？
単純なスペルミスだったりすることもあります。
jQueryではidやclassなどのセレクタを利用して動かしますので、同じものが書かれているか確認しましょう。
jQueryと他のライブラリとが競合していない？
ワードプレスでは「Prototype.js」というライブラリが入っており、jQuery・Prototypeとも同じ「＄」を定義していて競合してしまいます。
いろいろ検索してみると、ワードプレスの場合はこれのせいで動かず困っている場合が多いようです。
phpに直接手を加える方法もあるのですが、初心者向けで簡単なのは以下の対応策。
(function($){
// ここにコードを記述
})(jQuery);
毎回コードを書くときに必要になるのがネックですが、管理画面からできますし、phpを変更してシステムが動かなくなる心配もありません。
これを追加して、無事に動かすことができました。
他にも原因がある場合がありますが、jQueryが動かない時は一度お試しください。
コメント