【現在3000名】無料のフリーランスコミュニティ『東フリサロン』はこちらからどうぞ!

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

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

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

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

前回の記事はこちら↓

8. 実践!サイドバーの作り方2パターン紹介

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を思い出しながら書いてみてください。

キーワード

  • the_search_query( )
  • $wp_query->found_posts

コピー

<?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
// カテゴリー1つ目の名前を表示
$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);

Progateで学んだSQLが少しだけ出てきましたね!

「WHERE句ってなんのこと?」「ANDの意味がわからない」という方は、ProgateのSQLコースを復習してください。

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

 

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

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

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

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

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

30DAYSトライアルのコンテンツは、皆様からのサポートで運営しています。

今後も良質なコンテンツを作成していきますので、よろしければサポートをお願いいたします。

サポート特典として、【コーディング練習用デザインカンプ】をメールアドレスにお送りします。


LINE@にて限定情報公開中!

CTA-IMAGE 『転職したい!』 『理想的なライフスタイルを実現したい!』 『フリーランスになりたい!』 そういう要望を持っている方向けに、週に1度リアルなお役立ち情報を配信しています。 登録すれば、LINE@限定「最短でプログラマーになるための転職ロードマップ」も確認できます!

WordPressカテゴリの最新記事