質問: まだ経験が浅く、初歩的なご質問かもしれませんが、恐れ入りますが、 解決方法がわかるようでしたら、ご教示頂けますと助かります。 ### 前提・実現したいこと ・wordpress、PHP、JQuery(ajax)、MYSQLを使って検索サイトを構築しています。 ・wordpressではテーマ「stork」を使って、以下サイトにある 「スライダー付き記事一覧」を実現したいです。 https://open-cage.com/stork/document/toppage/ ・サイト内でajaxを使うため、functions.php関数内でjqueryファイルを読み込んでいます。 詳細はソースコードを参照ください。 ### 発生している問題・エラーメッセージ ・上記のスライダー付き記事一覧の設定を追加すると、スライドショーが表示されずに 画面が真っ白のようなスペースが表示されてしまいます。 ・事象発生時の画面表示状況は「試したこと」を参照ください。 ・原因をネットで調査した結果、仮説として、ajaxを使うために定義しているjqueryと wordpress本体のjqueryがコンフリクトしているのではないかと考えております。 「試したこと」で実際に検証して事象の発生条件を確認することはできたと思っています。 ・原因が上記仮説であっている場合、wordpress本体のjqueryとajaxを使うために 個人的に定義しているjqueryを共存させる必要があると考えていますが、 その対処方法がわからない状況です。 ### 該当のソースコード ``` $g_test1nm, 'test2nm' => $g_test2nm ); // ここでjqueryを読み込んでいる。(★)のコメントアウトで事象が解消される wp_deregister_script('jquery'); wp_enqueue_style('bootstrap', 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css',array(),false, false); wp_enqueue_style('bootstrap4', 'https://cdn.datatables.net/1.10.18/css/dataTables.bootstrap4.min.css',array(),false, false ); // (★) wp_enqueue_script( 'jquery1', 'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js',array(),false, true ); wp_enqueue_script( 'jquery2', 'https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js',array('jquery1'),false, true ); wp_enqueue_script( 'jquery3', 'https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js',array('jquery2'), false, true ); wp_enqueue_script( 'smart-script', get_stylesheet_directory_uri() . '/js/ajax_XXXXXX1.js', array( 'jquery3' ),false, true ); wp_enqueue_script( 'ranking1-script', get_stylesheet_directory_uri() . '/js/ajax_XXXXXX2.js', array( 'jquery3' ),false, true ); wp_enqueue_script( 'ranking2-script', get_stylesheet_directory_uri() . '/js/ajax_XXXXXX3.js', array( 'jquery3' ),false, true ); wp_enqueue_script( 'test-script', get_stylesheet_directory_uri() . '/js/ajax_XXXXXX4.js', array( 'jquery3' ),false, true ); wp_localize_script( 'test-script', 'my_script_vars',$ex_array); } add_action( 'wp_enqueue_scripts', 'add_files' ); ``` ### 試したこと ・原因切り分けとして、コンフリクト解消を行うため、ajaxを使うために定義しているjqueryを コメントアウトすると、事象が解消され、スライドショーが正常に表示されました。 コメントアウト部分はソースコード上の(★)です。 【事象発生時】 ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/33a93988996c004842953ccb453c9a47.png) 【正常時】 ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/287bde30e691b70d6dfabaa916aedcc1.png) ・もう一つの仮説として、wordpressのプラグインが影響している可能性が考えられたので、 全てのプラグインをオフにして事象が解消されないことを確認しました。 ### 補足情報(FW/ツールのバージョンなど) ・WordPress 5.2 ・PHP 7.2.x
回答: CHERRYさん、ご確認ありがとうございました。 すみません、私の確認不足でした。 webブラウザのデベロッパーツールから以下エラーが出力されておりました。 Uncaught TypeError: $(...).slick is not a function 上記エラー内容から、jqueryの多重読み込みが原因であることがわかりましたので、 jquery1をコメントアウトし、jquery2はjquery1読み込みを待たずに実行するように修正しました。 それで、上手く動作することを確認することが出来きました。 【変更前】 ``` // wp_enqueue_script( 'jquery1', 'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js',array(),false, true ); wp_enqueue_script( 'jquery2', 'https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js',array('jquery1'),false, true ); ``` 【変更後】 ``` // wp_enqueue_script( 'jquery1', 'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js',array(),false, true ); wp_enqueue_script( 'jquery2', 'https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js',array(''),false, true ); ```