前提
https://100webdesign.jp/services/wordpress/wp_result/wp_result-22451/
こちらの記事を参考にしております。
実現したいこと
ajaxによる絞り込みを行いたい。
発生している問題・エラーメッセージ
フォーム送信→結果表示までは問題なくできましたが、
その後で絞り込みが上手くいきません。
チェックボックスをチェックすると全ての記事が表示されてしまいます。
また、チェック後にコンソールから確認するとcheckedがついていないようです。
エラーは特に出ておりません。
該当のソースコード
page-jobs.php
PHP
1<?php 2// カスタム投稿タイプ 3$post_type = 'jobs'; 4 5$jobs_skills_selected = array(); 6$jobs_skill = array(); 7$jobs_skill_terms = get_terms('jobs_cat', array('orderby' => 'term_order', 'order' => 'ASC')); 8$jobs_skills = $_GET['check_jobs'] ?? null; 9if ($jobs_skills) { 10 foreach ((array)$jobs_skills as $value) { 11 $jobs_skills_selected[] = htmlspecialchars($value); 12 $jobs_skill[] = htmlspecialchars($value); 13 } 14} else { 15 foreach ($jobs_skill_terms as $jobs_skill_term) { 16 $jobs_skill[] = $jobs_skill_term->slug; 17 } 18} 19?> 20<form method="get" action="<?php echo home_url('/'); ?>works/"> 21 <div> 22 <div> 23 <?php foreach ($jobs_skill_terms as $jobs_skill_term) { 24 echo '<label><input type="checkbox" name="check_jobs[]" value="' . $jobs_skill_term->slug . '" '; 25 if ($jobs_skills_selected) { //選択した項目はページ遷移後 checked 26 foreach ($jobs_skills_selected as $value) { 27 if ($value == $jobs_skill_term->slug) { 28 echo 'checked'; 29 } 30 } 31 } 32 echo '> ' . $jobs_skill_term->name . '</label>'; 33 } ?> 34 </div> 35 </div> 36</form> 37 38<div class="search-results-container"> 39 <div id="search-result"></div> 40</div>
ajax-search.php
PHP
1<?php 2$post_type = 'jobs'; 3 4$jobs_skills_selected = array(); 5$jobs_skill = array(); 6$jobs_skill_terms = get_terms('jobs_cat', array('orderby' => 'term_order', 'order' => 'ASC')); 7$jobs_skills = $_GET['check_jobs'] ?? null; 8if ($jobs_skills) { 9 foreach ((array)$jobs_skills as $value) { 10 $jobs_skills_selected[] = htmlspecialchars($value); 11 $jobs_skill[] = htmlspecialchars($value); 12 } 13} else { 14 foreach ($jobs_skill_terms as $jobs_skill_term) { 15 $jobs_skill[] = $jobs_skill_term->slug; 16 } 17} 18 19$the_query = new WP_Query(array( 20 'post_status' => 'publish', 21 'post_type' => $post_type, 22 'tax_query' => array( 23 'relation' => 'AND', 24 array( 25 'taxonomy' => 'jobs_cat', 26 'field' => 'slug', 27 'terms' => $jobs_skill, 28 ) 29 ), 30 'posts_per_page' => -1, 31 'orderby' => 'date', 32 'order' => 'DESC', 33)); 34?> 35<?php if ($the_query->have_posts()) : ?> 36 <?php while ($the_query->have_posts()) : $the_query->the_post(); ?> 37 38 <article class="jobs_list"> 39 <a href="<?php the_permalink(); ?>"> 40 <div class="post-thumbnail"> 41 <img src="<?php if (post_custom('jobs_main_image')) : ?><?php the_field('jobs_main_image'); ?><?php else : ?><?php echo get_template_directory_uri(); ?>/library/images/noimage.png<?php endif; ?>" alt=""> 42 </div> 43 <h2 class="post-title"><?php the_title(); ?></h2> 44 <p class="post-date"> 45 <?php 46 if ($terms = get_the_terms($post->ID, 'jobs_cat')) { 47 foreach ($terms as $term) { 48 $term_slug = $term->slug; 49 echo ('<span class="post-category '); 50 echo esc_html($term_slug); 51 echo ('">'); 52 echo esc_html($term->name); 53 echo ('</span>'); 54 } 55 } 56 ?> 57 </p> 58 </a> 59 </article> 60 <?php endwhile; ?> 61<?php else : ?> 62 <p>まだ投稿がありません。</p> 63<?php endif; ?> 64<?php wp_reset_postdata(); ?>
functions.php
PHP
1function blank_scripts_and_styles(){ 2 if (is_page('jobs')) { 3 //jobs-ajax 4 wp_enqueue_script('jobs-ajax', get_template_directory_uri() . '/library/js/jobs-ajax.js', array(), '', true); 5 } 6} 7add_action('wp_enqueue_scripts', 'blank_scripts_and_styles'); 8 9/* フォームの内容を取得してAjaxに送信するプログラムが記述されたJavascriptをheadタグにキュー */ 10add_action('wp_enqueue_scripts', function () { 11 $handle = 'jobs-ajax'; 12 $file = get_template_directory_uri() . '/library/js/' . $handle . '.js'; 13 wp_register_script($handle, $file, array('jquery'), '3.6.0', true); 14 15 $localize = [ 16 'ajax_url' => admin_url('admin-ajax.php'), 17 'action' => 'view_search_results', 18 'nonce' => wp_create_nonce('view_search_results') 19 ]; 20 wp_localize_script($handle, 'localize', $localize); 21 wp_enqueue_script($handle); 22}); 23 24 25/* Ajaxから取得したnonceを認証し、認証通過したらテンプレートを出力する */ 26function view_search_results() 27{ 28 $nonce = $_REQUEST['nonce']; 29 if (wp_verify_nonce($nonce, 'view_search_results')) { 30 get_template_part('template-parts/ajax-search'); 31 } 32 die(); 33} 34 35add_action('wp_ajax_view_search_results', 'view_search_results'); //第一引数は wp_ajax_{ファンクション名} にする 36add_action('wp_ajax_nopriv_view_search_results', 'view_search_results'); //第一引数は wp_ajax_nopriv_{ファンクション名} にする
JS
1$("input[name='check_jobs[]']").change(function () { 2 3 let check_jobs = []; 4 $("[name='check_jobs[]']:checked").each(function () { 5 check_jobs.push(this.value); 6 }); 7 $.ajax({ 8 type: 'GET', 9 url: localize.ajax_url, 10 data: { 11 'action': 'view_search_results', 12 'jobs_skill': check_jobs, 13 'nonce': localize.nonce 14 }, 15 success: function (response) { 16 $('#search-result').html(response); 17 } 18 }) 19 20 return false; 21});
試したこと
・パーマリンクの更新
・:checkedが付与されているか確認
・参考サイトのhtmlを使用してみましたが同じ結果に
※追記です
var_dump($jobs_skill);
を試したら全て取得されていました。
ajax自体は動いているようなのですが絞り込みが上手くいっていないです。
お忙しいところ恐縮ですがどうぞ何かしらのヒントを頂けましたら幸いです。

回答1件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。