WordPressの検索画面を整える。検索入口・結果・見つからない場合を分けて考える

2026年10月7日

WEB

サイト内検索は、検索欄を置けば完成するものだと思っていました。しかし、社内ポータルを実際に作ってみると、入力する場所、検索する範囲、結果の見せ方、見つからなかったときの案内までがつながっていないと、必要な情報には戻れません。

今回はWordPressの標準検索を土台に、投稿とコメントを探せる画面を作りました。この記事ではコードの細部ではなく、検索を一つの操作の流れとして整えたときに考えたことをまとめます。

検索は、入力欄からリンク先まで続いている

検索画面を考えるとき、最初は検索フォームと結果一覧に目が向きました。実際に必要だったのは、もう少し長い流れです。

検索欄を見つける
↓
キーワードを入力する
↓
どの範囲を探したか分かる
↓
結果を見分ける
↓
目的の場所へ移動する
↓
見つからない場合は次の行動を考える

途中の一つが分かりにくいと、検索できても使いにくくなります。そこで今回は、検索欄だけを部品として作るのではなく、入力から移動までを一つの導線として確認しました。

検索欄は、サイトのヘッダー右上へ置きました。どのページを見ていても同じ位置から使え、情報の場所が分からないときに戻って探せるようにするためです。

当初は検索欄とメニューが同じ領域を使い、ヘッダー全体が高くなっていました。そこで利用者名やログイン操作と同じ上段へ検索欄を移し、ナビゲーションを下段へ分けました。検索を見つけやすくしながら、メニューの高さを増やしすぎない配置です。

入力欄には「投稿・コメントを検索」と表示しました。「検索」だけでは対象が分かりません。何を探せるかを入口で伝えることで、コメントに残した情報も対象になると分かります。

サイト全体の検索だけでは、情報が増えたときに関係の薄い結果が混ざります。一方で、毎回細かな条件を選ぶ画面にすると操作が増えます。

今回の社内ポータルでは、開いている場所に合わせて検索範囲を変えました。

検索欄の近くには、「検索範囲：サイト全体」またはカテゴリー名を表示しました。システムが自動で範囲を決めても、利用者にはその結果が見えるようにします。

この表示があると、カテゴリー内で見つからなかったときに、サイト全体も検索したと誤解しにくくなります。必要ならHOMEへ戻って範囲を広げる、という次の判断もできます。

検索結果には、投稿・固定ページとコメントという性質の違う情報が出ます。すべてを同じ一覧へ混ぜず、二つの欄に分けました。

結果の種類	画面に出す情報	移動先
投稿・固定ページ	種類、タイトル、本文の一部	対象ページ
コメント	投稿タイトル、コメントの一部、投稿者名、日付	対象投稿内のコメント位置

本文やコメントを全部表示すると、結果一覧が長くなります。そこで内容の一部だけを抜き出し、検索した言葉を強調しました。なぜその結果が表示されたかを、一覧の時点で判断しやすくするためです。

コメントの結果では、投稿ページを開くだけでなく、該当コメントの位置へ移動できるリンクにしました。検索結果が入口で終わらず、探していた情報の場所までつながります。

一致する内容がない場合、空の一覧だけでは検索が終わったのか、読み込みに失敗したのか分かりません。

そこで、「一致する投稿・固定ページはありません」「一致するコメントはありません」と、対象ごとに案内を出しました。投稿にはなくてもコメントにはある場合があるため、二つの検索結果を別々に示します。

検索範囲も同じ画面に残しています。見つからないという結果と、どこを探した結果なのかを組み合わせることで、キーワードを変えるか、範囲を広げるかを判断できます。

実装後は、検索欄が表示されたことだけで完了にしませんでした。実際の利用順に、次を確認しました。

PCでは検索欄をヘッダー右上へ置き、スマートフォンでは周囲の要素と重ならないよう縦に並べました。画面幅が変わっても、入力、結果確認、移動という順番は変えません。

検索は、キーワードに一致するデータを返すだけの機能ではありません。利用者が入口を見つけ、対象範囲を理解し、結果を見分け、目的の場所へ移動できるところまでが検索の使い勝手です。

この順番で見直したことで、検索欄は単独の部品ではなく、蓄積した情報へ戻るための導線になりました。

今回の検索を社内ポータルへ実装した過程と、投稿・コメントを対象にした仕組みは、PROJECT 002 STEP 07「社内ポータルに検索を作る」で詳しく記録しています。