クラシックテーマの検索フォームと検索結果ページを作ります。
入力語をフォームに残し、未入力・結果なし・複数ページを分けます。
既存テーマを直接書き換える前に、検証用の自作テーマで確認してください。
searchform.php
作業前にsearchform.php・search.php・header.php・functions.phpの既存ファイルを保存し、新規作成するファイル名も控えます。
自作テーマのフォルダーにsearchform.phpを保存します。
ラベルの中に入力欄を置くため、同じページにフォームを複数配置してもIDが重複しません。
<form role="search" method="get" class="searchForm" action="<?php echo esc_url(home_url('/')); ?>">
<label>検索キーワード
<input type="search" name="s" value="<?php echo esc_attr(get_search_query(false)); ?>" placeholder="キーワードを入力">
</label>
<button type="submit">検索</button>
</form>フォームを表示したいheader.phpなどのbody内で次を呼びます。
<?php get_search_form(); ?>search.php
検索結果を表示するsearch.phpを同じフォルダーへ保存します。
検索語はWordPressのAPIから取得し、出力先に合わせてエスケープします。
半角・全角スペースだけの入力も空欄として扱うため、preg_match()で空白以外の文字があるかを判定しています。
隔離したWordPress環境では、全角スペースだけの検索は入力を促す表示になり、通常の検索語は一致する記事を表示することを確認しました。
<?php get_header(); ?>
<main id="main-content" class="main-content">
<h1 class="title"><?php echo esc_html(get_search_query(false)); ?> の検索結果</h1>
<?php get_search_form(); ?>
<?php if (preg_match('/[^\s\p{Z}]/u', get_search_query(false)) !== 1) : ?>
<p>検索キーワードを入力してください。</p>
<?php else : ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<article>
<h2 class="title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php if (has_post_thumbnail()) : ?><figure class="thumbnail"><?php the_post_thumbnail(); ?></figure><?php endif; ?>
<div class="excerpt"><?php the_excerpt(); ?></div>
</article>
<?php endwhile; ?>
<?php the_posts_pagination(['prev_text'=>'前へ', 'next_text'=>'次へ']); ?>
<?php else : ?><p>表示できる記事がありません。</p><?php endif; ?>
<?php endif; ?>
</main>
<?php get_footer(); ?>投稿だけを検索する場合
投稿と固定ページの両方を検索するなら追加は不要です。
投稿だけへ限定したい場合に限り、functions.phpのPHP領域へ次を追加します。
管理画面とサブクエリは対象外です。
旧search_filter関数とフックがある場合は、その原本を保存してから外してください。
下のコードは既存のPHP開始タグの内側へ1回だけ追加します。
対象クエリを絞る条件はpre_get_postsの公式資料も参照してください。
add_action('pre_get_posts', function ($query) {
if (!is_admin() && $query->is_main_query() && $query->is_search()) {
$query->set('post_type', 'post');
}
});検索結果の状態ごとに確認する
| 入力・操作 | 確認する表示 |
|---|---|
| 検索語あり・結果3件・1ページ2件 | 1ページ目2件、2ページ目1件。ページ送り先にも検索語が残る |
| 該当しない検索語 | 「表示できる記事がありません。」と表示し、記事を出さない |
| 検索語が空、または半角・全角スペースだけ | 「検索キーワードを入力してください。」と表示する |
| 引用符・&・山括弧を含む検索語 | フォームの属性としてエスケープされ、入力欄が壊れない |
検索語が消えて2ページ目の一覧へ移動する場合は、独自のページ送りURLを追加していないか確認します。
この例ではWordPressのthe_posts_pagination()を使います。
結果なしと未入力を同じ文言にせず、次に検索語を変えるべきか入力すべきかを読者が判断できるようにします。
検証用のクラシックテーマでWordPressの実クエリによる結果HTMLを確認したうえで、今回ブラウザーでの入力・送信と番号リンクのEnter操作も確認しました。
PC幅1280pxとスマホ幅390pxの実画面で確認した範囲は次の手順に記載します。
導入先テーマ独自のCSSやすべての端末での表示を保証するものではありません。
検索語を保持して結果の2ページ目へ進む
実際の検索フォームへ「検証検索」を入力し、Tabで検索ボタンへ移動してEnterで送信しました。
結果3件・1ページ2件の条件で、番号「2」をEnterで開くと残り1件を表示し、入力欄にも検索語が残りました。
番号「1」から元の結果一覧へ戻れます。
「& 記号」もフォームから送信し、入力欄に同じ文字が残ることと、該当する1件だけがmain内に出ることを確認しました。
空欄は「検索キーワードを入力してください。」、0件は「表示できる記事がありません。」と分かれ、いずれも実HTTPの結果は200でした。
画像はスマホ幅390pxの2ページ目です。
main内の検索フォームとサイドバー内の標準検索ウィジェットが両方あります。
操作対象を混同せず、main内の検索語と番号リンクを確認します。
フォームと番号リンクに独自URLを足す前に、掲載コードのaction、入力値、the_posts_pagination()がそのまま残っているか比較してください。
再検索とページ送りで検索範囲を確かめる
このsearchform.phpは、サイトのトップURLへ検索語sだけを送ります。
タグ一覧や月別一覧からフォームを表示しても、その分類・月へ自動的に検索を限定する仕組みはありません。
配置する画面が変わっても、掲載コードはサイト全体を検索するフォームです。
タグ条件を付けた検索URLを検証環境で開くと、番号リンクには検索語とタグ条件が残りました。
一方、main内のフォームで同じ検索語を入れ直してTab、Enterで送信すると、URLからタグ条件が外れ、sだけになりました。
ページ送りは現在の条件を引き継ぎますが、フォームからの再検索はフォームにある項目だけを送ります。
分類内検索を追加する場合は、許可する分類と入力値の扱いを別に設計し、検索対象外の記事が出ないか確認します。
この例へ現在のURLのパラメーターを丸ごと追加しないでください。
標準のフォーム構成はget_search_form()の公式資料も参照できます。
2026年10月3日、WordPress 7.1.2の自作テーマで再検索を確認しました。
戻す場合はsearchform.phpを変更前へ戻し、任意で加えた分類条件の処理も外します。
投稿だけに限定するか、固定ページや制作事例も探すかを決める
| 同じ検索語の条件 | 隔離環境の結果 | 用途 |
|---|---|---|
| 投稿限定の追加コードなし | 通常投稿1件・固定ページ1件・制作事例2件 | 検索対象として登録された複数の投稿タイプを探す |
| 投稿限定の追加コードあり | 通常投稿1件のみ | 通常の投稿記事だけを探す |
search.phpは検索結果の表示を担当し、投稿だけに限定する追加PHPは検索対象を変更します。
表示テンプレートを用意しただけで、検索対象が通常投稿だけになるわけではありません。
制作事例などのカスタム投稿タイプや固定ページも結果に出したい場合は、投稿限定の追加コードを使わない構成を選びます。
隔離環境で検索対象の制作事例を登録し、同じ検索語で比較したところ、追加コードなしでは4件、ありでは通常投稿の1件になりました。
投稿限定時の結果リンクはEnterで開けました。
カスタム投稿タイプが検索対象になるかは、その投稿タイプの登録設定にも依存するため、上表の件数がすべてのサイトに当てはまるものではありません。
追加コードを導入する前に、通常投稿・固定ページ・カスタム投稿タイプに同じ検証語を入れ、期待する対象が結果に残るか確かめてください。
投稿限定が不要になったら、そのフィルターだけを停止し、保存した検索テンプレートは必要に応じて維持できます。
画像では記事のsearch.phpとsearchform.phpを子テーマ側で動かし、ヘッダーとフッターに隔離環境のSWELLを使っています。
自作テーマ全体の表示、実サイトの検索設定やプラグインとの組み合わせを確認した画面ではありません。
確認と戻し方
キーワードあり・空欄・0件・2ページ以上で確認します。
引用符や&を含む語がフォームに戻ること、Tabで入力欄と検索ボタンへ移動できること、Enterで送信できることをPC・スマホで確認してください。
ページ送りのscreen-reader-textは削除せず、一覧記事のCSSを使います。
検索結果テンプレートの分岐は結果表示を変えるもので、検索負荷の制限機能ではありません。
解除する場合はsearchform.php・search.php・header.php・functions.phpを変更前へ戻します。
新規作成した検索テンプレートは取り除き、header.phpへ追加した呼び出しと任意のpre_get_postsフックも元へ戻してください。
置き換える前の検索フィルターがあった場合は、その内容も復元します。
旧GitHubサンプルとは同期していません。
関連手順：WordPress自作テーマ制作⑧│見た目（style.css）の作成
よくある質問：WordPress自作テーマで検索結果ページを作成するとき
検索フォームは、どこに保存しますか？
自作テーマのフォルダーにsearchform.phpを保存し、フォームを表示したいheader.phpなどのbody内で呼びます。
記事では、ラベルの中に入力欄を置くため、同じページにフォームを複数配置してもIDが重複しません。
検索結果ページは、どのファイルですか？
search.phpを同じフォルダーへ保存します。
記事では、検索語はWordPressのAPIから取得し、出力先に合わせてエスケープします。
既存テーマを直接書き換える前に、検証用の自作テーマで確認してください。
空欄や全角スペースだけで検索したときは？
記事では、半角・全角スペースだけの入力も空欄として扱い、「検索キーワードを入力してください。」と表示します。
該当する記事がない場合は「表示できる記事がありません。」と表示し、記事は出しません。
検索対象を、投稿だけに限定できますか？
できます。
記事では、投稿と固定ページの両方を検索するなら追加は不要で、投稿だけへ限定したい場合に限り、functions.phpのPHP領域へ追加します。
管理画面とサブクエリは対象外で、旧search_filter関数とフックがある場合は先に外します。
検索結果が複数ページのとき、検索語は残りますか？
残ります。
記事では、結果3件・1ページ2件の条件で、番号「2」を開くと残り1件を表示し、入力欄にも検索語が残りました。
番号「1」から元の結果一覧へ戻れます。
タグ一覧や月別一覧に置いたフォームは、その分類内だけを検索しますか？
しません。
記事では、このsearchform.phpはサイトのトップURLへ検索語sだけを送るため、配置する画面が変わっても、掲載コードはサイト全体を検索するフォームです。
ページ送りは現在の条件を引き継ぎますが、フォームからの再検索はフォームにある項目だけを送ります。
分類内検索を追加する場合は、許可する分類と入力値の扱いを別に設計し、現在のURLのパラメーターを丸ごと追加しないでください。
フォームに独自のURLを足すときの注意点は？
記事では、フォームと番号リンクに独自URLを足す前に、掲載コードのaction、入力値、the_posts_pagination()がそのまま残っているか比較します。
ページ送りのscreen-reader-textは削除せず、一覧記事のCSSを使います。
検索の負荷を抑える機能ですか？
いいえ。
記事では、検索結果テンプレートの分岐は結果表示を変えるもので、検索負荷の制限機能ではありません。
元に戻すには、どうしますか？
変更したsearchform.php・search.php・header.php・functions.phpを保存した原本へ戻します。
新規作成したファイルは取り除き、追加した呼び出しと投稿限定フックを戻します。
既存の検索フィルターを置き換えた場合は、その元の処理も復元してください。
どこまで動作確認されていますか？
記事では、2026年10月3日に隔離したWordPress 7.1.2 / SWELL 2.19.0で、検索語あり・空欄・0件・複数ページを確認し、スマホ幅390pxの実画面で確認した範囲を記載しています。
導入先テーマ独自のCSS、すべての端末での表示、実サイトの検索設定やプラグインとの組み合わせは確認していません。
