WordPressに「絞り込み検索」機能を設置するには

WordPressには標準で「キーワード検索」機能や、「カテゴリー」「タグ」で記事を絞り込む機能が搭載されています。

小規模な個人ブログであれば、これらのWordPress標準の検索機能で十分でしょう。

しかし、オンラインショップや大規模なWebサイトでは、複数の検索条件を組み合わせた絞り込み検索」が必要になってきます。

絞り込み検索ができないと、目的の商品や情報を探すのに手間がかかり、ユーザーの利便性が低下するからです。

そこで、本記事ではWordPressに絞り込み検索機能を設置(導入)する方法について解説していきます。

また、絞り込み検索ができるプラグインや、最初から絞り込み検索機能を装備しているテーマも紹介します。

  • ※本記事で紹介している情報は執筆時点のものであり、閲覧時点では変更になっている場合がございます。また、ご利用の環境(ブラウザ、サーバー、プラグイン、テーマ、またはそのバージョンや設定、WordPress本体のバージョンや設定など)によっては本記事の情報通りに動作しない場合がございます。あらかじめご了承ください。

目次

監修者
サンツォ

ブログ歴9年、マーケティング歴19年の副業ブロガー。ブログやアフィリエイト、WordPressのノウハウを教えるブログ『マクサン』の運営者。ブログ収入の累計は億を超え、月100万円以上の収益を継続的に稼ぎ続ける。現在はブログのオンラインサロン『マクサン』の共同オーナーを務め、延べ800以上のブログ相談や初心者へのコンサルティングをおこなっている。そのほか10万人以上のフォロワーを抱える『ベランダ飯』など、複数のブログやSNSの運営に携わる。

WordPressの絞り込み検索とは

WordPressには標準で以下のような検索/絞り込み機能が用意され、ウィジェットとして提供されています。

ウィジェット 説明
検索 キーワード検索
カテゴリー カテゴリー一覧の表示と絞り込み機能
タグクラウド タグ/カテゴリー/カスタム分類の一覧表示と絞り込み機能

しかし、それぞれ独立した機能のため、組み合わせて使用することができません。

絞り込み検索とは下記のように、「キーワード検索」以外に「カテゴリー」「タグ」など複数の検索条件を組み合わせて検索できる機能を指します。

検索結果の中から、さらに条件を指定して絞り込みができるWebサイトもあります。

ネットショップや大量の情報を蓄積したWebサイト(大規模なポータルサイト、Webメディアなど)では、ユーザーが求める情報を探しやすくするために必須の機能です。

それぞれのWebサイトにあった「絞り込み検索機能」を導入することで、ユーザーの利便性が向上します。

絞り込み検索機能を導入するべきサイトとは?

絞り込み検索は便利な機能ですが、すべてのWebサイトに必要なわけではありません。

絞り込み検索を導入するべきWebサイトは次の4つです。

以下にそれぞれのWebサイトで絞り込み検索機能を導入するメリットについて説明します。

ECサイト

EC(Electoronic Commerce)は日本語で電子商取引という意味です(Eコマースとも呼ばれる)。

そして、「ECサイト」とはインターネット上で商品やサービスを売買するWebサイトを指しています。

もっとわかりやすく言うと、企業や店舗の「オンラインショッピングサイト(ネットショップ)」と考えて良いでしょう。

「Amazon」や「楽天」、「Yahoo! ショッピング」はその中でも大規模なECサイトです。

ECサイトに絞り込み検索機能を導入するメリット
  • 欲しい商品やサービスが見つけやすくなり販売促進につながる
  • 商品を絞り込むことで複数商品の比較検討がしやすくなる

ECサイトに絞り込み検索を導入すると、ユーザーが欲しい商品やサービスが見つけやすくなるので販売促進につながります。

また、条件にあった商品を絞り込むことができるため、複数商品の比較検討がしやすくなるというメリットもあります。

旅行、美容室、飲食店、不動産などの検索ポータルサイト

ポータル(Portal)には日本語で「入口」「玄関」の意味があり、「ポータルサイト」とはインターネットの情報を探すための入口となるサイトを指しています。

「Google」や「Yahoo!」はポータルサイトの代表的存在ですが、特定のジャンルの情報を集め、さまざま条件で検索できるWebサイトもポータルサイトの一種です。

ポータルサイトに絞り込み検索機能を導入するメリット
  • 検索のしやすさがポータルサイトの利用価値を高める
  • 利用者が増え収益増加につながる

旅行、美容室、飲食店、不動産などの情報を集めた検索ポータルサイトは、同様の機能をもった競合サイトが多いため、検索のしやすさがポータルサイトの利用価値を高めます。

サイトに最適な絞り込み検索機能を設置することで、利用者が増えるとともに収益増加につながるのです。

大規模なWebメディアやアフィリエイトサイト

大規模なWebメディアには大量の記事が蓄積されているため、「キーワード検索」など単独の検索機能では不十分です。

ユーザーが探している情報を検索しても、大量の検索結果の中に埋もれてしまい、欲しい情報が見つからない可能性があるからです。

絞り込み検索機能を導入すれば、ユーザーが読みたい記事を探しやすくなり、利便性と回遊率アップにつながるのです。

