WordPressでjQueryを使用した時に、上手く動かないときは使い方に問題があるかもしれません。以下に使い方と注意点をまとめました。

WordPress同梱のjQueryを使用する

WordPressにはデフォルトでjQueryが用意されています。そのため、外部から読み込まなくてもjQueryが使えるようになっています。しかし、通常のjQueryの記述方法のままだとWordPress同梱のjQueryでは認識されません。次の記述方法に書き換える必要があります。

1. $→jQuery に変更

WordPress同梱のjQueryでは、他のスクリプトとぶつからないように＄を認識しません。そのため、全ての＄をjQueryに変えることで、WordPress内で利用できるようになります。

//例
$(function(){
   $('#test').css( 'color', '#ffffff' );
});
//上記コードの＄をjQueryに変更
jQuery(function(){
   jQuery('#test').css( 'color', '#ffffff' );
});

2. $(function(){ });→jQuery(function($){ });に変更

全ての＄をjQueryに置き換えるのは大変なので、こちらの記述方法の方が使いやすいと思います。囲っている$(function(){ });を、jQuery(function($){ });に書き換えて囲むと認識されるようになります。

//例
$(function(){
   $('#test').css( 'color', '#ffffff' );
});
//jQuery(function($){ });に変更して囲む
jQuery(function($){
     $('#test').css( 'color', '#ffffff' );
});

このように記述すれば、囲まれている中で＄が使われていても認識されるようになります。

外部のjQueryを使用する

基本的にはWordPress同梱のjQueryを使用すれば大丈夫ですが、jQueryのプラグインなどに対応していない等が原因で同梱のjQueryが動かない場合があります。その時は外部からjQueryを読み込むことで動かすことができます。注意点としては、外部のjQueryを読み込むと、同梱のjQueryと競合してしまうので同梱のjQueryを削除するようなコードが必要になります。

1. functions.phpで読み込む方法

以下に例を記述していますが、記述方法はいろいろあるようです。

function custom_print_scripts(){
   if (!is_admin()) {
      wp_deregister_script('jquery');
      wp_enqueue_script('jquery', 'https://code.jquery.com/jquery-3.6.0.min.js', array(), '3.6.0' );
      wp_enqueue_script('jQueryプラグインファイル', 'ファイルパス' );
      } 
}
 add_action('wp_print_scripts', 'custom_print_scripts');

まず、wp_deregister_script('jquery'); で同梱のjQueryを削除してから、jQueryと各jsファイルを読み込みます。

2. header.phpで読み込む方法

基本的にはfunctions.phpで読み込む方が良いですが、header.phpで読み込む方法もあります。

<?php
   wp_deregister_script('jquery');
   wp_enqueue_script('jquery','https://~~~/jquery.min.js',array(),'3.6.0');
?>

functions.php同様、wp_deregister_script('jquery');で同梱のjQueryを削除する必要があります。

同梱のjQueryと外部のjQueryを両方使いたいとき

WordPressのプラグイン（同梱のjQueryで動く）とjQueryのプラグイン（外部のjQueryで動く）を両方使用したい場合、分岐文で読み込みを分けることで使用できることがあります。ただし、これは同ページに両方のjQueryを使用せずに各ページでそれぞれのプラグイン機能を使用する場合になります。

function enqueue_scripts(){
   //全ページ共通で使用するjsファイル
   wp_enqueue_script('main-js', get_stylesheet_directory_uri() . 'main.js', array( 'jquery' ), '', true);

   if((ページ指定){
      wp_deregister_script('jquery');
      wp_enqueue_script('jquery', 'https://code.jquery.com/jquery-3.6.0.min.js', array(), '3.6.0');
   }
}
add_action('wp_enqueue_scripts', 'enqueue_scripts');

最後に

基本的にはどちらか一方の使用（同梱のjQueryの使用推奨）でコーディングするのが良いのですが、WordPress同梱のjQueryでは正常に動かないときには外部のjQueryを使用することもあると思います。何かエラーが起きたときは以上の注意点等を確認すると解決できるかもしれません。