閉じる

WordPress検索結果ページ(search.php)をカスタマイズする方法：表示改善と機能拡張の実装手順

広告

WordPressサイトを運営する上で、ユーザーが目的の情報に素早く辿り着けるかどうかは、サイトの利便性を左右する極めて重要な要素です。

しかし、多くのWordPressテーマにおいて検索結果ページは画一的なデザインになりがちであり、ユーザーにとって必ずしも使いやすいとは言えません。

検索結果ページ（search.php）を適切にカスタマイズすることは、離脱率の低下とコンバージョン率の向上に直結します。

本記事では、WordPressのテンプレート階層における search.php の役割から、具体的なコードを用いた表示改善、さらには検索精度の向上といった機能拡張の手順までを詳しく解説します。

目次 [ close ]
  1. WordPress検索エンジンの仕組みとsearch.phpの役割
    1. テンプレート階層における優先順位
    2. 検索クエリの処理プロセス
  2. search.phpの基本的な作成手順
    1. 最小構成のコード例
  3. 表示内容の改善：検索キーワードとヒット件数の表示
    1. 検索キーワードの安全な表示
    2. 検索ヒット件数の取得
  4. UXを高める検索結果一覧のデザインカスタマイズ
    1. 抜粋文の最適化とキーワードのハイライト
    2. サムネイル画像の活用
  5. 高度な機能拡張：検索対象の制限とソート機能
    1. 検索対象を「投稿」のみに限定する
    2. 検索結果の並び替え機能
  6. 検索結果が見つからない場合の対応(No Results)
    1. ユーザーを迷わせない代替案の提示
  7. 検索エンジンの負荷軽減と高速化
    1. 検索対象の最適化
    2. キャッシュの活用
  8. まとめ

WordPress検索エンジンの仕組みとsearch.phpの役割

WordPressでサイト内検索が実行されると、システムはまず入力されたクエリをデータベースに照会し、該当する投稿やページを抽出します。

この際、結果を表示するために使用されるテンプレートファイルが search.php です。

テンプレート階層における優先順位

WordPressには「テンプレート階層」というルールがあり、特定のページを表示する際にどのファイルを使用するか優先順位が決まっています。

検索結果ページの場合、優先順位は以下の通りです。

  1. search.php
  2. index.php

もしテーマ内に search.php が存在しない場合は、サイトの基本テンプレートである index.php が代用されます。

しかし、検索結果専用のレイアウトを提供するためには、独立した search.php を作成することが推奨されます。

これにより、検索キーワードの表示やヒット件数の案内など、検索ユーザーに特化した情報提供が可能になります。

検索クエリの処理プロセス

ユーザーが検索フォームからテキストを送信すると、URLには ?s=キーワード というパラメータが付与されます。

WordPressはこの s パラメータを検知すると、自動的に「検索結果を表示する」というモードに切り替わり、メインクエリを発行します。

カスタマイズを行う際は、このメインクエリが保持している情報をいかに効率よく取り出し、ユーザーに見やすい形で整形するかがポイントとなります。

search.phpの基本的な作成手順

まずは、カスタマイズの土台となる標準的な search.php の構造を確認しましょう。

既存のテーマを編集する場合は、まずこのファイルの中身を整理することから始めます。

最小構成のコード例

以下のコードは、検索結果ページとして機能するための最もシンプルなテンプレート構造です。

PHP
<?php
/**
 * search.php
 * 検索結果を表示するためのテンプレートファイル
 */

get_header(); ?>

<section id="primary" class="content-area">
    <main id="main" class="site-main">

        <?php if ( have_posts() ) : ?>

            <header class="page-header">
                <h1 class="page-title">
                    <?php
                    /* 検索キーワードを表示 */
                    printf( '「%s」の検索結果', '<span>' . get_search_query() . '</span>' );
                    ?>
                </h1>
            </header>

            <?php
            /* 検索結果のループ処理 */
            while ( have_posts() ) :
                the_post();
                // 検索結果の個別アイテムを表示するテンプレートパーツ
                get_template_part( 'template-parts/content', 'search' );
            endwhile;

            /* ページネーションの表示 */
            the_posts_pagination();

        <?php else : ?>

            <?php
            /* 検索結果がゼロだった場合の処理 */
            get_template_part( 'template-parts/content', 'none' );
            ?>

        <?php endif; ?>

    </main>
