WordPress│自作の絞り込み検索の作成方法

カテゴリー・タグ・独自分類で記事を絞り込むときは、必要な条件と結果の表示場所を先に決めます。このページでは検索方式の選び方と、結果カードへ分類名や抜粋を表示する方法を説明します。検索フォームを設置する手順は、次の表から条件に合う記事を参照してください。

著者

motoki

WEB制作をしているデジタルノマド
WordPressのカスタマイズが好きで、色々と自作しています。

WordPressのカスタマイズに困ったらご相談ください！

MOTOKI合同会社

カスタマイズの依頼・相談

目的に合う絞り込み検索を選ぶ

「絞り込み」は条件に合う記事を選ぶ処理、「並べ替え（ソート）」は表示順を変える処理です。このページで扱うのはカテゴリーやタグによる絞り込みです。検証用サイトでバックアップを取り、必要な条件とページ送りを確認してから設置します。

検索に使う分類と表示を整理する

切り替え前に、現在の入力名、選べる分類、同時選択したときの期待結果を控えます。同じ分類を2つ選ぶケースと、異なる分類を組み合わせるケースで期待する記事IDを決め、新しい検索でも一致することを確認してください。

検索を表示するページとPHPを登録する場所を控えます。検証用サイトで表示とページ送りを確認し、戻す場合は保存しておいた本文とPHPを一組として復元します。分類や投稿を削除する必要はありません。

WordPressの絞り込み検索のサンプル

以下は旧構成のデモです。2026年10月21日の取得時にはPHP警告が本文に表示されており、正常に動作する見本としては利用できません。検索方式を選ぶ場合は、冒頭の比較表から現在の設置手順を参照してください。

カテゴリーとタグを使ったテンプレート例です。検索フォームを新たに設置する場合は、冒頭の表から必要な条件に合う手順へ進んでください。

WordPressの絞り込み検索の作り方

custom-search.phpを使う場合は、原本を保存し、子テーマ側の配置とテンプレートの呼び出し先を確認してください。リンク先のテンプレートはposts_per_page=-1で全件を取得し、追加読み込みJSから渡すoffsetと件数をクエリへ反映しません。

隔離したWordPressで5件の検証投稿を使うと、開始位置0と4の要求が同じ5件を返しました。

ページ送りが必要な場合は、冒頭の「複数条件の絞り込み検索」の設置手順を参照してください。

親テーマのファイルを直接上書きすると、テーマ更新で変更が失われることがあります。

以下のGistは旧構成の保守資料です。全件取得、入力の型確認、パスワード保護記事の除外、固定ID、入力欄を隠すCSSなどに見直しが必要なため、新規サイトへ一式をそのまま設置しないでください。新規設置は冒頭の比較表から選び、既存構成の保守ではPHP・CSS・JSを一組で保存します。

[[search]]はリンク先のテンプレートを呼び出すPHPで登録するショートコード名です。検索フォームの設置記事とは登録名が異なるため、使うPHPとページ側の記述を対応させてください。

参考

うぇぶファン

【徹底解説】WordPressで絞り込み検索を作る方法 | うぇぶファン ページ数の多いサイトでは、絞り込み検索を設置することで使い勝手が向上する可能性があります。この記事では、カスタム投稿タイプやAjaxを使い、WordPressで本格的な絞り…

絞り込みの項目を増やしたい場合

新しい項目を一つ追加してみます｡そのやり方の紹介です｡

既存サイトでタクソノミーを追加する例では、Custom Post Type UIなどの登録機能を使います。すでに同じタクソノミーが登録されていれば、重複して登録しないでください。

次に編集画面からタクソノミーの追加と編集を選択して､タクソノミーを追加します｡

新しいタクソノミーはcraftとします｡ラベル名は職業別としています｡

投稿タイプは投稿にして普通の記事に新しいタクソノミーを追加することにします｡

オプションはクイック編集をONにしておくと､タグ付けが便利になるのでつけておきます｡

投稿から職業別のタグを作成します｡（例デザイナー､ブロガー）

投稿一覧からクイック編集でタグ付けします｡

最後にコードを追記していきます｡（CSSはさきほどの状態から変化がないので流用します｡）

以上で職業別の項目が追加されました｡

旧デモで表示される独自分類は販売店で、この例の職業別とは異なります。職業別の条件は検証用サイトに用意し、割り当てた投稿が条件どおりに表示されることを確認してください。

ボタンの並び順を変更したい場合

Custom Taxonomy Orderというプラグインで、タグやカテゴリー、カスタムタクソノミーを並び替えてあげましょう。

手動で並び替える設定を選んで保存し、分類の順番を調整します。設定名は利用中のプラグインの画面で確認してください。

直感的にタクソノミーの順番の並び替えができます｡