大規模なWebメディアやアフィリエイトサイトに絞り込み検索を導入するメリット
  • 大量の記事の中から読みたい記事を絞り込みやすくなる
  • ユーザーの利便性が向上し回遊率も改善
  • リスティング広告/検索連動広告の出稿審査に有効

また、アフィリエイトサイトへ絞り込み検索機能を導入すると、

ユーザーの利便性の向上やコンテンツの独自性の点から、リスティング広告/検索連動広告の出稿審査に有効とも言われています。

作品数の多いポートフォリオサイト

ポートフォリオサイトとは、自分が制作した作品を掲載したWebサイトのことです。

フリーランスの写真家やデザイナーなど、さまざまな分野のクリエーターがスキルや実績をアピールする目的で作成しています。

ポートフォリオサイトに絞り込み検索機能を導入するメリット
  • クライアントが求めるスキル(作品)をピンポイントでアピールできる
  • 仕事が受注しやすくなる

作品数の多いポートフォリオサイトでは、クライアント(発注者)が求めるスキル(作品)をピンポイントで検索できることが重要です。

そのためには、複数の条件で絞り込める検索機能の導入が効果的でしょう。

ポートフォリオサイトでは、検索のしやすさが直接仕事の受注につながるのです。

絞り込み検索機能を導入する方法

絞り込み検索機能を導入するには次の3つの方法があります。

以下にそれぞれの方法のメリットやデメリットについて、くわしく説明していきましょう。

絞り込み検索プラグインを使って導入する

1つ目は、「絞り込み検索ができるプラグイン」を利用する方法です。

無料プラグインでも、ある程度のカスタマイズができますが、有料プラグインを利用すれば、さらに詳細なカスタマイズが可能になります。

メリット
  • 手軽に絞り込み検索機能を導入できる
デメリット
  • プラグイン導入による一般的なデメリットがある
  • 利用しているテーマと相性が悪い場合がある

プラグインを利用するメリットは、現在利用しているテーマに手軽に絞り込み検索機能を導入できる点です。

デメリットは、一般的なプラグイン導入のデメリットと同じく、「表示速度の低下」「セキュリティ面のリスク」などがあげられます。

また、利用しているテーマと相性が悪く、期待通りに動作しない可能性もありますね。

絞り込み検索機能を持ったプラグインについては後述「4-1.絞り込み検索の設定ができるプラグイン」で紹介します。

自分でコードを記述して実装する

2つ目は、「自分でコードを記述して実装」する方法です。

専門的なプログラミング知識が必要になりますが、プラグインを増やしたくない場合や、独自の絞り込み検索機能を実装したい場合に向いています。

メリット
  • プラグインを導入しなくて済む
  • 自由度が高く自サイトに適した独自の絞り込み検索機能を実装可能
デメリット
  • 専門的なプログラミング知識が必要

初心者にはハードルが高い方法ですが、簡単な絞り込み検索機能であれば、プログラミング知識がなくても導入可能です。

くわしくは、後述「4-3.プラグインなしで検索機能を導入する方法」で説明します。

絞り込み検索機能付きのテーマを利用する

3つ目は、「絞り込み検索機能付きのWordPressテーマ」を利用する方法です。

プラグインを導入することなく、手軽に絞り込み検索機能を利用できる点が優れています。

メリット
  • プラグイン導入のデメリットを回避
  • テーマに組み込まれている機能のため相性問題が発生しない
デメリット
  • 絞り込み検索機能を装備しているテーマは少なく有料のものが多い。(本記事で紹介しているテーマはすべて有料)

メリットは、プラグイン導入によるトラブルや危険性(表示速度の低下、セキュリティ面のリスク)を回避できることです。

また、テーマ専用の絞り込み検索機能が組み込まれているため、相性問題が発生することもありません。

ただし、絞り込み検索機能を装備しているWordPressテーマは少なく、有料テーマがほとんどです。

絞り込み検索機能を装備したテーマは、後述「5.絞り込み検索ができるWordPressテーマ」で紹介します。

プラグインを使って絞り込み検索機能を導入する方法

ここでは、プラグインを使った絞り込み検索機能の導入方法について、以下の3項目に分けて説明します。

絞り込み検索の設定ができるプラグイン

まず、絞り込み検索ができるプラグイン(以下の4つ)を紹介します。

Search & Filter(無料)

WordPressに絞り込み検索を導入できるプラグイン_ Search & Filter

Search & Filterは、ショートコードだけで絞り込み検索フォームを設置できる無料プラグインです。

事前設定は必要なく、ショートコードを記述するだけで記事内、サイドバー、ヘッダーなどの好きな場所に検索フォームを設置できます。

Search & Filterの特徴
  • ショートコードだけで絞り込み検索フォームを設置できる
  • 検索条件は下記の組み合わせが可能(キーワード入力、カテゴリー、タグ、カスタム分類、投稿タイプ、投稿日)

下記はSearch & Filterを使用した検索フォームのサンプルです。

WordPressに絞り込み検索を導入できるプラグイン_ Search & Filterのフォームサンプル

この例では「キーワード入力」「カテゴリー」「タグ」のほかに、独自に作成したカスタム分類「地域」も検索条件に加えています。

検索条件の順番は自由に変更可能で、選択リストの形式は「ドロップダウン」「ラジオボタン」「チェックボックス」が指定できます。