</section>

<?php
get_sidebar();
get_footer();

この基本構造をもとに、各要素をブラッシュアップしていきます。

ポイントは、検索結果が存在する場合と存在しない場合（404に近い状態）の分岐を明確にすることです。

表示内容の改善：検索キーワードとヒット件数の表示

ユーザーが「何を探していて、その結果がいくつ見つかったのか」を一目で理解できるようにすることは、UX（ユーザーエクスペリエンス）デザインの基本です。

検索キーワードの安全な表示

get_search_query() 関数を使用することで、ユーザーが入力したキーワードを取得できます。

ただし、セキュリティの観点から、そのまま出力せずにエスケープ処理を行うことが重要です。

PHP
<h1 class="search-result-title">
    検索キーワード：<?php echo esc_html( get_search_query() ); ?>
</h1>

このように esc_html() を通すことで、クロスサイトスクリプティング（XSS）などの脆弱性を防ぐことができます。

検索ヒット件数の取得

「該当する記事が100件あるのか、それとも3件しかないのか」という情報は、ユーザーがその後の行動を決定する判断材料になります。

ヒット件数はグローバル変数の $wp_query から取得可能です。

PHP
<?php
global $wp_query;
$total_results = $wp_query->found_posts;
?>

<p class="search-count">
    合計 <?php echo $total_results; ?> 件の記事が見つかりました。
</p>

found_posts プロパティには、現在の検索条件に一致する全投稿数が格納されています。

これをヘッダー付近に表示することで、情報の網羅性を伝えることができます。

UXを高める検索結果一覧のデザインカスタマイズ

検索結果一覧は、通常のブログ投稿一覧と同じレイアウトでも動作しますが、情報の密度や種類を調整することでさらに使いやすくなります。

抜粋文の最適化とキーワードのハイライト

検索結果には、記事の全文ではなく「抜粋（Excerpt）」を表示するのが一般的です。

WordPressのデフォルトの抜粋は文字数が固定されていますが、検索結果に限り、キーワード周辺の文章を抽出するなどの工夫が考えられます。

また、検索キーワードを太字や背景色で強調（ハイライト）すると、なぜその記事がヒットしたのかが瞬時にわかります。

以下は簡単なハイライト実装の考え方です。

PHP
<?php
function highlight_search_keyword( $text ) {
    if ( is_search() ) {
        $query = get_search_query();
        if ( $query ) {
            // キーワードをcst-boldタグで囲む処理
            $keys = explode( ' ', str_replace( array( '　', ',' ), ' ', $query ) );
            foreach ( $keys as $key ) {
                if ( ! empty( $key ) ) {
                    $text = preg_replace( '/(' . preg_quote( $key, '/' ) . ')/iu', '<span class="search-highlight">$1</span>', $text );
                }
            }
        }
    }
    return $text;
}
// 抜粋やタイトルにフィルターをフックする
add_filter( 'the_title', 'highlight_search_keyword' );
add_filter( 'the_excerpt', 'highlight_search_keyword' );
?>

CSSで .search-highlight に対して背景色を指定すれば、視認性が大幅に向上します。

サムネイル画像の活用

テキストだけの検索結果は味気なく、内容を判断しにくいものです。

アイキャッチ画像（サムネイル）を適切なサイズで表示することで、視覚的なナビゲーションを助けます。

要素推奨されるカスタマイズ内容
タイトル文字サイズを大きくし、クリックしやすくする
サムネイル150x150px程度のスクエアサイズで統一感を出す
投稿日情報の鮮度を示すために表示する
カテゴリどのジャンルの情報か一目でわかるようにバッジ形式で表示

高度な機能拡張：検索対象の制限とソート機能

WordPressの標準検索は、すべての投稿タイプ（投稿、固定ページなど）を対象にします。

しかし、サイトの構成によっては「お知らせ」だけを検索対象にしたい、あるいは「特定のカテゴリ」を除外したいといった要望が出てきます。

検索対象を「投稿」のみに限定する

検索精度を高めるための最も一般的なカスタマイズは、固定ページを検索結果から除外することです。

これを実現するには、functions.php に pre_get_posts アクションフックを追加します。

PHP
/**
 * 検索結果を投稿タイプ 'post' のみに限定する
 */
