個人でもできる！絞込検索機能の実装ガイド｜商用級の便利さを低コストで

July 14, 2025

「絞込検索は高い」は本当か？

絞込検索って、ちゃんと実装しようとすると本当に高いんです。
ざっくり言うと、10万円近くかかることもざらにあります。

たとえば──

絞込検索プラグイン：3〜5万円（しかもサブスクが多い）
一括アップロード機能：Pro版でないとまともに使えない
大量の投稿を管理・編集するためのツール：これも有料
さらに、検索対象の投稿数が多くなればなるほど、構造設計にも工数がかかる

実際に試してみると、「あれもこれも必要じゃん…」と後からどんどん出費がかさむ構造になっています。

それでも、個人ブログでやりたかった

ただ私は、「英単語のような構造的に整理しやすい情報なら、個人でもなんとかなるのでは？」と考えました。

結果的に、いくつかの工夫と割り切りを組み合わせて、
約7,000円未満でそれなりに快適な絞込検索を作ることができました。

EnglishEigo

Word List | EnglishEigo あなただけの英単語リストを、ユーザー登録なしで簡単に作成！英語学習を続けるうえで、最大の壁となるのが「英単語の暗記」。エビングハウスの忘却曲線をもとにした効率…

もちろん、制約はあります。でも、個人ブログレベルなら十分に実用的です。

この記事では、私が実際に導入した構成と費用の内訳、
そして「コストを抑える代わりにどこを割り切ったか」も含めて、具体的にご紹介します。

「高機能な検索＝高額なサブスク」ではない。
工夫すれば、個人でもここまでできる。

そんな事例のひとつとして、参考になれば幸いです。

Table of Contents

商用サイトでよくある構成とコスト感

まずは、一般的な「しっかりした絞込検索」を作る場合、どんな構成になっているのかを整理してみます。

項目	商用サイトでよく使われる構成	価格帯（概算）
絞込検索機能	FacetWP, Search & Filter Pro, JetSmartFiltersなど	¥30,000〜50,000
データ一括登録	WP All Import Pro, CSV Import Suiteなど	¥10,000〜20,000
ACF Pro（カスタムフィールド）	柔軟なフィールド作成が可能	¥7,000前後
投稿一括編集	Admin Columns Proなど	¥5,000〜10,000
検索結果のテンプレ調整	専用テンプレートやカスタムコーディング	外注すると数万円〜

合計：ざっと見積もって7〜10万円程度
本格的にやるなら、これくらいの投資は普通です。

今回私が実装した構成（コスト重視）

一方、私の構成は次のような「目的に絞って機能を取捨選択した」やり方です。

項目	使用ツール	費用
絞込検索	Search & Filter Pro	約 39ドル(約6,000円)（でも年契約）
カスタム投稿・分類	CPT UI（無料）	¥0
カスタムフィールド	ACF 無料版	¥0
一括登録	WP All Import 無料版	¥0（ACF連携は使わず工夫で代替）
一括編集	WordPress標準機能 + 表示件数を増やして対応	¥0
テーマ対応	SWELL使用（既に所持）	実質追加費用なし

ただし、Search & Filter Proはサブスク制のため、必要最低限の機能でよければ無料フィルタ系プラグインでも代用可能です。

工夫したところ、割り切ったところ

本格的に作ろうとすると当然「Pro版」「有料アドオン」に頼りたくなるのですが、今回はあえて無料ツールの範囲でどこまでできるか？を意識して構成しました。以下が、実際に運用しながら見つけた「工夫」と「割り切りポイント」です。

ACF Proは未使用

無料版のACFのみで完結しました。
本来なら「条件によって表示を変える」ような柔軟なレイアウト制御ができるのですが、そこは割り切って「固定項目の入力と絞込だけ」にフォーカス。

今のところ、無料版でも十分なフィールド構成が組めています。

WP All Importは無料版で運用

CSVファイルを整えて、フィールド名と値を1対1でマッピングする形式にすれば、無料版でもインポートは可能です。

ただし問題は「チェックボックス」。
無料版では複数選択のチェックボックスがうまく対応していません。

そこで私の場合は：

チェックボックスの項目を一旦「テキスト」としてインポート
インポート後に該当フィールドをACFのチェックボックス形式に手動で変更
複数選択したい場合は、1記事につき1項目だけインポートし、残りは手動で追加

……という力技で対応しました。多少の手間はあるけれど、費用ゼロで実現可能です。

一括編集は手動で対応

専用の有料プラグインもありますが、今回は使いませんでした。
代わりに、「投稿一覧の表示件数を最大100件」に増やして、カテゴリ変更やタグ付けなどをWordPress標準機能で行いました。

正直、数百記事レベルならこれでいけます。
「月に数回しか使わない一括編集のためにお金を払うか？」と考えたら、手動で十分。

検索結果テンプレは最小限のカスタマイズ

デザイン面も、「完璧なリスト表示」を目指すと泥沼化します。

