質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

受付中

ajaxを使ってワードプレスの絞り込み検索をすると400エラーが返ってくる

mochitapi
mochitapi

総合スコア0

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

1回答

0評価

0クリップ

551閲覧

投稿2021/11/09 16:36

編集2022/01/12 10:55

前提・実現したいこと

ワードプレスで絞り検索の機能を実装中です。

イメージとしては、カスタム投稿のタグとカテゴリを押すと、
それに紐づいた投稿が表示されるというものです。

しかし、ajaxで部分的に検索結果を表示しようとすると、
400エラーが返ってきてしまい、
上手く表示がされません。

ここ3日ほど、
色々と調べて見ましたが、
原因は分からずじまいです。

ページャーを使っているので、
ajaxの指定は「get」を使っています。

流れとしては、
1、custom-search.phpで記事表示と検索
2、function.phpでajaxの読み込みとワードプレス用のショートコード[search]の作成
3、search.jsでajaxのプログラム
4、固定ページで全てを表示

このような流れです。

該当ソースコードも貼りますので、
有識者の方がいらっしゃれば何か助言をくださいませんか?

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

参考ソースコードは下記です。
https://webfun-style.com/wordpress-custom-search/

発生している問題・エラーメッセージ

ajaxのエラーメッセージは下記となります。 XMLHttpRequest : 400 textStatus : error errorThrown : undefined

該当のソースコード(custom-search.php)

<!-- 1. 検索条件の取得と変数の設定 --> <?php // ページ番号を取得 $paged = get_query_var('paged') ? get_query_var('paged') : 1; $args = array( 'paged' => $paged, // ページ番号を設定 'post_type' => 'case', 'post_status' => 'publish', 'posts_per_page' => 12, 'orderby' => 'menu_order' ); if(!empty($_POST['search_product'])) { foreach($_POST['search_product'] as $value) { $search_product[] = htmlspecialchars($value, ENT_QUOTES); } $tax_query_args[] = array( 'taxonomy' => 'product', 'terms' => $search_product, 'field' => 'slug', 'operator' => 'IN' ); } if(!empty($_GET['search_usesystem'])) { foreach($_GET['search_usesystem'] as $value) { $search_usesystem[] = htmlspecialchars($value, ENT_QUOTES); } $tax_query_args[] = array( 'taxonomy' => 'usesystem', 'terms' => $search_usesystem, 'field' => 'slug', 'operator' => 'IN' ); } if(!empty($_GET['search_product']) || !empty($_GET['search_usesystem'])) { $args += array('tax_query' => array($tax_query_args)); } ?> <!-- 2. 検索フォームの表示 --> <div id="search-result"> <div class="search"> <form method="get" action="<?php echo esc_url(get_the_permalink()); ?>"> <div class="checkbox"> <div class="condition-title">商材</div> <div class="condition"> <?php $products = get_terms('product', Array('hide_empty' => false)); foreach($products as $product): $checked = ""; if(in_array($product->slug, (array)$search_product)) $checked = " checked"; ?> <label> <input type="checkbox" name="search_product[]" value="<?php echo esc_attr($product->slug); ?>"<?php echo $checked; ?>> <?php echo esc_html($product->name); ?><span class="num"><?php echo "(" ?><?php echo esc_html($product->count); ?><?php echo ")" ?></span> </label> <?php endforeach; ?> </div> <div class="condition-title">使用システム</div> <div class="condition"> <?php $usesystemes = get_terms('usesystem', Array('hide_empty' => false)); foreach($usesystemes as $usesystem): $checked = ""; if(in_array($usesystem->slug, (array)$search_usesystem)) $checked = " checked"; ?> <label> <input type="checkbox" name="search_usesystem[]" value="<?php echo esc_attr($usesystem->slug); ?>"<?php echo $checked; ?>> <?php echo esc_html($usesystem->name ); ?><span class="num"><?php echo "(" ?><?php echo esc_html($usesystem->count); ?><?php echo ")" ?></span> </label> <?php endforeach; ?> </div> </div> <input type="submit" value="検索" class="submit-button"> <!-- (追記2)nonceのhiddenタグを生成 --> <?php wp_nonce_field('my-ajax-nonce', 'nonce'); ?> </form> <!-- 3. 検索結果の取得と表示 --> <?php $the_query = new WP_Query($args); if($the_query->have_posts()) : ?> <div class="result"> <?php while($the_query->have_posts()) : $the_query->the_post(); ?> <div class="article"> <a href="<?php the_permalink(); ?>">  <?php the_post_thumbnail('medium'); ?> <div class="art_cate"> <?php echo get_the_term_list($post->ID, 'product'); ?> <?php echo '|' ; ?> <?php echo get_the_term_list($post->ID,'usesystem'); ?> </div> <div class="art_title"><?php the_title(); ?></div> </a> </div> <?php endwhile; wp_reset_postdata(); ?> </div> <?php // ページャーを設置 echo paginate_links(array( 'total' => $the_query->max_num_pages, 'current' => $paged, 'type' => 'list', )); ?> <?php else : ?> <p>該当する事例はありませんでした。</p> <?php endif; ?> </div> </div>

該当のソースコード(function.php)

// ショートコードで絞り込み検索を設置する関数 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() { $nonce = $_REQUEST['nonce']; if(wp_verify_nonce($nonce, 'my-ajax-nonce')) { get_template_part('custom-search'); } die(); } // ログインしているユーザー向け関数 add_action( 'wp_ajax_custom_search', 'custom_search' ); // 非ログインユーザー用関数 add_action( 'wp_ajax_nopriv_custom_search', 'custom_search' );

該当のソースコード(search.js)

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(); }); });

試したこと

ajaxの書き方について検索
400エラーが起こる原因を調査し、
色々試したが、原因解決に至らず

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

m.ts10806

2021/11/09 21:20

ad_url には何が入ってるんでしょう。 GETならブラウザから直アクセスでも実行はできるのでJavaScript通さなくても確認できます。
mochitapi

2021/11/10 14:18

ご質問いただきありがとうございます! ad_urlには下記が入っています。 var ad_url = {"ajax_url":"https:\/\/サイトURL\/ワードプレスのインストールフォルダ\/wp-admin\/admin-ajax.php"}; 上記は、ワードプレスでajaxを使う方法が紹介されているサイトのやり方を、そのまま使用しています。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。