動的に絞り込み検索を生成したくない場合

ボタンにそれぞれ違う画像を入れたかったので、個別にばらしました。

下記のようなコードで、チェックボックスには個別のIDを振ってあげましょう。

複数のカスタムタクソノミーがある場合の絞り込み方法

Custom Post Type UIで複数のカスタムタクソノミーがある場合の、同タクソミーの複数選択による絞り込みの挙動がおかしかったので、下記の様に記述を修正しました。

複数分類のクエリ資料

結果の表示にタグや抜粋、カスタムタクソノミーを入れる

結果のカードに情報を参照すると独自のカードが作成できます。

<?php
$areas = get_the_terms(get_the_ID(), "area");
if (!is_wp_error($areas) && !empty($areas)) {
    echo esc_html($areas[0]->name);
}

複数の分類名を表示する場合はforeachで各項目を出力します。

<?php
  $terms = get_the_terms( $post->ID, 'course' );
  if ($terms && ! is_wp_error($terms)): ?>
<?php foreach($terms as $term): ?>
<?php echo "<span>", esc_html($term->name) ,"</span>";?>
<?php endforeach; ?>
<?php endif; ?>

抜粋は下記。

<div class="label_text"><?php the_excerpt(); ?></div>

<a href="<?php echo esc_url(get_permalink()); ?>">
  <div class="article">
    <div class="label_area">
      <?php
      $areas = get_the_terms(get_the_ID(), 'area');
      if (!is_wp_error($areas) && !empty($areas)) {
          echo esc_html($areas[0]->name);
      }
      ?>
    </div>
    <?php the_post_thumbnail('medium'); ?>
    <div class="label_name"><?php echo esc_html(get_the_title()); ?></div>
    <div class="label_course">
      <?php
      $courses = get_the_terms(get_the_ID(), 'course');
      if (!is_wp_error($courses) && !empty($courses)) {
          foreach ($courses as $course) {
              echo '<span>' . esc_html($course->name) . '</span>';
          }
      }
      ?>
    </div>
    <div class="label_text"><?php echo esc_html(wp_strip_all_tags(get_the_excerpt())); ?></div>
  </div>
</a>

最初からチェックを付けたい場合

下記のような感じでJavascriptで特定のIDのチェックボックスにチェックをいれる。

下のjQueryはチェック状態だけを設定します。検索結果も更新したい場合は、設置先の検索処理に合わせた送信処理が別に必要です。

jQuery(function(){
	jQuery('#check_6').prop("checked", true);
});

結果カードの分類と初期チェックを別々に確認する

結果カードのPHPは、検索結果を一件ずつ表示するループ内に配置します。

get_the_ID()が現在表示中のカードの投稿IDを参照する状態で、areaとcourseをその投稿から取得する構成です。

地域は取得した最初の一つ、講座は取得した各項目をspanで表示します。

地域を複数登録しても全地域を並べるコードではないため、複数の地域を表示したい場合は表示方法の設計が必要です。

隔離環境では、通常投稿に「地域 & 案内」と二つの講座「基礎」「応用 & 案内」が表示され、分類なしの投稿では分類ラベルだけが空になりました。

どちらのカードにも記事のタイトルとリンクが残り、通常投稿のカードにはEnterで移動できました。

初期チェックのjQueryは、対象の入力要素が実際にid=check_6を持ち、jQueryとそのコードが読み込まれる画面で使用します。

実画面ではcheck_6だけが初期選択され、Spaceで解除し、別の項目もSpaceで選択できました。

このコードはチェック状態を設定するだけで、検索の自動送信や他の条件との組み合わせを実装するものではありません。

今回確認したのは結果カードの部分出力とチェック状態です。

リンク先の独自分類クエリを使った部分検証では、同じ分類の複数選択はOR、異なる分類の組み合わせはANDになりました。子テーマに配置したカテゴリー・タグ用テンプレートでも両条件に一致する投稿を取得できました。すべての分類条件、AJAX操作、設置先テーマの統合表示は別に検証が必要です。

SWELL向けに自作の絞り込み検索を設置したい場合は、冒頭の比較表から対応する記事へ進んでください。紹介先もPHPやCSSを追加するカスタマイズであり、SWELL標準機能の設定だけで実現する手順ではありません。

初期選択が不要なら追加したjQueryを外し、カード表示を戻す場合は保存したテンプレートの原本へ戻します。

WordPressの絞り込み検索の作成方法

本記事では｢【WordPress】絞り込み検索の作成方法｣について書きました｡

下記の旧デモには並べ替えなどの追加機能もありますが、前述のPHP警告が出ています。動作確認済みの完成例として使わず、旧構成の参考として扱ってください。

この記事で紹介しているコードは、GitHubのMOTOKI-LLC/WAZA-codeにもまとめています。