この章で学ぶこと

前回は、カスタム投稿用のアーカイブテンプレートを追加することで、制作実績が反映するようになりました。こちらの講座は、DAY.6の続きです。必ずDAY.1から開始し、順番に進めてくださいね。▶︎ DAY.6は、こちらからいよいよこの章で完成となります。細かいパーツを設置してみましょう。

この章では、WordPressの検索フォームを設置します。

WordPressでは、検索フォーム専用のテンプレートとして searchform.php を作成することもできますが、今回は検索フォームを表示したい場所へ直接コードを記述する方法で進めます。

設置した検索フォームからキーワードを入力すると、WordPressが検索結果ページ（search.php）へ自動的に移動し、該当する記事を一覧表示してくれます。

検索フォームを設置する

まずは、以下のコードをコピーして、headerへ貼り付けましょう。

<form class="search-form" role="search" method="get" action="<?php echo esc_url(home_url('/')); ?>">
  <input type="search" name="s" placeholder="キーワード検索">
  <button type="submit" aria-label="検索"></button>
</form>

このコードでは、method="get"で検索キーワードを送信し、actionにはサイトのトップページURLを指定しています。

WordPressでは、入力された検索キーワードが**s**という名前で送信される仕組みになっています。

<input type=”search” name=”s”>
このname="s"はWordPressの決まりになっているため、別の名前に変更すると検索が動作しなくなるので注意しましょう。

search.phpを作成する

次に、テーマフォルダーにsearch.phpを作成します。search.phpは、検索結果を表示するためのテンプレートファイルです。最初は難しく考えず、一覧ページを表示するarchive.phpの内容をコピーして作成して構いません。すでにある「archive.php」をコピーし、「search.php」として複製させましょう。検索結果も「記事一覧」を表示する仕組みなので、アーカイブページとほぼ同じレイアウトで利用できます。

動作を確認する

ブラウザで検索フォームにキーワードを入力し、検索ボタンをクリックしてみましょう。入力したキーワードを含む記事が一覧表示されれば成功です。

検索結果が0件の場合は、「該当する記事はありませんでした。」などのメッセージを表示すると、ユーザーにとって親切なサイトになります。

404エラーページ（404.php）

404エラーページ（404.php）を作成します。404ページとは、存在しないURLへアクセスしたときに表示されるページです。

例えば、

URLの入力を間違えた
削除された記事へアクセスした
古いリンクをクリックした

このような場合に、WordPressは404エラーを返します。何も用意していない場合は味気ないエラーページが表示されてしまうため、オリジナルの404ページを作成しておくことで、ユーザーをトップページへ案内できるようになります。

404.phpを作成する

テーマフォルダーに404.phpを作成し、以下のコードを入力しましょう。

<?php get_header(); ?>

<div class="main">
  <div id="container" class="wrapper">
    <main>

      <h2 class="pageTitle">404 NOT FOUND</h2>

      <p>お探しのページが見つかりませんでした。</p>

      <p>
        申し訳ございませんが、
        <b><a href="<?php echo home_url('/'); ?>">こちらのリンク</a>から</b>
        トップページへお戻りください。
      </p>

    </main>
  </div>
</div>

<?php get_footer(); ?>

まずは通常のページと同じように、ヘッダーとフッターを読み込むことにより、サイト全体のデザインと統一されたレイアウトになります。「ページがありません」で終わるのではなく、「こちらからトップページへどうぞ」と案内することも、WebデザインやUIの一部です。