その他にも以下のような柔軟なカスタマイズが可能です。

Search & Filterのカスタマイズ項目
  • 検索条件ラベルの設定(キーワード、カテゴリー、タグ、地域など)
  • キーワード入力欄のテキスト変更
  • 検索ボタンのテキスト変更
  • 選択リストの形式(ドロップダウンリスト/ラジオボタン/チェックボックス)
  • 選択リストの階層化表示
  • 選択リストの記事数表示
  • 選択リストの並び替え項目(ID、名前、スラッグ、数など)と、ソート順(昇順/降順)を指定可能

Search & Filterの一番のメリットは「ショートコードだけで絞り込み検索フォームを設置できる」ことです。

事前に検索フォームを作成しておく必要がないので手間がかかりません。

デメリットは、詳細なカスタマイズをおこなうとショートコードが複雑になってしまい、メンテナンス性が低下する点です。

VK Filter Search(無料)

WordPressに絞り込み検索を導入できるプラグイン_VK Filter Search

VK Filter Searchは、ブロックエディターで利用可能な絞り込み検索用ブロックを提供する無料ブラグインです。

このプラグインを導入すると、投稿や固定ページに簡単に絞り込み検索フォームを作成できます。

VK Filter Searchの特徴
  • ブロックエディターで利用可能な絞り込み検索用ブロックを提供
  • 投稿や固定ページに絞り込み検索フォームを簡単に設置できる
  • 検索条件は下記の組み合わせが可能(キーワード入力、カテゴリー、タグ、カスタム分類、投稿タイプ)

下記はVK Filter Searchを使用した検索フォームのサンプルです。

WordPressに絞り込み検索を導入できるプラグイン_VK Filter Searchのフォームサンプル

「キーワード入力」「カテゴリー」「タグ」のほかに、独自に作成したカスタム分類「地域」を選択条件に追加した例です。

検索条件の順番は自由に変更可能ですが、選択リスト形式は「ドロップダウン」のみ(有料版では「チェックボックス」「ラジオボタン」が利用可能)。

そのほかには、エディターのブロックパネルから下記の設定が可能です。

VK Filter Searchのカスタマイズ項目
  • 検索対象とする投稿タイプ(投稿/固定ページ/カスタム投稿など)の設定
  • 検索フォームを検索結果ページにも表示

VK Filter Searchのメリットは、ブロックエディターを使用して簡単に検索専用ページを作成できることでしょう。

ただし、投稿や固定ページにしか絞り込み検索フォームを設置できない点はデメリットです。

なお、VK Filter Searchには、有料版のVK Filter Search Proがあり以下の機能が利用できます。

有料版「VK Filter Search Pro」の追加機能
  • 選択リスト形式に「チェックボックス」、「ラジオボタン」が使用可能
  • チェックボックスのAND検索/OR検索が可能
  • 画面サイズ(Small/Medium/Largeなど5種類)ごとにブロック幅(1/1~1/4)を設定可能
  • 検索条件のラベルを任意に変更可能

WP Custom Fields Search(無料)

WordPressに絞り込み検索を導入できるプラグイン_ WP Custom Fields Search

WP Custom Fields Searchは、絞りこみ検索フォームを作成・設置する無料プラグインです。

絞り込み検索フォームを作成後に、ショートコードで任意の場所に設置できます。

WP Custom Field Searchの特徴
  • 絞り込み検索フォームを作成後ショートコードで任意の場所に設置
  • 検索条件は下記の組み合わせが可能(キーワード入力、カテゴリー、タグ、カスタム分類、カスタムフィールド、投稿タイプなど)

絞り込み検索フォームを設置するには、あらかじめ以下のように画面で検索フォームを作成しておく必要があります。

WordPressに絞り込み検索を導入できるプラグイン_ WP Custom Fields Searchのフォーム作成画面

検索条件は、「テキスト入力」のほかに、「カテゴリー」「タグ」「カスタム分類」「カスタムフィールド」「投稿タイプ」などの組み合わせが可能です。

選択リストの形式は、「ドロップダウン」「チェックボックス」「ラジオボタン」が選べます。

作成した検索フォームを保存するとショートコードが作成され、任意の場所に検索フォームを設置できるようになります。

下記はSearch & Filterを使用した検索フォームのサンプルです。

WordPressに絞り込み検索を導入できるプラグイン_ WP Custom Fields Searchのフォームサンプル

なお、「WPCFS Custom Search Form」というウィジェットが用意されているので、

下記のようにサイドバー(ウィジェットエリア)などに設置して、直接絞り込み検索フォームを作成することも可能です。

WordPressに絞り込み検索を導入できるプラグイン_ WP Custom Fields Searchのサイドバーウィジェット

(ウィジェットを利用する場合はショートコードを設置する必要はありません)

WP Custom Field Searchのメリットは、絞り込み検索フォーム作成の自由度が高いことです。

デメリットは、プラグインの更新頻度が低いことでしょう。

最新バージョンの WordPress で使用した場合に互換性の問題が発生する可能性があるため注意が必要です。

FE Advanced Search(税込59,800円)

WordPressに絞り込み検索を導入できるプラグイン_ FE Advanced Search