私はSWELLのデフォルトテンプレートをベースに、CSSとPHPをほんの少し調整する程度で済ませました。
「パッと見てわかる」「モバイルでも崩れない」レベルをゴールにすれば、コストも時間も圧縮できます。

導入ステップ｜個人でもできた！絞込検索の作り方

ここでは、私が実際にやった絞込検索機能の導入手順を順を追って紹介します。
必要なのは、ちょっとした構造の理解と「工夫しながらやってみる」気持ちだけです。

ステップ①：データ構造を考える

まずは、「どんな情報を絞り込みたいか？」を整理します。
私の場合は英単語だったので、以下のような観点で分類しました：

品詞（noun, verb など）
意味の種類（emotion, action など）
接頭辞・語源
感情表現（positive / negative）
頻出度、難易度など

これは後から「カスタムフィールド」になるので、最初にざっくりでも属性の設計をしておくとスムーズです。

ステップ②：投稿タイプを作る（CPT UI）

次に、WordPressの通常の「投稿」や「固定ページ」とは別に、
「英単語」など専用の投稿タイプを作成します。

ここで使用するのが無料プラグイン【Custom Post Type UI】。

投稿タイプ名：vocab（例）
タクソノミー（カテゴリ的な分類）：part_of_speech や emotion_type など

これで「英単語」という独立した記事群を管理できるようになります。

ステップ③：カスタムフィールドを設定する（ACF）

次に、投稿ごとに属性情報を持たせるために【Advanced Custom Fields（無料版）】を使います。

設定例：

フィールド名	タイプ	備考
`part_of_speech`	テキスト	名詞・動詞など複数選択可
`prefix`	テキスト	接頭辞（例：un-, re-）
`emotion`	テキスト	positive / negative など

※複雑なリレーションや条件付き表示は無料版ではできないので、最初はシンプルに保つのがコツです。
また、あとでCSV一括インポートを行う予定がある場合、チェックボックス形式のフィールドは要注意です。

無料版のWP All Importでは、チェックボックスの複数選択には対応していません。
そのため私は、すべて一旦「テキスト形式」でインポートし、必要に応じて後からACFでチェックボックスに変更する方法を取りました。

一応、あとからチェックボックス形式に切り替えることはできますが、複数の選択肢を一括で入力するのは難しく、手動での調整が必要になります。
そのため、最初から「後で調整する前提」でデータ構造を設計しておくとスムーズです。

ステップ④：データを登録する（WP All Import 無料版）

情報が多い場合は、CSV形式で一括登録するのがおすすめ。
無料版【WP All Import】を使えば、基本的なフィールドのインポートは可能です。

チェックボックスは一つだけ先に設定し、残りは後から手動追加
インポート対象はタイトルとカスタムフィールドを使った最低限の記事テンプレート、カスタムフィールドだけで十分

後から編集しやすい構成にするのがポイントです。

ステップ⑤：絞込UIを設置（Search & Filter Pro）

ここでようやく、【Search & Filter Pro】を使って、絞込UIを作成します。

チェックボックス、ドロップダウン、キーワード検索などを自由に配置
フィルター対象にするタクソノミーやカスタムフィールドを指定
表示結果はショートコードで出力可能（例：Field not found.）

Ajaxでサクッと検索結果が切り替わるUIが、ほぼコードなしで作れます。

ステップ⑥：検索結果ページのテンプレートを調整（SWELLテーマ対応）

最後の仕上げとして、絞込検索の結果を見やすく表示するテンプレートを調整します。
この部分、私は実は一番時間がかかりました。

■ `archive-vocab.php` を子テーマに作成

検索対象となる投稿タイプ（例：vocab）の一覧表示には、archive-vocab.phpというテンプレートファイルを使います。

このファイルを子テーマ内に設置することで、該当のカスタム投稿タイプだけに適用される表示レイアウトを調整できます。

設置場所の例：

/wp-content/themes/swell-child/search-filter/archive-vocab.php

■ 実はあると便利な `template-parts` フォルダ

SWELLでは、一覧表示のループ部分を分割して管理していることがあります。
そのため、テンプレート内に次のような記述がある場合があります：

phpコピーする編集するget_template_part('template-parts/loop', 'vocab');

このような場合、template-parts/loop-vocab.php というファイルも子テーマに用意しておくと、より細かくループの見た目を調整できます。

私はこの仕組みに最初気づかず、archive-vocab.phpだけを編集しても反映されない箇所があり、ちょっとハマりました…。

■ 最小限の調整でOK

見出しやタイトル、抜粋だけでいい場合は、WordPress標準のループで十分です：

<?php while ( have_posts() ) : the_post(); ?>
  <li>
    <a href="<?php the_permalink(); ?>">
      <strong><?php the_title(); ?></strong>
    </a>
    <?php if ( has_excerpt() ) : ?>
      <p><?php the_excerpt(); ?></p>
    <?php endif; ?>
  </li>
<?php endwhile; ?>

「まずは動かす」「表示が崩れない」が優先なので、デザインは必要に応じて段階的に整えていけば十分です。