ワードプレスに自作の「絞り込み検索」機能を追加しようと思っています。
■できていること
以下のサイトを参考に「カテゴリー」「タグ」と「カスタムタクソノミーを“1つ”」を作り、
3つの分類から絞り込み検索は出来ました。
参考サイト:https://webfun-style.com/wordpress-custom-search/
■やりたいこと
さらにここにカスタムタクソノミーを1つ追加して「カテゴリー」「タグ」と「カスタムタクソノミー“2つ”」の
4つの分類から絞り込み検索をしたいです。
画面の表示やチェックボックスの表示などは出来ているのですが、検索結果が正しく検索できていないようなのです。
以下がcustom-search.phpというコードです。
<!-- 1. 検索条件の取得と変数の設定 --> <?php $args = array( 'post_type' => 'post', 'post_status' => 'publish', 'posts_per_page' => -1, 'orderby' => 'date', 'order' => 'DESC' ); if (!empty($_POST['search_category'])) { foreach ($_POST['search_category'] as $value) { $search_category[] = htmlspecialchars($value, ENT_QUOTES); } $args += array('category__in' => $search_category); } if (!empty($_POST['search_tag'])) { foreach ($_POST['search_tag'] as $value) { $search_tag[] = htmlspecialchars($value, ENT_QUOTES); } $args += array('tag__in' => $search_tag); } if (!empty($_POST['search_color'])) { foreach ($_POST['search_color'] as $value) { $search_color[] = htmlspecialchars($value, ENT_QUOTES); } $tax_query_args[] = array( 'taxonomy' => 'color', 'terms' => $search_color, 'field' => 'slug', 'operator' => 'IN' ); } if (!empty($_POST['search_image_texture'])) { foreach ($_POST['search_image_texture'] as $value) { $search_image_texture[] = htmlspecialchars($value, ENT_QUOTES); } $tax_query_args[] = array( 'taxonomy' => 'image_texture', 'terms' => $search_image_texture, 'field' => 'slug', 'operator' => 'IN' ); } if (!empty($_POST['search_image_texture']) || !empty($_POST['search_image_texture'])) { $args += array('tax_query' => array($tax_query_args)); } ?> <!-- (追記1)Ajaxの結果を表示する領域を設定 --> <div id="search-result"> <div class="search"> <?php if (!empty($_POST['search'])) : ?> <?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><?php the_title(); ?></div> </a> </div> <?php endwhile; wp_reset_postdata(); ?> </div> <?php else : ?> <p>該当する物件はありませんでした。</p> <?php endif; ?> <?php endif; ?> <form method="post" action="<?php echo esc_url(home_url() . $_SERVER['REQUEST_URI']); ?>"> <div class="checkbox"> <section class="typeA"> <!-- カテゴリーを取得 --> <input id="TAB-A01" type="radio" name="TAB-A" checked="checked"> <label class="tabLabel" for="TAB-A01">業種</label> <div class="content"> <ul class="conditions"> <?php $categories = get_categories(array('hide_empty' => false)); foreach ($categories as $category) : $checked = ""; if (in_array($category->term_id, $search_category)) $checked = " checked"; ?> <li> <label> <input type="checkbox" name="search_category[]" value="<?php echo esc_attr($category->term_id); ?>" <?php echo $checked; ?>> <?php echo esc_html($category->name); ?> </label> </li> <?php endforeach; ?> </ul> </div> <!-- タグを取得 --> <input id="TAB-A02" type="radio" name="TAB-A"> <label class="tabLabel" for="TAB-A02">形・アルファベット</label> <div class="content"> <ul class="conditions"> <?php $tags = get_tags(array('hide_empty' => false)); foreach ($tags as $tag) : $checked = ""; if (in_array($tag->term_id, $search_tag)) $checked = " checked"; ?> <li> <label> <input type="checkbox" name="search_tag[]" value="<?php echo esc_attr($tag->term_id); ?>" <?php echo $checked; ?>> <?php echo esc_html($tag->name); ?> </label> </li> <?php endforeach; ?> </ul> </div> <!-- アルファベット --> <input id="TAB-A03" type="radio" name="TAB-A"> <label class="tabLabel" for="TAB-A03">カラー</label> <div class="content"> <ul class="conditions"> <?php $colors = get_terms('color', array('hide_empty' => false)); foreach ($colors as $color) : $checked = ""; if (in_array($color->slug, $search_color)) $checked = " checked"; ?> <li> <label> <input type="checkbox" name="search_color[]" value="<?php echo esc_attr($color->slug); ?>" <?php echo $checked; ?>> <?php echo esc_html($color->name); ?> </label> </li> <?php endforeach; ?> </ul> </div> <!-- 色 --> <input id="TAB-A04" type="radio" name="TAB-A"> <label class="tabLabel" for="TAB-A04">イメージ・質感</label> <div class="content"> <ul class="conditions"> <?php $image_textures = get_terms('image_texture', array('hide_empty' => false, 'orderby' => 'slug')); foreach ($image_textures as $image_texture) : $checked = ""; if (in_array($image_texture->slug, $image_texture)) $checked = " checked"; ?> <li> <label> <input type="checkbox" name="image_texture[]" value="<?php echo esc_attr($image_texture->slug); ?>" <?php echo $checked; ?>> <?php echo esc_html($image_texture->name); ?> </label> </li> <?php endforeach; ?> </ul> </div> </section> </div> <input type="submit" value="検索" class="submit-button"> <input type="hidden" name="search" value="1"> <!-- (追記2)nonceのhiddenタグを生成 --> <?php wp_nonce_field('my-ajax-nonce', 'nonce'); ?> </form> </div> <!-- (追記3)Ajaxで使う変数の設定とスクリプトを読み込み --> <script> var ajaxurl = '<?php echo esc_url(admin_url('admin-ajax.php')); ?>'; </script> <script src="<?php echo esc_url(get_stylesheet_directory_uri() . '/js/main.js'); ?>"></script> </div>
main.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: 'POST', url: ajaxurl, data: formData, processData: false, contentType: false, 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(); }); });
functions.phpにショートコードを使うコードを追加してしようしています。
私、プログラミングに関してはC#でアプリ開発などは行ったことはあるのですが、WEB系は初心者なためPHPがよくわかりません。
多分、<!-- 1. 検索条件の取得と変数の設定 -->の中で、取得した情報の中身で論理演算で比較しているのですが、
どごで何を取得して中身がなんのデータなのかがよくわかっていません。
どなたかご教授をお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/12/27 01:49