【事例No.8】ブログ記事の検索フィルタ機能実装

本シリーズでは、ITスクール「First」の事業運営におけるIT・デジタル活用の具体的な事例をご紹介していきます。今回は、WordPressで制作したWebサイトのブログ記事の検索フィルタ機能を実装したいと思います。

1. 課題設定（ストーリー）

現在、ITスクールのWebサイトに、ITやデジタルの技術に関するブログ記事を投稿しています。ある日、ITスクールの代表は考えていました。

「そう言えば、ブログ一覧画面で記事を検索する機能がない」
「検索できた方が便利だよな、たぶん。PV数も増えるし」

当初は、主にスクールの集客を目的としてブログ記事を書いていました。コツコツと投稿していく内に、少しずつ記事数が増えてきました。そろそろ検索できる機能を持たせる時期が来ました。

「検索と言えば、カテゴリーやタグが一般的かな」
「WordPressなら、標準機能で何とかなるかもしれない」

そして、遂に重い腰を上げました。先ずは、WordPressのウィジェットなどの標準機能で対応できないか検討することにしました。自作するよりも、すぐに導入でき、かつ安全性も高そうだと感じたからです。

「思った通り、幾つか検索用のウィジェットがある」
「ん？でも、これってサイドバーとかに設置するタイプかも」

ITスクールのWebサイトは、デザイン性を重視して、1カラムの画面構成にしていました。WordPressのウィジェットは、サイドバーやフッターなどに設置するもので、固定ページに設置するには別の方法を模索する必要がありました。

プラグイン等で対応できる可能性もありましたが、今回はデザインや動作の面も含めて少し工夫したかったので、思い切って検索フィルタを自作することにしました。

「いきなり難易度が上がってしまった」
「いつも通り、調べながらやっていくしかないか」

使用しているテーマの投稿一覧を表示するテンプレートファイル（PHP）の冒頭部分に、検索フィルタのソースコード（PHPとJavaScript）を追加します。検索フィルタのアルゴリズムは、実際のWordPressのウィジェットの実装を参考にします。

検索フィルタは、カテゴリーとタグの2タイプを用意します。なお、ブログ記事数がそこまで多くないので、フリーキーワードによる検索は見送ることにしました。

後のメンテナンスを考慮して、自作するソースコードは独立したファイルにして、テンプレートファイル側にてinclude等の関数で読み込む仕様にします。また、デザインの指定については、WordPressの標準機能である追加CSSで対応することにします。

下記にシステムの全体像を示します。

構成要素	説明
投稿一覧テンプレート	WordPressのテーマで用意されている、ブログ記事の一覧を表示するためのテンプレートファイル。
検索フィルタ	カテゴリーまたはタグでブログ記事を検索するフォーム。GETメソッドでHTTPリクエストを実行する。
DBのテーブル	ブログ記事のカテゴリーやタグの情報を管理しているデータベースのテーブル。wp_termsなど。
追加CSS	検索フィルタのデザイン内容を記述するCSS。PCとスマホにレスポンシブ対応する。