
WordPress本体に同梱されてるjQueryを使う場合で、jQuery1、jQuery2で記述したjQueryスクリプトをそのまま使う場合には注意が必要です。
僕は何年も前に書いたjQueryを考えなしにそのまま使っていて、WordPress5.5にしたお客さんからの「 動きません」の連絡で、半日ハマって冷や汗たらたら。。。
原因はよくあるjQuery3化。今後のためにポイントをメモしました。
JQueryスムーススクロール SmoothScroll
よく使うJQueryスムーススクロールです。
注意点は4行目のHrefの値をダブルクォーテーションでくくることです。
jQuery3以前はくくらなくて良かったので注意が必要です。
WordPressで同梱のjQuery本体を使う場合は、jQueryスクリプトはカプセル化してくださいね。
jQuery(function($) {
// #で始まるアンカーをクリックした場合に処理
// #を""でくくるのがjquery3
$('a[href^="#"]').on('click',function() {
var speed = 1200;//スクロールの速度
var href= $(this).attr("href"); // アンカーの値取得
var target = $(href == "#" || href == "" ? 'html' : href);// 移動先を取得
var position = target.offset().top;// 移動先を数値で取得
var offset = 100;//微調整
// スムーススクロール
$("html, body").animate({scrollTop:position + offset}, speed, "easeInOutCubic");
return false;
});
});
jQueryからは、.on()で統一して記述
「.click」は以前から「.on()」で記述することが勧められてましたが、jQuery3からは必須です。
さらに、「.load(),.unload(),.error()」廃止なので、こちらも「.on()」で記述です。
$(".hide").on("click",function() {
$(".sample").hide();
});
$(".show").on("click",function() {
$(".sample").show();
});
$(".toggle").on("click",function() {
$(".sample").toggle();
});
まとめ
WordPressのバージョンを5.5にして、JavaScriptが動かなくなったら、jQueryのバージョンとプラグインをまず疑ってください。
ポイントとしては犯人探しをするときは、1つずつ外せば見つかりやすいことです。
WordPressに同梱のjQueryを使わずに独自のバージョンを読み込みむ場合は構いませんが、同梱のjQuery本体を使うときは、必ずオリジナルの「jQuery」はカプセル化してください。
【WordPress】カテゴリー名・カテゴリーIDの取得・表示方法 | プロのWEBデザイナーが使う「シンプル囲み罫・囲み枠・ボックス!」コピペサンプル集 |
コメント