FE Advanced Searchは、高度な絞り込み検索フォームを作成・設置できる有料プラグインです。

このプラグインを導入すると、無料プラグインでは実現できない詳細な絞り込み検索が可能になります。

FE Advanced Searchの特徴
  • 高度な絞り込み検索フォームを作成し、ショートコードで設置できる有料プラグイン
  • 検索条件は下記の組み合わせが可能(キーワード検索、カテゴリー、タグ、カスタム分類、投稿タイプ、投稿年月、カスタムフィールド)
  • 無料プラグインにはない詳細なカスタマイズが可能

下記は、FE Advanced Searchのデモサイトで公開されている検索フォームです。

WordPressに絞り込み検索を導入できるプラグイン_ FE Advanced Searchのフォームサンプル

デモサイトからは、プラグインの設定画面を実際に操作することもできます。

検索条件は以下のような詳細なカスタマイズが可能です。

FE Advanced Searchの機能(カスタマイズ)
  • 選択リストの形式(ドロップダウン/セレクトボックス/チェックボックス/ラジオボタン)
  • 検索結果のソート(投稿日、タイトル、スラッグ、カスタムフィールド値)
  • 範囲検索(投稿年月、カスタムフィールドでは○○以上~○○以下という範囲指定可能)
  • 検索フォームをCSSで自由にデザイン可能
  • 検索除外項目の指定(特定のカテゴリーやタグの検索条件に表示されないように除外)
  • 表示階層の指定(階層化されたカテゴリーの階層を指定可能)
  • 記事数0件の項目表示/非表示(記事数が0件のカテゴリーやタグを表示可能)
  • 選択リストの項目の並び順(ID、名前、スラッグ)を変更可能

FE Advanced Searchのメリットは、大規模なWebサイトに有用な複雑で高度な絞り込み検索が可能なこと。

デメリットは、初心者には設定が複雑すぎる点と、個人で導入するには価格が高いことでしょう。

Search & Filterを使った設定手順

次に、一番最初に紹介したプラグイン「Search & Filter」を利用した絞り込み検索の導入手順と、ショートコードの設定方法を以下の手順に沿って説明します。

プラグインをインストールする

プラグイン「Search & Filter」をインストールするには下記の操作をおこないます。

WordPressに絞り込み検索を導入できるプラグイン_ Search & Filterのインストール方法_ダッシュボード

WordPress管理画面から「プラグイン」→「新規追加」へと進み、「プラグイン追加」画面を表示します。

WordPressに絞り込み検索を導入できるプラグイン_ Search & Filterを検索

「プラグインを追加」画面の右上にある検索ボックスに、インストールするプラグイン名「Search & Filter」を入力してください。

すると、自動的に検索されたプラグインの一覧が表示されます。

WordPressに絞り込み検索を導入できるプラグイン_ Search & Filterをインストール実行

検索されたプラグインの一覧の中から「Search & Filter」を探して、「今すぐインストール」ボタンを押下します。

プラグインのインストールが開始されます。

WordPressに絞り込み検索を導入できるプラグイン_ Search & Filterを有効化

プラグインのインストールが終わると表示される「有効化」ボタンを押下します。

これで、プラグイン「Search & Filter」のインストールは完了です。

WordPressに絞り込み検索を導入できるプラグイン_ Search & Filterがダッシュボードに追加された

WordPress管理画面に上記のような「Search & Filter」というメニューが追加されます。

この画面にはプラグインの設定項目はなく、ショートコードの設定方法などが説明されています。

ショートコードの説明

Search & Filterの基本的なショートコードは以下の形式になります。

[searchandfilter fields="search, category, post_tag"]

先頭の「searchandfilter」は、「Search & Filter」のショートコードであることを示し、「fields="...."」は、検索フィールドの組み合わせ指定をするパラメータとオプションです。

上記の例では以下のような3つ検索フィールドを持つ検索フォームが作成されます。

WordPressに絞り込み検索を導入できるプラグイン_ Search & Filterのショートコード
  • ※ショートコードで作成される検索フォームのスタイル(外観)は、利用するテーマのCSS設定により異なる場合があります。

ショートコードで指定できる主なパラメータとオプションは以下のとおりです。

パラメータ 説明 オプション
※青字はデフォルト
field 検索フィールドの組み合わせを「,」区切りで指定

search:キーワード入力

post_tag:タグ

category:カテゴリー

post_type:投稿タイプ

post_date:投稿日

xxxxx:カスタム分類

type 検索フィールドの選択リストの形式を「,」区切りで指定

select:ドロップダウン

checkbox:チェックボックス

radio:ラジオボタン

headings 検索フィールドのラベルを「,」区切りで指定
order_by 検索フィールドの選択リストの並び替え項目を「,」区切りで指定

ID:IDで並べ替え

name:名前で並べ替え

slug:スラッグで並べ替え

count:記事数で並べ替え

order_dir 検索フィールドの選択リストの並び替え項目を「,」区切りで指定

ASC:昇順

DESC:降順

submit_label 検索ボタンに表示するテキスト Submit
search_placeholder キーワード入力欄に表示するテキスト Search...
class CSSを適用するクラス名を「,」区切りで指定

記事にショートコードを設置する場合

投稿や固定ページに絞り込み検索フォームを設置するには、記事の編集画面でショートコードを設置するだけです。

