質問編集履歴

文章修正と情報追記

2021/11/09 16:55

投稿

mochitapi

スコア0

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -34,9 +34,25 @@
+流れとしては、
+１、custom-search.phpで記事表示と検索
+２、function.phpでajaxの読み込みとワードプレス用のショートコード[search]の作成
+３、search.jsでajaxのプログラム
+４、固定ページで全てを表示
+このような流れです。
 該当ソースコードも貼りますので、
-有識者の方がいらっしゃれば何か助言をくださいませ。
+有識者の方がいらっしゃれば何か助言をくださいませんか？
@@ -44,7 +60,9 @@
+参考ソースコードは下記です。
+https://webfun-style.com/wordpress-custom-search/
@@ -338,6 +356,48 @@
 ```
+// ショートコードで絞り込み検索を設置する関数
+function shortcode_search() {
+  ob_start();
+  get_template_part('custom-search');
+  return ob_get_clean();
+}
+add_shortcode('search', 'shortcode_search');
+// ajax読み込み
+function my_enqueue() {
+  // 特定のページのみで読み込む
+  if ( is_page( 'dounyuuzirei' ) ) {
+    // Ajaxの処理を書いたjsの読み込み
+    wp_enqueue_script( 'ajax-script', get_stylesheet_directory_uri().'/search.js', array('jquery'), null, true );
+    // 「ad_url.ajax_url」のようにしてURLを指定できるようになる
+    wp_localize_script( 'ajax-script', 'ad_url',array( 'ajax_url' => admin_url( 'admin-ajax.php') ) );
+  }
+}
+add_action( 'wp_enqueue_scripts', 'my_enqueue' );
+add_action( 'wp_enqueue_scripts', 'my_enqueue' );
 // Ajaxで検索結果を表示する関数
 function custom_search() {
@@ -374,27 +434,69 @@
 ```
-jQuery(document).ready(function($) {
+jQuery(function($){
+    function customSearch(){
+        // 1. フォームのデータを生成
+        var form = $('#search-result form').get()[0];
+        var formData = new FormData(form);
+        formData.append('action', 'custom_search');
+        // 2. Ajaxを行う
-  $.ajax({
+        $.ajax({
-      type: "POST",
+          type: "GET",
-      url: ad_url.ajax_url,
+          url: ad_url.ajax_url,
-      data: { 'action' : 'my_action' }  // 「wp_ajax_＊」の「*」がaction名となる
+          data: formData,
-    }).done(function(data){
+          processData: false,
-      console.log(data);
+          contentType: false,
-      console.log("done...");
-    }).fail(function(XMLHttpRequest, textStatus, error){
+			error: function(XMLHttpRequest, textStatus, errorThrown) {
+　　	  alert("ロード失敗");
+　　	console.log("XMLHttpRequest : " + XMLHttpRequest.status);		//HTTPリクエストのステータス取得
+　　	console.log("textStatus     : " + textStatus);					//タイムアウト、パースエラー等のエラー情報
+　　	console.log("errorThrown    : " + errorThrown.message);			//例外情報の取得
+        },
+          success: function(data){
+            $('#search-result').prop('outerHTML', data);
+            $('.submit-button').attr('type', 'button');
+          }
+        });
+        return false;
+    };
+    // 3. クリックイベントの設定
+    $('.submit-button').attr('type', 'button');
+    $(document).on('click', '.submit-button', function(){
-          console.log(error);
+        customSearch();
-          console.log(XMLHttpRequest.responseText);
     });
@@ -402,76 +504,6 @@
-jQuery(function($){
-    function customSearch(){
-        // 1. フォームのデータを生成
-        var form = $('#search-result form').get()[0];
-        var formData = new FormData(form);
-        formData.append('action', 'custom_search');
-        // 2. Ajaxを行う
-        $.ajax({
-          type: "GET",
-          url: ad_url.ajax_url,
-          data: formData,
-          processData: false,
-          contentType: false,
-			error: function(XMLHttpRequest, textStatus, errorThrown) {
-　　	  alert("ロード失敗");
-　　	console.log("XMLHttpRequest : " + XMLHttpRequest.status);		//HTTPリクエストのステータス取得
-　　	console.log("textStatus     : " + textStatus);					//タイムアウト、パースエラー等のエラー情報
-　　	console.log("errorThrown    : " + errorThrown.message);			//例外情報の取得
-        },
-          success: function(data){
-            $('#search-result').prop('outerHTML', data);
-            $('.submit-button').attr('type', 'button');
-          }
-        });
-        return false;
-    };
-    // 3. クリックイベントの設定
-    $('.submit-button').attr('type', 'button');
-    $(document).on('click', '.submit-button', function(){
-        customSearch();
-    });
-});
 ```
@@ -480,7 +512,11 @@
+ajaxの書き方について検索
-ここに問題に対して試したことを記載してください。
+400エラーが起こる原因を調査し、
+色々試したが、原因解決に至らず