大切なあなたに、良きもの、良き方法を。
お問い合わせ

WordPress5.5で、スムーススクロールなどJavaScript・jQueryが動かないときは、jQuery3.0で記述されているか確認

更新日 : 2021/05/26
WordPress5.5にバージョンアップして、jQueryが「3」になりました。

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」はカプセル化してください。

非公開求人ならdoda
レバテックエキスパート

コメント

コメント欄

目次