ここでは、無料テーマ「Cocoon」で絞り込み検索用ページ(固定ページ)を作成してみましょう。

WordPressに絞り込み検索を導入できるプラグイン_ Search & Filterで検索用ページを作成

WordPress管理画面から「固定ページ」→「新規追加」を選択します。

WordPressに絞り込み検索を導入できるプラグイン_ 固定ページの作成

固定ページの編集画面が表示されるので、ページのタイトルと「Search & Filter」のショートコードを追加します。

WordPressに絞り込み検索を導入できるプラグイン_ Search & Filterで検索用ページを作成(ページタイトルとショートコード)

ここでは、ページのタイトルに「絞り込み検索(Search & Filter)」、すぐ下のブロックに以下のショートコードを追加しています。

[searchandfilter fields="category,post_tag,search" headings="カテゴリー,タグ,"  type="select,checkbox," search_placeholder="キーワード..." submit_label="検索"]

ショートコードの設定内容は以下のとおりです。

ショートコードの設定内容
  • 検索フィールド=「カテゴリー」、「タグ」、「キーワード入力」
  • ラベル=「カテゴリー:カテゴリー」、「タグ:タグ」、「キーワード入力:なし」
  • 選択リストの形式=「カテゴリー:選択ボックス」、「タグ:チェックボックス」)
  • キーワード入力欄のテキスト=「キーワード...」
  • 検索ボタンのテキスト=「検索」

ページタイトルとショートコードの設置が済んだら、右上の「公開/更新」ボタンを押下しましょう。

これで、絞り込み検索ページの作成は完了です。

WordPressに絞り込み検索を導入できるプラグイン_ Search & Filterで検索用ページを作成完了

作成した絞り込み検索ページは上記のように表示されます(無料テーマ「Cocoon」の表示例)。

テンプレートファイル上に設置する場合

テーマのテンプレートファイルに直接検索フォームを設置する場合は、ショートコードを以下のようにPHPのタグで囲めばOKです。

<?php echo do_shortcode('ショートコード'); ?>

ここでは、無料テーマ「Cocoon」のサイドバーに絞り込み検索機能を設置してみましょう。

注意

以下の例ではWordPressのテーマエディターを使用して「sidebar.php」ファイルを直接編集しています。

この方法だとテーマを更新した際に編集内容が失われてしまうため、 テンプレートファイルを編集する場合は、子テーマを作成することをおすすめします。

WordPressに絞り込み検索を導入できるプラグイン_Search & Filterで テーマエディターを編集

WordPress管理画面から「外観」→「テーマエディター」へと進み、右側の「テーマファイル」の一覧から「サイドバー(sidebar.php)」ファイルを選択します。

WordPressに絞り込み検索をテーマに直接実装する方法_Search & Filterのショートコードを追加

「sidebar.php」ファイルの該当場所(サイドバーの先頭位置)に、Search & Filterのショートコードを追加します。

上記の例では下記のコードを追加しています。

<?php echo do_shortcode('[searchandfilter fields="search,category,post_tag" headings="絞り込み検索,カテゴリー,タグ"  type=",select,checkbox" search_placeholder="キーワード..." submit_label="検索"]'); ?>

青字がショートコードの部分で、ショートコードの設定内容は以下のとおりです。

ショートコードの設定内容
  • 検索フィールド=「キーワード入力」、「カテゴリー」、「タグ」
  • ラベル=「キーワード入力:絞り込み検索」、「カテゴリー:カテゴリー」、「タグ:タグ」
  • 選択リストの形式=「キーワード入力:指定なし」、「カテゴリー:選択ボックス」、「タグ:チェックボックス」)
  • キーワード入力欄のテキスト=「キーワード...」
  • 検索ボタンのテキスト=「検索」

ショートコードの追加が済んだら、左下の「ファイルを保存」ボタンを押下しましょう。

これで、サイドバーへの絞り込み検索フォームの設置は完了です。

Search & Filterでサイドバーに検索フォームを設置完了

サイドバーに設置した絞り込み検索フォームは上記のように表示されます(無料テーマ「Cocoon」の表示例)。

プラグインなしで絞り込み検索機能を導入する方法

ここでは、以下のような絞り込み検索フォームをプラグインなしでサイドバーに設置する方法を説明します。

WordPressにプラグイン無しで絞り込み検索を設置する方法

なお、利用するテーマによって検索フォームの外観(スタイル)が異なりますが、CSSの設定で外観の変更は可能です。

検索フォームを作成する

最初に、「キーワード入力」と「検索ボタン」からなる基本の検索フォームを以下の手順で作成します。

(1)基本の検索フォームを作成する

検索フォームを作成するには、以下のPHPファイルを作成し、FTPソフトでサーバー上のテーマ格納フォルダーにアップロードします。

【ファイル名】my_searchform.php

【my_searchform.phpの内容】

<form method="get" action="<?php bloginfo( 'url' ); ?>" class="my_searchform">
	<input name="s" id="s" type="text" placeholder="キーワード入力" />
	<input id="submit" type="submit" value="検索" />
</form>

上記のコードは「キーワード入力」と「検索ボタン」からなる基本の検索フォームに、CSS用のクラス名「my_searchform」を追加したものです。