function filter_search_results( $query ) {
    // 管理画面ではなく、メインクエリであり、検索ページの場合のみ実行
    if ( ! is_admin() && $query->is_main_query() && $query->is_search() ) {
        $query->set( 'post_type', 'post' );
    }
}
add_action( 'pre_get_posts', 'filter_search_results' );

このコードを適用することで、ユーザーが検索した際に固定ページやカスタム投稿タイプが混じることがなくなり、情報の純度を高めることができます。

検索結果の並び替え機能

デフォルトの検索結果は関連度（基本的には日付順に近い挙動）で並んでいますが、ユーザーに「新しい順」「古い順」などの選択肢を提供することも有効です。

以下は、検索結果ページにソート用のリンクを設置する例です。

PHP
<div class="search-sort">
    <a href="<?php echo esc_url( add_query_arg( 'orderby', 'date', $_SERVER['REQUEST_URI'] ) ); ?>">新しい順</a> |
    <a href="<?php echo esc_url( add_query_arg( 'orderby', 'relevance', $_SERVER['REQUEST_URI'] ) ); ?>">関連度順</a>
</div>

このようにクエリパラメータを利用して、動的に表示順序を変更する仕組みを導入することで、利便性はさらに高まります。

検索結果が見つからない場合の対応(No Results)

検索結果が0件だったとき、単に「見つかりませんでした」と表示して終わるのは非常にもったいないことです。

検索結果がゼロであることは、サイト離脱の最大の原因の一つだからです。

ユーザーを迷わせない代替案の提示

else ブロック（検索結果がない場合）には、以下の要素を盛り込むことを検討してください。

  1. 再検索フォームの表示: 別のキーワードで試せるように、中央に大きく検索窓を配置します。
  2. 人気記事のリスト: 検索意図とは異なるかもしれませんが、サイト内の人気コンテンツを紹介して興味を繋ぎ止めます。
  3. カテゴリー一覧: サイトの構造を改めて提示し、手動で探す手助けをします。
PHP
<!-- search.php の else ブロック内 -->
<div class="no-results">
    <h2>申し訳ありません、お探しのキーワードに一致する記事は見つかりませんでした。</h2>
    <p>キーワードを変えて再度検索いただくか、以下のカテゴリーから記事をお探しください。</p>
    
    <?php get_search_form(); ?>

    <h3>人気のカテゴリー</h3>
    <ul>
        <?php wp_list_categories( array( 'title_li' => '', 'number' => 10 ) ); ?>
    </ul>
</div>

このような「おもてなし」の設計が、サイトの回遊率を支える基盤となります。

検索エンジンの負荷軽減と高速化

大規模なサイトや記事数が多いサイトでは、検索処理がサーバーに大きな負荷をかけることがあります。

特に複雑なクエリを発行する場合、レスポンス速度の低下を招きます。

検索対象の最適化

検索対象をタイトルのみに限定したり、特定のタグを検索対象から外したりすることで、SQLクエリを軽量化できます。

また、WP Search Consoleなどのプラグインや外部の検索エンジン（AlgoliaやGoogleカスタム検索など）を導入することも、将来的な拡張性としては有効です。

キャッシュの活用

検索結果はユーザーごとにキーワードが異なるため、ページ全体をキャッシュすることは難しいですが、検索対象となる投稿データのオブジェクトキャッシュを活用することで、データベースへの問い合わせ回数を減らすことができます。

2026年現在のモダンなホスティング環境では、RedisやMemcachedを利用したキャッシュ機構が標準化されているため、これらを有効に活用しましょう。

まとめ

WordPressの検索結果ページ（search.php）は、ユーザーが求める情報に辿り着くための最終的な案内所です。

単に記事の一覧を表示するだけでなく、以下のポイントを意識してカスタマイズを行うことが重要です。

  • 適切なテンプレート階層の理解と、専用の search.php の作成。
  • キーワードの表示、ヒット件数の明示による現状把握の補助。
  • 検索対象の絞り込み（投稿タイプ限定など）による検索精度の向上。
  • 検索結果がゼロだった場合の離脱防止策（再検索・回遊動線）の実装。

これらの改善を積み重ねることで、サイト全体の利便性が向上し、ユーザーにとって価値のあるWebサイトへと進化させることができます。

今回紹介したコードや考え方を参考に、ぜひ自社サイトやクライアントワークでの実装に役立ててください。

クラウドSSLサイトシールは安心の証です。

URLをコピーしました！