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

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

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

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

PHP

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

解決済

ワードプレスに自作の絞り込み検索機能を付けたい

kakeshi
kakeshi

総合スコア18

WordPress

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

PHP

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

1回答

0評価

0クリップ

419閲覧

投稿2021/12/11 03:23

ワードプレスに自作の「絞り込み検索」機能を追加しようと思っています。

■できていること
以下のサイトを参考に「カテゴリー」「タグ」と「カスタムタクソノミーを“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. 検索条件の取得と変数の設定 -->の中で、取得した情報の中身で論理演算で比較しているのですが、
どごで何を取得して中身がなんのデータなのかがよくわかっていません。

どなたかご教授をお願いいたします。

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

WordPress

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

PHP

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