(上記の内容をそのままコピー&ペーストすればOK)

検索フォームのファイル名は標準的に「searchform.php」という名前が使用されますが、

利用しているテーマのファイル名と重複しないように、「my_searchform.php」というファイル名で検索フォームを作成します。

注意点はファイルの文字コードを「UTF-8」で保存すること。それ以外の文字コードでは文字化けする可能性があります。

(2)検索フォームを呼び出すショートコードを作成する

上記の検索フォームをショートコードで設置できるように、テーマの「functions.php」ファイルの最終行に、以下の記述を追加します(コピー&ペーストでOK)。

【ファイル名】functions.php

【functions.phpの最終行に追加する内容】

// 絞り込み検索(my_searchform)のショートコード
function shortcode_my_searchform () {
	ob_start();
	get_template_part('my_searchform');
	return ob_get_clean();
}
add_shortcode('my_searchform', 'shortcode_my_searchform');

これで [my_searchform]というショートコードで、検索フォームが設置できるようになります。

(3)ウィジェットを利用してサイドバーに設置する

サイドバーに検索フォームを設置するには、ウィジェットを利用するのが簡単です。

ここでは、無料テーマ「Cocoon」で、「テキスト」ウィジェットを利用してサイトバーに検索フォームを設置します。

WordPressにプラグイン無しで絞り込み検索を設置する方法_ウィジェットを利用してサイドバーに設置

WordPress管理画面から「外観」→「ウィジェット」へと進み、

サイドバーのウィジェットエリアの先頭に「テキスト」ウィジェットまたは、「カスタムHTML」ウィジェットを配置します。

WordPressにプラグイン無しで絞り込み検索を設置する方法_テキストウィジェットを編集

「テキスト」ウィジェットを展開し、タイトル(絞り込み検索)とショートコード "[my_searchform]"を設定し、「保存」ボタンを押下します。

ここまでの設定で、サイドバーに下記のような検索フォームが設置できるはずです。

WordPressにプラグイン無しで絞り込み検索を設置する方法_絞り込検索の例

「キーワード入力」欄と「検索」ボタンの間隔は、後からCSSで調整します。

カテゴリー別の絞り込み検索方法

基本の検索フォームに「カテゴリー別の絞り込み検索」を追加するには、下記のコードを「my_searchform.php」に記述します(コピー&ペーストでOK)。

【my_searchform.phpの内容】

<form method="get" action="<?php bloginfo( 'url' ); ?>" class="my_searchform">
	<input name="s" id="s" type="text"  placeholder="キーワード入力" />
	<?php wp_dropdown_categories('orderby=name&hide_empty=-&show_option_all=カテゴリー選択&selected=0'); ?>
	<input id="submit" type="submit" value="検索" />
</form>
  • ※青字で記載された部分が「カテゴリー別絞り込み検索」用に追加したコードです。

カテゴリー選択で設定しているオプションは下記のとおりです。

オプション 説明
orderby

選択リストの並べ替え項目[ID、NAME、SLUG]

  • ※デフォルトは昇順
hide_empty 未設定のカテゴリーの表示 [0:表示する、1:非表示]
show_options_all すべてを選択できる項目のテキスト

これで、下記のように「キーワード入力」の下に、「カテゴリー」の選択リスト(ドロップダウン)が追加されます。

WordPressにプラグイン無しで絞り込み検索を設置する方法_カテゴリー別の絞り込検索_フォーム例

タグ別の絞り込み検索方法

基本の検索フォーム+カテゴリー検索に、「タグ別の絞り込み検索」を追加するには、下記のコードを「my_searchform.php」に記述します(コピー&ペーストでOK)。

【my_searchform.phpの内容】

<form method="get" action="<?php bloginfo( 'url' ); ?>" class="my_searchform">
	<input name="s" id="s" type="text" placeholder="キーワード入力" />
	<?php wp_dropdown_categories('orderby=name&hide_empty=-&show_option_all=カテゴリー選択&selected=0'); ?>
		<?php $tags = get_tags(); if ( $tags ) : ?>
			<select name='tag' id='tag'>
			<option value="" selected="selected">タグ選択</option>
			<?php foreach ( $tags as $tag ): ?>
			<option value="<?php echo esc_html( $tag->slug); ?>"><?php echo esc_html( $tag->name ); ?></option>
			<?php endforeach; ?>
			</select>
		<?php endif; ?>
	<input id="submit" type="submit" value="検索" />
</form>
  • ※青字で記載された部分が「タグ別絞り込み検索」用に追加したコードです。

これで、下記のように「キーワード入力」、「カテゴリー」の下に「タグ」の選択リスト(ドロップダウン)が追加されます。

WordPressにプラグイン無しで絞り込み検索を設置する方法_タグ別の絞り込検索_フォーム例

各検索フィールドの間隔を調整するには、下記のコードをテーマのスタイルシート(style.css)の最終行に追加しましょう。

【ファイル名】style.css

【style.cssの最終行に追加する内容】

/* 絞り込み検索フォーム */
.my_searchform input, .my_searchform select {
	margin-bottom: 0.5em;
}

以下のような絞り込み検索フォームが表示されれば完成です。

WordPressにプラグイン無しで絞り込み検索を設置する方法_タグ別の絞り込検索_フォーム設置完了

