Amazonで商品を見る セール会場へ

SWELL│自作の絞り込み検索カスタマイズ

SWELLで、カテゴリー・タグ・カスタムタクソノミーを組み合わせた絞り込み検索を自作する方法です。条件に一致する公開記事を6件ずつ表示し、ページ送りと条件解除ができます。キーワード欄も同じフォームへ追加できます。

2026年9月30日に掲載コードを更新しました。旧版の全件取得と固定IDを使う構成を見直し、複数フォームをそれぞれ独立して操作する方式に変更しています。旧PHPへ追記せず、旧版を停止して置き換えてください。

目次

著者

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

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

動く見本:カテゴリー・タグ・キーワードを組み合わせる

下の見本はWAZAの公開記事を検索します。カテゴリーとタグを選ぶと結果を更新します。キーワードは入力後に「検索」またはEnterで確定します。「条件を解除」で選択と入力をまとめて戻せます。

カテゴリー
タグ

キーワードだけのフォームも配置できる

こちらはキーワードだけの見本です。上の検索とは独立して動きます。キーワードはWordPress標準検索の対象であるタイトル・抜粋・本文を検索し、カテゴリー名やカスタムフィールドの全文検索には対応していません。

条件の組み合わせ:同じ分類内はOR、分類をまたぐとAND

タクソノミーはカテゴリーやタグなどの「分類の種類」、タームは「ベリー類」「赤」など選択肢の名前です。同じ分類で複数選ぶと、どれかに該当する記事を表示します(OR)。カテゴリーとタグのように分類をまたぐと、両方の条件を満たす記事に絞ります(AND)。

例えば、カテゴリーで「ベリー類」、タグで「赤」を選ぶと、ベリー類に属し、かつ赤のタグが付いた記事が対象です。2026年9月30日の旧デモでは、ラズベリーとイチゴの2件が表示されました。画像を押すと拡大できます。

ベリー類と赤を選択し、ラズベリーとイチゴの2件を表示した検索画面。
旧デモを撮影(条件の組み合わせを説明する例):カテゴリー「ベリー類」AND タグ「赤」。2026年9月30日確認。

同じタグ欄で「赤」と「黄色」を選ぶ場合は「赤または黄色」です。「赤と黄色の両方が付いた記事」にはなりません。季節も選ぶと、カテゴリー・タグに加えて季節の条件も満たす記事が対象になります。

0件になったら、選んだ条件を1つずつ外す

旧デモで「柑橘類」と「赤」を組み合わせると、該当する投稿はありませんと表示されました。これは、その組み合わせの記事がない状態です。チェック済みの「赤」をもう一度押して外すと、柑橘類だけの検索に戻せます。すべてのチェックを外すと、条件なしの一覧に戻ります。

柑橘類と赤を選択し、検索結果が0件になった画面。
0件の表示例。選択済みの条件を外して、検索範囲を広げます。

導入前に確認する仕様

通常投稿のうち、公開済み・パスワードなしの記事を検索します。カスタム投稿・会員情報・非公開記事の検索用ではありません。独自タクソノミーは「公開」で、通常投稿へ関連付けてあるものを使います。ショートコードの genre は登録済みの分類スラッグへ置き換えてください。

同じ分類内はOR、異なる分類とキーワードの間はANDです。階層のあるカテゴリーでは子カテゴリーも対象に含まれます。表示用の分類は最大8種類、1分類の選択肢は100件までです。101件以上ある分類は選択肢を省略して案内を表示するため、タグが非常に多いサイトにはそのまま導入できません。ページ番号の上限は1000です。

JavaScript無効時は最初の6件だけを表示します。検索条件のURL保存や、ブラウザーの戻る操作による条件復元には対応していません。検索エンジンへ見せる分類別の一覧には、通常のカテゴリーアーカイブも使ってください。取得件数を絞ってもアクセス集中対策が完了するわけではないため、本番では応答時間を確認します。

設置手順と旧版からの移行

まず検証用サイトで作業します。旧 taxonomy_search と keyword_search のPHP、および検索用に追加した旧CSSを保存してから停止・削除します。旧PHPを止めた後に、新PHPを1か所だけ登録し、CSSを追加します。

Code SnippetsではPHPスニペットとして登録し、「すべての場所で実行」を選びます。Ajaxの呼び出しにも検索処理が必要です。子テーマのfunctions.phpへ登録する方法との併用は避けてください。今回のコードはjQueryを使用しないため、検索のためにSWELLのjQuery設定を変更する必要はありません。

本文のショートコードブロックへ、用途に応じて次のいずれかを入力します。カテゴリーのみは [taxonomy_search taxonomies="category"]、カテゴリーとタグは [taxonomy_search taxonomies="category,post_tag"]、キーワードも加える場合は [taxonomy_search taxonomies="category,post_tag" keyword="1"] です。

独自分類を含める例は [taxonomy_search taxonomies="category,post_tag,genre"]、キーワードのみは [keyword_search] です。複数フォームは条件・結果を独立して表示します。条件をサイドバー、結果を本文へ分けたい場合は別配置型の検索を使ってください。

0件・エラー・表示されない場合の確認

0件なら「条件を解除」で検索範囲を戻し、公開状態・パスワード設定・分類の割り当てを確認します。「検索設定を確認してください」と出る場合は、分類のスラッグ、公開設定、通常投稿への関連付けを確認してください。

通信失敗時は以前の結果を残し、更新できなかったことを表示します。「検索」で再試行し、解消しなければ開発者ツールで admin-ajax.php の応答を確認します。403はセキュリティ設定、500はPHPエラーログを調べます。CSSやコードの変更が見えない場合はページキャッシュを削除してください。

導入後は、条件変更で1ページ目に戻ること、次・前のページ送り、0件、条件解除、キーボード操作、スマートフォン表示を確認します。戻すときは、新しいショートコード・CSS・PHPを外し、保存しておいた旧構成へ戻します。

実装コード:PHPとCSS

以下は記事内の見本で使用するPHPとCSSです。PHPは開始タグなしでCode Snippetsへ、CSSは追加CSSへ登録します。旧版のカード表示関数やキーワード検索用PHPを別途追加する必要はありません。

この記事だけ読みたい方は単品購入、ほかの有料記事も読みたい方は購読プランをご確認ください。

購読対象の記事・料金は、下のプラン案内で確認できます。

役に立った記事を、ブログやSNSで紹介しませんか?

紹介制度の対象記事・購読プランを購入した方は、codocで専用リンクと報酬条件を確認できます。

専用リンク経由で購入されると、設定された紹介報酬が発生します。

購読プランの紹介報酬は初回課金のみが対象です。

codocで紹介リンク・報酬条件を確認する

紹介時は、広告・PRであることが読者に分かるように明記してください。

  • URLをコピーしました!

実装を任せたい方へ

SWELLのカスタマイズ代行

記事のコードをそのまま使うのが不安な場合や、サイトに合わせた調整が必要な場合は当社が実装します。1時間 ¥8,000〜(税込)。テーマ更新に強い書き方で納品します。

WAZAの有料記事のサブスクリプションも開始しました。

サービス

Service

WordPressサイトのカスタマイズのサービスに関心がありましたら、ぜひ詳細をご覧ください。

目次