検索テンプレートの作成
続いて、検索テンプレートを作成していきましょう。 まずはsearch.phpを作成します。
<?php
get_header('search');
get_template_part('templates/main_contents');
get_footer();
続いて、header-search.phpを作成します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header>
<h1><<a href="<?php echo home_url(); ?>"><?php echo bloginfo('name'); ?></a>: 「<?php the_search_query(); ?>」の検索結果</h1>
<?php get_search_form(); ?>
</header>
ここで、the_search_queryは検索キーワードを表示するテンプレートタグ、get_search_formは検索フォームを表示するテンプレートタグです。
また、そろそろページ遷移も増えてきたので、h1タグのサイトタイトル部分にフロントページへのリンクを追加しています。
ついでに、残りのヘッダーにもget_search_formを追加して、検索フォームが表示されるようにします。
header.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header>
<h1><a href="<?php echo home_url(); ?>">zero</a></h1>
<?php get_search_form(); ?>
</header>
header-archive.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header>
<h1><a href="<?php echo home_url(); ?>">zero</a></h1>
<h2>過去のアーカイブ</h2>
<?php get_search_form(); ?>
</header>
これで、検索テンプレートも完成です。検索フォームから任意のキーワードで検索してみましょう。