絞り込み検索ができるWordPressテーマ

絞り込み検索機能を搭載したテーマを5つ紹介します。

いずれも有料テーマになりますが、プラグイン導入による表示速度の低下やセキュリティ面のリスクを心配せずに、絞り込み検索機能を利用できます。

THE SONIC(税込1,078円/月)

絞り込み検索があるWordPressテーマ_THE SONIC

THE SONIC(ソニック)は、アフィリエイター、サイトデザイナー、フロントエンドエンジニアがタッグを組んで作り上げたアフィリエイター向けの有料テーマです。

SEO対策をはじめ、アフィリエイトに必要な機能が詰め込まれ、プラグインの導入や表示スピードの低下を気にすることなく、記事の作成に集中できるように設計されています。

THE SONICの特徴
  • アフィリエイター向けのテーマ(表示スピード、記事の書きやすさ、収益化のしやすさを重視)
  • 最初からアフィリエイトに必要な機能をそなえている
  • 絞り込み検索が可能な「カスタム検索機能」を装備

THE SONICには、サイト内検索ボックスから検索した結果をさらに絞り込むことができる「カスタム検索機能」が装備されています。

絞り込み検索があるWordPressテーマ_THE SONICのカスタム検索機能

上記のように「キーワード入力」「カテゴリー選択」「タグ選択」の3つを組み合わせた絞り込み検索が可能です。

タグは複数選択可能で「タグをすべて含む(AND)」または、「いずれかのタグを含む(OR検索)にも対応しています。

また、以下のような検索対象/除外対象の事前設定も可能です。

検索対象/除外対象の事前設定
  • 検索対象に含めるページのタイプ(投稿/固定ページ)
  • 検索対象(カテゴリー名/タグ名/投稿者名)
  • 選択リストから除外するカテゴリー(カテゴリーIDを指定)

THE SONICの価格とライセンスは以下のとおりです。

価格(税込) 月額:1,078円、年額:8,580円 ※サブスクリプション契約
ライセンス 複数のサイトで利用可能

なお、THE SONICはレンタルサーバー「ConoHa WING」の提携テーマとなっており、「WordPressかんたんセットアップ」を利用すれば割引価格で購入できます。

くわしくは、こちらをご覧ください。

GENSEN(税込39,800円)

絞り込み検索があるWordPressテーマ_GENSEN

GENSEN(ゲンセン)は、WordPressテーマの国内著名ブランド「TCD」が販売するポータルサイト向けの有料テーマです。

高性能な検索抽出機能を搭載し、さまざまなポータルサイトで活用できるように設計されています。

GENSENの特徴
  • 高性能な検索抽出機能を搭載したポータルサイト向けのテーマ
  • 不動産の物件情報、ファンションやグルメ情報、大規模なアフィリエイトサイトでも活用可能

GENSENの検索機能は、以下のように「キーワード入力」と「カテゴリー選択」を最大4つまで組み合わせることができます

絞り込み検索があるWordPressテーマ_GENSENの検索フォーム例

「キーワード入力」では、複数キーワードを指定した場合に「AND検索(すべてを含む)」なのか、「OR検索(いずれかを含む)」なのかの指定も可能です。

絞り込み検索があるWordPressテーマ_GENSENの検索結果例

さらに、上記のように検索結果ページから、特定のタグを選択して詳細な抽出ができる「絞り込み検索機能」を搭載しています。

検索結果は新しい順/古い順/閲覧数順で並べ替えることも可能です。

なお、GENSENの検索機能はこちらのデモサイトで確認できます。

価格(税込) 39,800円
ライセンス 複数のサイトで利用可能

TOKI(税込32,800円)

絞り込み検索があるWordPressテーマ_TOKI

TOKI(トキ)は、前述したGENSENと同じ「TCD」が販売するインバウンドメディア向けの有料テーマです。

マルチ言語サイト対応(複数言語用に作成したページをワンクリックで切り替え可能)で、訪日外国人向けに効果的に情報発信できるように設計されています。

TOKIの特徴
  • インバウンドメディア(訪日外国人向けのサイト)用のテーマ
  • 高度な絞り込み機能を実装した検索フォーム
  • コンテンツビルダー機能と4つのカスタム投稿タイプ「お店/知る/学ぶ/お知らせ」を持つ

TOKIの検索機能の特徴はトップページヘッダーに、以下のような検索フォームを設置できることです。

絞り込み検索があるWordPressテーマ_TOKIの検索フォーム例

トップページから一発で目的の記事に辿り着けるよう、外国人ユーザーにわかりやすいデザインを採用しています。

また、TOKIはトップページに主要な情報を集約できるように工夫されており、

コンテンツビルダー機能によって、各種コンテンツの位置や表示/非表示を簡単に設定できるようになっています。

価格(税込) 32,800円
ライセンス 複数のサイトで利用可能

Nishiki Pro(税込19,580円)

絞り込み検索があるWordPressテーマ_Nishiki Pro

Nishiki Pro(ニシキ プロ)は、WordPress公式ディレクトリに登録されている無料テーマ「Nishiki(ニシキ)」に、Webサイト運営に役立つ機能をまとめて搭載した有料テーマです。

テーマのカスタマイズやプラグインの導入にかかる手間と時間を、最小限に抑えられるように開発されています。

