稀にやってしまう
原因は大体２つ
HTMLで組んだら普通に動くんだけど、という前提で進める。
動くのに動かない原因は大体２つに絞られる。
- <script>で記述するのをミスった
- jsファイルの貼り付け位置をミスった
ついうっかりというのがあるので仕方ない。
<script>で記述する場合
これは当初より言われてることだけど、ページ上に直接スクリプトを記述する場合、動かなければ「$」が原因だったりする。
「$」を「jQuery」に書き換えたら動く。
<script>
//動かない
$(function(){...})
//動く
jQuery(function(){...})
</script>対象は無名関数だけじゃなくて、全部ね。
例えばスムーススクロールを直接書く場合。
<script>
$(function(){
$('a[href^="#"]').click(function(){
let speed = 500;
let href= $(this).attr("href");
let target = $(href == "#" || href == "" ? 'html' : href);
let position = target.offset().top;
$("html, body").animate({scrollTop:position}, speed, "swing");
return false;
})
})
</script>こうなる。
<script>
jQuery(function(){
jQuery('a[href^="#"]').click(function(){
let speed = 500;
let href= jQuery(this).attr("href");
let target = jQuery(href == "#" || href == "" ? 'html' : href);
let position = target.offset().top;
jQuery("html, body").animate({scrollTop:position}, speed, "swing");
return false;
})
})
</script>たぶん普段書くときは「$」でやってると思うから、記事ごとのカスタムjsで入れるときとか、ローカルで用意したやつの「$」を「jQuery」で置換してから貼り付ける。エディタの置換を使って大丈夫なんで安心して楽をすればいいです。
直接書くことはめったにないけどjs内の値をphpで出力したいことはたまにあって、そういうときはテーマファイルに書くのが楽だったりして、だからたまたまが重なるのでまったくないケースではない。
jsファイルの貼り付け位置
jQueryのルールとして、ライブラリを読み込んだあとでスクリプトを書かないといけない。
それこそ普通に作ってたらこういう面倒に遭遇しないんだけどね。
wp_head()の手前にスクリプトを載せちゃったならどんまい。
jsとjQueryの違いが分かっていない人（＝jsを何でもかんでも</body>直前に書く人）が作ったサイト管理の後釜に入った時とかにある。これがもうマジでキツいですね。<head>に書くのがデフォルトになってる人がこれにぶち当たると、ソースコードを開かないと原因を見つけられなかったりする。妙なincludeを重ねてよく分からん階層でライブラリを読ませてたらほんとに面倒。突貫だとinclude後に書けば済むって話にできるけど、長期的に考えたらあっちこっちに書いたコードは何も幸せにならない。
動作的に問題なくても編集に手間取るとマジでしんどい。
不本意なケースだけど他人のコードをいじる場合は必ずそういうところもチェックしてから触るようにしましょう。普通にWPを使いこなしてるって意味で多少込み入った組み方は勉強になるしむしろ便利だったりするんだけどね。学びを得るんだと言い聞かせましょう。
コメント