PROJECT 002 — 社内ポータルサイトをWordPressで作る。
STEP 07 / SEARCH
STEP 06では、利用者が情報を投稿し、その内容についてコメントでやり取りできるようにしました。
投稿とコメントを蓄積できるようになると、次に必要になるのが過去の情報を探す仕組みです。情報が増えるほど、「どこに書いてあったかは覚えていないが、使われていた言葉は覚えている」という場面が増えます。
そこでSTEP 07では、WordPressの標準検索を土台に、投稿だけでなくコメントも探せる検索機能を作りました。蓄積した情報を、必要になったときにもう一度使える状態にします。
ナビゲーションだけでは探しきれない情報がある
STEP 04で作ったナビゲーションは、HOME、カテゴリー、投稿の位置関係を分かりやすくし、目的の場所へ移動するためのものです。どの種類の情報がどこにあるか分かっているときに役立ちます。
一方、検索はキーワードから情報を探す入口です。カテゴリーや投稿日を覚えていなくても、タイトル、本文、コメントに含まれる言葉から目的の情報へたどり着けます。
ナビゲーション └─ 情報の場所をたどる 検索 └─ 覚えている言葉から探す
どちらか一方へ置き換えるのではなく、場所が分かるときはナビゲーション、分からないときは検索という二つの入口を用意しました。
WordPressの標準検索を土台にする
WordPressには、検索欄から送られたキーワードを使い、投稿や固定ページを探す標準機能があります。検索フォームの入力値はURLのsという項目でWordPressへ渡り、検索結果の一覧が作られます。
今回はこの流れをそのまま使い、テーマのheader.phpへ検索フォーム、search.phpへ検索結果画面を用意しました。標準機能で足りない検索対象と表示だけを、functions.phpと検索結果テンプレートで補っています。
投稿と固定ページの検索にはWordPressのメイン検索を使い、公開済みの内容を一度に20件ずつ表示します。コメントは別に検索し、承認済みのコメントだけを新しい順に取得する構成です。
ヘッダー右上から検索できるようにする
検索フォームは、サイトの上部にあるヘッダーへ置きました。入力欄には「投稿・コメントを検索」と表示し、検索ボタンと組み合わせています。
最初は検索欄とメニューが同じ領域を使っていましたが、上部が高くなりすぎないよう、検索欄をヘッダーの右上へ移動しました。利用者名やログイン操作と同じ上段へまとめ、ナビゲーションはその下へ分けています。
入力中であることが分かるよう、検索欄を選ぶと背景色と枠が変わる表示も追加しました。ブラウザーやWindows環境でも文字と入力位置を確認しやすいよう、フォームのフォントとフォーカス表示をそろえています。
ページに合わせて検索範囲を変える
検索対象を常にサイト全体にすると、情報が増えたときに関係の薄い結果も混ざります。一方、最初から細かい条件を利用者へ選ばせると操作が増えます。
そこで、開いているページに合わせて検索範囲を自動で決めるようにしました。
- HOMEでは、サイト全体の投稿・固定ページ・コメントを検索
- カテゴリーの一覧では、そのカテゴリー内の投稿とコメントを検索
- 投稿ページでは、その投稿が属する社内ポータル用カテゴリー内を検索
カテゴリー内を検索するときは、検索フォームへカテゴリーIDを隠し項目として加えます。functions.phpのcompany_portal_search_category_id()が現在のページから対象カテゴリーを判断し、WordPressの検索とコメント検索の両方へ同じ範囲を渡します。
検索欄の上には「検索範囲：サイト全体」またはカテゴリー名を表示しました。範囲が自動で変わっても、どこを探しているのかを利用者が確認できます。
投稿・固定ページとコメントを分けて表示する
検索結果画面は、一つの一覧へすべてを混ぜず、「投稿・固定ページ」と「コメント」の二つに分けました。
投稿・固定ページの結果には、種類、タイトル、本文の一部を表示します。タイトルを選ぶと対象ページへ移動でき、結果が多い場合はページを切り替えられます。
コメントの結果には、「コメント」という種類、コメントが付いた投稿のタイトル、コメント本文の一部、投稿者名、日付を表示します。タイトルのリンク先には該当コメントの位置が含まれるため、投稿ページを開いた後にコメントまで移動できます。
検索欄へキーワードを入力 ↓ 検索範囲を引き継いで実行 ↓ 投稿・固定ページ / コメントを分けて表示 ↓ 該当するページまたはコメントへ移動
検索結果の本文とコメントは長く表示しすぎず、内容の一部を抜粋します。抜粋は、元の本文から検索結果用に短く切り出した文章です。検索した言葉は黄色で強調し、なぜその結果が表示されたのか分かるようにしました。
コメントも独自に検索する
WordPressの標準検索は、通常は投稿や固定ページを対象にします。しかし、今回の社内ポータルでは、STEP 06でコメントにも補足や対応結果を残せるようにしました。投稿だけを検索しても、コメントにしかない情報は見つかりません。
そのため、search.phpでコメントを別に取得しています。入力されたキーワードをコメント全文から探し、サイト全体の検索では全公開投稿のコメント、カテゴリー検索ではそのカテゴリーに属する投稿のコメントだけを対象にします。
投稿検索とコメント検索は別の処理ですが、同じ検索語と同じ検索範囲を使い、一つの結果画面へまとめました。利用者は検索先の違いを意識せず、蓄積された情報を横断して探せます。
見つからない場合も結果を明確にする
検索語に一致する内容がない場合は、空の一覧だけを表示せず、「一致する投稿・固定ページはありません」「一致するコメントはありません」と、それぞれの欄へ表示します。
投稿には一致しないがコメントには一致する場合や、その逆もあります。二つを分けて結果を示すことで、どの対象で見つからなかったのかを判断できます。
検索範囲も結果画面へ表示するため、カテゴリー内で見つからないときに「サイト全体を探した結果」と誤解しにくくなりました。
検索の流れをPCとスマートフォンで確認する
実装後は、次の流れを確認しました。
- HOMEから検索すると「サイト全体」が検索範囲になる
- カテゴリーと投稿ページでは、対象カテゴリー名が検索範囲に表示される
- キーワードに一致する投稿・固定ページとコメントが別々に表示される
- 検索した言葉がタイトル、抜粋、コメント内で強調される
- 検索結果のリンクから対象ページや該当コメントへ移動できる
- 一致する内容がない場合に、対象ごとの案内が表示される
- PCとスマートフォンで検索欄と結果が画面からはみ出さない
スマートフォンではヘッダー内の要素を縦に並べ、検索フォームを画面幅に合わせます。PCではヘッダー右側へ配置し、ナビゲーションの高さを増やしすぎない構成にしました。
検索を作って分かったこと
社内情報は、保存できるだけでは十分ではありません。投稿やコメントが増えるほど、必要なときに見つけられることが価値になります。
ナビゲーションは情報の場所を整理し、検索は覚えている言葉から情報へ戻るための仕組みです。役割を分けたことで、日常的に見る情報と、過去から探す情報の両方へ進めるようになりました。
また、WordPressの標準検索を土台にすれば、検索の仕組みをすべて最初から作る必要はありません。コメント検索と範囲表示を必要な分だけ足すことで、今回の社内ポータルに合う検索へ調整できました。
次は繰り返す作業を仕組みにする
投稿とコメントを蓄積し、検索で必要な情報を探せるようになりました。次に見えてきたのは、投稿のたびに繰り返している入力や判断です。
STEP 08では、日付と時間帯から投稿タイトルを自動生成し、カテゴリーを設定して、同じ投稿の重複も確認する仕組みを作ります。
← STEP 06「社内ポータルで投稿とコメントを使う。情報共有とやり取りの仕組みを作る。」
PROJECT 002の記事一覧を見る
NEXT → STEP 08「社内ポータルの作業を自動化する。繰り返す操作をWordPressに任せてみる。」