カスタムフィールド使って記事の絞り込みについて

Question

カスタムフィールド使って記事の絞り込みについて

【やりたいこと】
・カスタムフィールドでカテゴリーページに任意のタグを設定
・カテゴリーページの記事一覧でタグ（チェックボックス形式）による絞り込み機能の実装（非同期）

【やったこと】
以下のサイトを参考に、Ajaxでの記事の絞り込みを行いました。

リンク内容

上記記事と違うのは、タグすべてを表示させるのではなく、
管理画面でカスタムフィールドによって設定したタグのみ出したいというところです。

【発生している問題】
カスタムフィールドで設定した絞り込み用のタグ（チェックボックス形式）が正しく表示されません。
正確に言うと、最初は正しく表示されているのですが、
絞り込みのチェックボックスをクリックしてAjax走ると、なぜかカスタムフィールドで設定していないすべてのタグがチェックボックスとして表示されてしまいます。

【問題部分のコード】
参考サイト見て見様見真似です。

<?php
 $paged = get_query_var('paged') ? get_query_var('paged') : 1;
  $args = array(
    'paged' => $paged,
    'post_type' => 'post',
    'post_status' => 'publish',
    'posts_per_page' => 4,
    'orderby' => 'date',
    'order' => 'DESC'
  );

  if(!empty($_POST['search_tag'])) {
    foreach($_POST['search_tag'] as $value) {
      $search_tag[] = htmlspecialchars($value, ENT_QUOTES);
    }
    $args += array('tag__in' => $search_tag);
  }

?>
<div id="search-result">
<form id="category-tags-form" method="get" action="<?php echo esc_url(get_the_permalink()); ?>">

<?php

   $category_id = get_queried_object_id();
   $post_id = 'category_'.$category_id;
   $category_tags = get_field('category_popular_tags', $post_id );

  $terms = get_terms( array(
   'taxonomy' => 'post_tag',
   'orderby' => 'post__in',
   'include' =>  $category_tags,
   'order' => 'DESC',
 ));


?>

<?php if($terms): ?>
   <?php foreach((array)$terms as $value):
    $checked = "";
    if(in_array($value->term_id, $search_tag)) $checked = " checked";
    ?>
   <label><input type="checkbox" name="search_tag[]" value="<?php echo esc_attr($value->term_id); ?>"<?php echo $checked; ?>><?php echo $value->name; ?></label>
   <?php endforeach; ?>
<?php endif; ?>

<?php wp_nonce_field('my-ajax-nonce', 'nonce'); ?>

</form>                                         
<?php
  $the_query = new WP_Query($args);
  if($the_query->have_posts()) :
?>  
<div class="result archive-list">
<?php
  while($the_query->have_posts()) :
    $the_query->the_post();
?>      
<?php get_template_part('template-parts/archive-article'); ?>
<?php endwhile; wp_reset_postdata(); ?>
</div>
<?php else : ?>
  <p>該当する記事がまだ存在していません。</p>
<?php endif; ?>

</div>

    function customSearch(){
        // 1. フォームのデータを生成
        var form = $('#category-tags-form').get()[0];
        var formData = new FormData(form);
        formData.append('action', 'custom_search');

        // 2. Ajaxを行う
        $.ajax({
          type: 'POST',
          url: ajaxurl,
          data: formData,
          processData: false,
          contentType: false,
          success: function(data){
            $('#search-result').prop('outerHTML', data);
          }
        });
        return false;
    };

  $(document).on('click', 'input[name="search_tag[]"]', function(){
    customSearch();
});

何かおかしなところあれば教えていただきたいです。。
よろしくお願いいたします。

Answer 1

'include' => array(1,2,3),で動くというのなら$category_tags の形式がおかしい可能性があります。

$category_tags = get_field('category_popular_tags', $post_id );

のすぐ下に
var_dump($category_tags );を追加してみてください。
想定通りの配列になっていますか？
(ACFから取得しているっぽいのでフィールドの中身は単純配列ではなくlabelやvalueが含まれた連想配列になって要るっぽい気がするのですが）

Comments

[IGE]

ご回答いただけて嬉しいです。。ありがとうございます！
はい。ACFから取得しています。
var_dump($category_tags );を入れましたら、
以下のような感じに出ました。
array(5) { [0]=> int(1) [1]=> int(2) [2]=> int(3) [3]=> int(4) [4]=> int(5) }

ただ、問題の一回でもチェックボックスをクリックすればNULLになります。。

[gogoweb_ikeda]

参考サイトも確認してざっと見た感じではsearch-resultの部分をAJAXで別のテンプレートを使って上書きしているのですよね？そのテンプレート部分は提示できますか？
そのテンプレートでは
$category_id $post_id $category_tags は正常な値が入っているのでしょうか？
AJAX先で読み込まれるテンプレートはカテゴリーページではないのでget_queried_object_idでカテゴリーIDが取得できない気がします。
そのあたりは現在のカテゴリーIDを引き渡す形になっていますか？

Answer 2

phpとjsがごっちゃになって問題の切り分けがしづらいですね
phpがhtmlを返すならとりあえずスタティックなhtmlを呼ぶようにして
js+外部htmlで挙動を確認するところからです

Comments

[IGE]

ご回答ありがとうございます！
そうなのですね。。どのように挙動を確認していけば良いのかあまりわかっておらず、、
ちなみにですが、
'include' => $category_tags,
の部分を以下のように
'include' => array(1,2,3),
直接書くとちゃんと動きます。。
ちゃんと理解して書いていけというのは分かるのですが、、まずは実装したいと言う事情があり、、お力・ご助言いただけると嬉しいです。。
よろしくお願いいたします。

[yambejp]

たんにphpが正しいhtmlを吐いていないならそれを修正することです
DBの部分は書かれていないのでちょっと判断できません