jQueryを導入したのですが、うまく機能しません。

0
いいねをした人: 居ません
  • このトピックには6件の返信、2人の参加者があり、最後にmemimeにより1年、 8ヶ月前に更新されました。
7件の投稿を表示中 - 1 - 7件目 (全7件中)
  • 投稿者
    投稿
  • #119822
    memime
    参加者
    21

    【お使いの Snow Monkey のバージョン】19.2.0
    【お使いの Snow Monkey Blocks のバージョン】18.2.0
    【お使いの Snow Monkey Editor のバージョン】9.1.2
    【お使いのブラウザ】firefox
    【当該サイトのURL】https://kuji-blog.site/

    ### 実現したいこと

    jQueryを実装したい。

    ### 発生している問題

    ### 試したこと

    0
    いいねをした人: 居ません
    #119823
    memime
    参加者
    21

    間違えて送信していました。

    My snow monkeyにJsファイルを読み込ませたのですが、うまく機能しません。

    読み込みコードはこちらです。

    /* js読み込み */
    wp_enqueue_script(
    	'msm_scripts',
    	MY_SNOW_MONKEY_URL . '/main.js',
    	['jquery'],
    	filemtime(MY_SNOW_MONKEY_PATH . '/main.js'),
    	true
    );

    テストのために下記のコードでテキストカラーを変えてみましたが実装されません。

    (function($) {
    $('body').css('color','orange');
    })(jQuery);

    しかし、カスタマイザーから「jQuery の 読み込みを最適化する」のチェックをつけたり外したりするとその瞬間だけ実装されてテキストカラーが変わります。

    ですが、公開するとテキストカラーがもとに戻ってしまいます。

    文字色が変わるということは一応jQueryは機能しているかと思うのですが原因がわかりません。

    初歩的なことかと思いますが、ご教授いただけますでしょうか。

    よろしくお願いいたします。

    0
    いいねをした人: 居ません
    #119871
    アバター画像キタジマ タカシ
    参加者
    2398

    デベロッパーツールをみると

    Uncaught ReferenceError: jQuery is not defined
    

    というエラーがでてますね。「jQuery の 読み込みを最適化する」を無効化すると改善されるのでしょうか?

    0
    いいねをした人: 居ません
    #119874
    memime
    参加者
    21

    返信ありがとうございます。

    「jQuery の 読み込みを最適化する」のチェックをつけたり、外したりするとその時だけ機能するようです。

    「jQuery の 読み込みを最適化する」にチェックをつけると機能します。

    ですが、なぜか「公開」を押してカスタマイザーを閉じると元に戻ってしまいます。

    このテキストカラーはjQueryでしか指定していないので、色が変わっているということはjQueryは機能しているということだと思うのですが…

    0
    いいねをした人: 居ません
    #119879
    アバター画像キタジマ タカシ
    参加者
    2398

    カスタマイザー上ではフロント(実際の公開画面)のものに加えて別の js も読み込まれている可能性があるかもしれないので、「jQuery の 読み込みを最適化する」を外した状態で公開すると、フロントでは正しく読み込まれるのかどうかが気になっての質問でした。

    「jQuery の 読み込みを最適化する」にチェックをつけると機能します。

    ↑はカスタマイザー上での話でしょうか、あるいはフロントでの話でしょうか?

    一応こちらでも全く同じコードで試してみたのですが、「jQuery の 読み込みを最適化する」チェックありなしどちらも場合でも正しく実行されました。

    0
    いいねをした人: 居ません
    #119880
    アバター画像キタジマ タカシ
    参加者
    2398

    ちょっと気になった点としては、

    僕の環境では

    <script type='text/javascript' src='/wp-includes/js/jquery/jquery.js?ver=3.6.3' id='jquery-core-js'></script>
    <script type='text/javascript' defer src='/wp-content/plugins/my-snow-monkey2/main.js?ver=1678666875' id='msm_scripts-js'></script>

    となっているのに対し、memime さんの環境では

    <script type='text/javascript' defer id='jquery-core-js' data-type="lazy" data-src="/wp-includes/js/jquery/jquery.min.js?ver=3.6.1"></script>
    <script type='text/javascript' defer src='/wp-content/plugins/my-snow-monkey/scripts/main.js?ver=1678542667' id='msm_scripts-js'></script>

    となっています。僕の環境では jQuery には defer がついていないのに、memime さんの環境では jQuery にも defer がついています。defer がついちゃうと読み込み順が保証されなくなっちゃう(多分)ので、「jQuery が見つからない」というエラーがでるのだと思います。

    ちょっとなんで jQuery にも defer がついてしまっているのかはわからないのですが、高速化プラグインを使ったり、他に defer を追加するようなコードを追加していたりする可能性はありますか?また、他にも jQuery に依存する js ファイルを読み込ませていたりしますか?

    0
    いいねをした人: 居ません
    #119888
    memime
    参加者
    21

    お世話になっております。

    北島様の助言をもとにプラグイン等を調べてみましたところ、Flying Scriptsというプラグインで除外していたのが原因だったようです。記述を削除することで動作しました。

    初歩的なことですが、お答えいただいて感謝しております。

    ありがとうございます。

    解決したので閉じさせていただきます。

    2
    いいねをした人:
7件の投稿を表示中 - 1 - 7件目 (全7件中)
  • トピック「jQueryを導入したのですが、うまく機能しません。」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。