WordPressの検索結果ページは、デフォルトではsearch.phpまたはindex.phpのテンプレートを使って一覧を表示します。しかしそのままでは自由度が低く、ユーザー体験やSEOの観点で物足りない場合があります。ここでは検索結果ページをカスタマイズする方法を条件分岐とテンプレート編集の両面から解説します。
検索結果ページ用テンプレートの作成
検索結果ページを独自にデザインしたい場合は、テーマ直下にsearch.phpを作成します。WordPressは検索結果ページにアクセスすると自動的にsearch.phpを探して読み込みます。
<?php get_header(); ?>
<main class="search-results">
<h1>検索結果：<?php echo get_search_query(); ?></h1>
<?php if (have_posts()): ?>
<ul class="result-list">
<?php while (have_posts()): the_post(); ?>
<li>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</li>
<?php endwhile; ?>
</ul>
<?php else: ?>
<p>該当する記事は見つかりませんでした。</p>
<?php endif; ?>
</main>
<?php get_footer(); ?>
条件分岐で表示を切り替える
検索結果に特定の投稿タイプやカテゴリーだけを表示したい場合は、functions.phpでpre_get_postsを使います。
<?php
// 検索結果から固定ページを除外し、投稿のみ表示
add_action('pre_get_posts', function ($query) {
if ($query->is_search() && $query->is_main_query() && !is_admin()) {
$query->set('post_type', 'post');
}
});
また、条件分岐タグを使って検索結果ページに特定のメッセージを出すことも可能です。
<?php if (is_search() && !have_posts()): ?>
<p>「<?php echo get_search_query(); ?>」に一致する記事はありませんでした。</p>
<?php endif; ?>
検索結果を強調表示する
検索キーワードに一致した部分をハイライト表示すれば、ユーザーが探している情報を見つけやすくなります。
<?php
function highlight_search_term($text) {
if (is_search()) {
$query = get_search_query();
if ($query) {
$text = preg_replace('/(' . preg_quote($query, '/') . ')/iu', '<mark>$1</mark>', $text);
}
}
return $text;
}
add_filter('the_title', 'highlight_search_term');
add_filter('the_excerpt', 'highlight_search_term');
ページネーションの追加
検索結果が多い場合はページネーションを設置してユーザーが移動しやすくすることが重要です。
<div class="pagination">
<?php the_posts_pagination(array(
'mid_size' => 2,
'prev_text' => '≪ 前へ',
'next_text' => '次へ ≫',
)); ?>
</div>
まとめ
WordPressの検索結果ページはsearch.phpを編集するだけで独自のデザインに変更できます。さらにpre_get_postsを使えば表示対象を絞り込め、キーワードの強調表示やページネーションを追加すればユーザー体験が向上します。テンプレート編集と条件分岐を組み合わせて、自分のサイトに最適化された検索結果ページを実装しましょう。