Nishiki Proの特徴
  • Webサイト運営に必要な機能をまとめて搭載したテーマ
  • WordPressテーマのカスタマイズやメンテナンスコストを大幅に削減可能
  • 絞り込み検索が可能

Nishiki Proの検索機能は、以下のように「キーワード入力」「カテゴリー選択」「タグ選択」の組み合わせが可能です。

絞り込み検索があるWordPressテーマ_Nishiki Proの検索フォーム例

「カテゴリー」と「タグ」は複数選択が可能で「AND検索(すべてを含む)」と「OR検索(いずれかを含む)」にも対応しています。

絞り込み検索のサンプルは、こちらのデモサイトで確認可能です。

価格(税込) 19,580円
ライセンス 複数のサイトで利用可能

なお、Nisiki Proには無料で利用できる「お試し版(アップデートとサポートなし)」が用意されています。

THE THOR(税込16,280円)

絞り込み検索があるWordPressテーマ_THE THOR

THE THOR(ザ・トール)は、SEOコンサルタントとして実績のある「フィット社」のノウハウが注ぎ込まれた有料テーマです。

SEOに強く高速表示が可能なだけでなく、プロ並みの美しく洗練されたサイトを作れるようなデザイン機能も備えています。

THE THORの特徴
  • 革新的な高速表示技術と最先端のSEO機能を装備
  • プロ並みのデザイン機能(デザイン着せ替え機能、カスタマイズも簡単)
  • 複数条件の検索が可能な「スマート検索機能」を装備(ウィジェットで提供)

THE THORの「スマート検索機能」は、以下のように「キーワード入力」「カテゴリー選択」、「タグ選択(複数選択可能)」を組み合わせた検索が可能です。

絞り込み検索があるWordPressテーマ_THE THORの検索フォーム例

この検索フォームはウィジェットとして提供されるので、サイドバーやヘッダーに簡単に設置できます。

絞り込み検索のサンプルは、こちらのデモサイトで確認してみましょう。

価格(税込) 16,280円
ライセンス 複数のサイトで利用可能

WordPressで絞り込み検索機能を設置する方法まとめ

Webサイトに絞り込み検索機能を導入すれば、サイト訪問者が読みたい記事や欲しい情報を見つけやすくなり利便性が向上します。

WordPressなら簡単に絞り込み検索フォームを設置できるので、まだ導入していない場合はこの機会に検討してみてはいかがでしょうか。

プラグインを利用するなら、事前設定の必要がない無料プラグイン「Search & Filter」がおすすめです。

なお、レンタルサーバーのConoHa WINGなら、絞り込み検索ができるテーマ「THE SONIC」を割引料金で購入することができます。

くわしくはこちらのページをご覧ください。

WordPressを始めるならConoHa WINGがおすすめ!

「WordPressでブログやアフィリエイトを始めたい!」

「もっと性能の良いレンタルサーバーに乗り換えたい!」

そんなあなたには、高性能・高速でお得なレンタルサーバーConoHa WINGをおすすめします。

ConoHa WINGのメリット
  • サイト表示が速い! 国内最速のレンタルサーバー
  • 初心者も安心! 簡単で使いやすい管理画面
  • 安定した稼働! 大量同時アクセスなどの高負荷にも強い
  • お得な料金設定! 493円/月~で始められる!
  • しかも初期費用が無料! さらに独自ドメインも永久無料!
  • ※2022年10月自社調べ

今なら最大62%おトク!

ConoHa WINGを 今すぐお申し込み

ConoHa WINGは日本マーケティングリサーチ機構による調査で、下記の3部門においてNo.1を獲得しています。

ConoHa WINGは3つのNo.1を獲得!
  • アフィリエイター・ブロガーが使いたいレンタルサーバー
  • WordPress利用者満足度
  • サポートデスク対応満足度
  • ※日本マーケティングリサーチ機構調べ 調査概要:2022年5月期_ブランドのイメージ調査

新規のお申し込みはこちら

Webにくわしくない初心者でもたった10分で始められるレンタルサーバー「ConoHa WING」。

とっても簡単だから今すぐ始めちゃいましょう。

今なら最大62%おトク!

ConoHa WINGを 今すぐお申し込み

また下記の記事では、ConoHa WINGを使ってWordPressを開設する方法を、画像付きでくわしく解説しています。

【WordPressの始め方】初心者でも最短10分でできる!簡単で失敗しない開設方法

  • WordPressの始め方

他社レンタルサーバーからお乗換えはこちら

他社のレンタルサーバーをご利用中で、ConoHa WINGにお乗り換えを検討されている方も安心です!

煩雑なレンタルサーバーの移行もかんたんにお乗換えいただけるよう、いくつかのサポートを用意しています。

  • WordPressかんたん移行ツール

    他社サーバーでお使いのWordPressを、ご自身でかんたんにConoHa WINGへ移行ができる無料のツールをご用意しています。

  • WordPress移行代行

    移行にかかる作業はすべて専門のプロが代行するので、待っているだけでWordPressを移行できます。

  • ConoHa WINGへの移行ガイド

    レンタルサーバーの移行作業は複雑ですが、ConoHa WINGでは移行作業の流れをわかりやすくご紹介しています。