9. 検索結果ページ＋404ページを作る

こんにちは！フリーランスエンジニア兼ディレクターのショーヘー（@showheyohtaki）です。

この記事は、Web制作初心者のかた向けに『実務で使えるWordPressを使ったサイト制作手法』ついて解説していく連載です。

前回の記事はこちら↓

9thステップであるこの記事では、検索結果ページと404ページをの作り方を解説していきます。

1. 404ページを作る

記事を消した、記事URLを変更した、ユーザーの入力ミスなど、様々な要因で存在しないページをリクエストされることがあります。

そんな時に「リクエストされたページは存在しませんよ」と明示的に示すため表示するのが404ページです。

作り方の手順は、これまでの知識を使って404.htmlをほぼそのままテンプレート化するだけなので、解説なしでも簡単だと思います。

ぜひ自力で作成してみてください👍

答え合わせ用に作成例コードを貼っておきます。

コピー
<?php get_header(); ?>

<!-- content -->
<div id="content" class="m_one m_404">
<div class="inner">

<!-- primary -->
<main id="primary">

<!-- entry -->
<div class="entry-404">
<h1 class="entry-404-head"><span>404</span>Not Found</h1><!-- /entry-404-head -->
<div class="entry-404-lead">お探しのページが<br class="m_sp" />見つかりませんでした</div><!-- /entry-404-head -->
<p class="entry-404-content">申し訳ありませんが、お探しのページが存在しないか、アクセスできません。<br>入力されたURLが正しいかご確認ください。</p>
<!-- /entry-404-content -->
<div class="entry-404-btn"><a class="btn" href="<?php echo home_url(); ?>">トップページに戻る</a></div><!-- /entry-404-btn -->
</div><!-- /entry-404 -->

</main><!-- /primary -->

<?php get_sidebar(); ?>

</div><!-- /inner -->
</div><!-- /content -->

<?php get_footer(); ?>

get_header、get_footer、get_sidebarで基本の型を作る流れは、もう迷わなくなったんじゃないでしょうか。

作り終えたら、試しに存在しないURLを入力して、ちゃんと404ページが表示されるかチェックしてくださいね！

これで404も完成したので、最後のテンプレート『search.php』を作っていきます。

2. search.phpで検索結果ページを作る

またテンプレート階層に立ち返りますが、検索結果を表示するためのテンプレートは『search.php』です。

検索キーワードが含まれた記事を一覧形式で表示してみましょう。

こちらもほぼこれまでの復習です。archive.phpを思い出しながら書いてみてください。

コピー

<?php get_header(); ?>

<!-- content -->
<div id="content">
<div class="inner">

<!-- primary -->
<main id="primary">

<!-- breadcrumb -->
<div class="breadcrumb">
<?php bcn_display(); ?>
</div><!-- /breadcrumb -->

<div class="archive-head">
<div class="archive-lead">SEARCH</div>
<h1 class="archive-title m_search"><span>"<?php the_search_query(); ?>"</span>の検索結果：<?php echo $wp_query->found_posts; ?>件</h1>
</div><!-- /archive-head -->

<?php
//記事があればentriesブロック以下を表示
if (have_posts() ) :
?>
<!-- entries -->
<div class="entries m_horizontal">
<?php
//記事数ぶんループ
while ( have_posts() ) :
the_post();
?>

<!-- entry-item -->
<a href="<?php the_permalink(); //記事のリンクを表示 ?>" class="entry-item">
<!-- entry-item-img -->
<div class="entry-item-img">
<?php
if (has_post_thumbnail() ) {
// アイキャッチ画像が設定されてれば大サイズで表示
the_post_thumbnail('large');
} else {
// なければnoimage画像をデフォルトで表示
echo '<img src="' . esc_url(get_template_directory_uri()) . '/img/noimg.png" alt="">';
}
?>
</div><!-- /entry-item-img -->

<!-- entry-item-body -->
<div class="entry-item-body">
<div class="entry-item-meta">
<?php
// カテゴリー１つ目の名前を表示
$category = get_the_category();
if ($category[0] ) {
echo '<div class="entry-item-tag">' . $category[0]->cat_name . '</div><!-- /entry-item-tag -->';
}
?>
<!-- 公開日時を動的に表示する -->
<time class="entry-item-published" datetime="<?php the_time('c'); ?>"><?php the_time('Y/n/j'); ?></time><!-- /entry-item-published -->
</div><!-- /entry-item-meta -->
<h2 class="entry-item-title"><?php the_title(); //タイトルを表示 ?></h2><!-- /entry-item-title -->
<div class="entry-item-excerpt">
<?php the_excerpt(); //抜粋を表示 ?>
</div><!-- /entry-item-excerpt -->
</div><!-- /entry-item-body -->
</a><!-- /entry-item -->
<?php
endwhile;
?>

</div><!-- /entries -->
<?php endif; ?>

<?php get_template_part('template-parts/pagenation'); ?>

</main><!-- /primary -->

<?php get_sidebar(); ?>

</div><!-- /inner -->
</div><!-- /content -->

<?php get_footer(); ?>

archive.phpと違うのは、上に挙げたキーワードくらいです。

wp_queryは重要かつ使用頻度も高いので、公式サイトや書籍で使い方をよく確認しておいてください。

公式：関数リファレンス/WP Query

ここではwp_queryのプロパティを使って、該当件数を表示しています。

search.phpが完成したら、サイドバーの検索窓からキーワードを入力し、正しく表示されてるか確認してください👍

カスタマイズ編：検索結果から固定ページを除外する

WordPressの初期設定では、検索対象には投稿と固定ページの両方が入っています。

あるキーワードの記事を読みたいと思って検索したのに、もし会社概要や利用規約などの固定ページが先に表示されてしまったら、せっかく興味を持ってくれたユーザーが離脱しかねませんよね。

そのため、実案件でも固定ページは検索対象から除外することが多いです。

固定ページを除外するためのコードは、functions.phpに記述します。

コピー


/**

* 検索結果から固定ページを除外する

* @param string $search SQLのWHERE句の検索条件文

* @param object $wp_query WP_Queryのオブジェクト

* @return string $search 条件追加後の検索条件文

*/
function my_posts_search( $search, $wp_query ){
  //検索結果ページ・メインクエリ・管理画面以外の3つの条件が揃った場合
if ( $wp_query->is_search() && $wp_query->is_main_query() && !is_admin() ){
    // 検索結果を投稿タイプに絞る
  $search .= " AND post_type = 'post' ";
  return $search;
}
  return $search;
}
add_filter('posts_search','my_posts_search', 10, 2);

これで検索結果に固定ページは含まれなくなったはずです。今ある固定ページのタイトルを入れてみましょう。

Before：『サンプル』と入力すると固定ページ『サンプルページ』がヒット

After：検索結果に固定ページが表示されなくなった

『検索結果：０件』になってればOKです👍

ぜひ実案件でも使ってください！

それでは、お疲れ様でした☺️