サイト内検索は、目的の記事へたどり着くための入口です。検索結果が0件のときやURLが間違っているときも、行き止まりにせず次の移動先を示します。
WordPressは検索結果にsearch.php、存在しないURLに404.phpを使います。ファイルがない場合はテンプレート階層に従って別のファイルへ移ります。
検索フォームを表示する
WordPress標準の検索フォームはget_search_form()で表示できます。テーマ内にsearchform.phpを置くとHTMLを調整できます。
次の画像は、「検索フォームを表示する」で扱うコードや構成をブラウザで表示した結果です。
<form role="search" method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<label for="site-search">サイト内を検索</label>
<div class="search-form__row">
<input id="site-search" name="s" type="search" value="<?php echo esc_attr( get_search_query() ); ?>">
<button type="submit">検索</button>
</div>
</form>検索欄の名前はsです。検索語をvalueへ戻すときもesc_attr()で属性用にエスケープします。
検索結果テンプレートを作る
検索結果がある場合は、検索語、記事タイトル、概要、詳細ページへのリンクを表示します。
一致する記事がない場合も、状況の説明と次の検索手段を表示します。
<?php get_header(); ?>
<main id="main">
<h1>「<?php echo esc_html( get_search_query() ); ?>」の検索結果</h1>
<?php if ( have_posts() ) : ?>
<ul class="search-results">
<?php while ( have_posts() ) : ?>
<?php the_post(); ?>
<li>
<a href="<?php the_permalink(); ?>"><?php echo esc_html( get_the_title() ); ?></a>
<p><?php echo esc_html( get_the_excerpt() ); ?></p>
</li>
<?php endwhile; ?>
</ul>
<?php the_posts_pagination(); ?>
<?php else : ?>
<p>条件に一致する記事は見つかりませんでした。別の言葉で検索してください。</p>
<?php get_search_form(); ?>
<?php endif; ?>
</main>
<?php get_footer(); ?>検索結果ではページネーションも確認します。記事数が少ない状態だけでは、2ページ目以降の不具合に気付けません。
404ページから移動できるようにする
404ページを行き止まりにせず、トップページや検索へ移動できる案内を置きます。
<?php get_header(); ?>
<main id="main" class="not-found">
<h1>ページが見つかりませんでした</h1>
<p>URLが変更されたか、入力したURLが間違っている可能性があります。</p>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">トップページへ戻る</a>
<?php get_search_form(); ?>
</main>
<?php get_footer(); ?>404ページには、状況の説明、トップページへのリンク、検索などを置きます。存在しない内容を正常ページのように見せず、HTTPステータスが404になっていることもNetworkで確認します。
検索と404をテストする
- 記事タイトルに含まれる語で検索する
- 一致しない語で検索する
- 記号や長い検索語を入力する
- 検索結果が複数ページになる件数で移動する
- 存在しないURLを開き、404ページとステータスを確認する
- スマートフォンとキーボードで検索フォームを操作する