ウェブサイトを訪れるユーザーが必要な情報を素早く見つけることができるように、サイト内検索機能は非常に重要です。
この記事では、WordPressでサイト内検索機能を実装するための「検索フォーム」や「検索結果ページ」の実装方法について紹介します。
WordPressで検索フォームを実装するには、以下の手順で実装します。
- 「検索フォーム」のテンプレート（searchform.php）を作成する
- 「検索結果ページ」のテンプレート（search.php）を作成する
- 「検索フォーム」を表示する場所に、コードを追加する
「検索フォーム」のテンプレート（searchform.php）を作成する
テーマファイルにsearchform.phpを作成し、そのsearchform.phpに、以下のコードを追加します。
<form class="search-form" method="get" id="searchform" action="<?php bloginfo('url'); ?>">
<input class="search-form__input" type="text" name="s" id="s" placeholder="ここに検索したいキーワードを入力してください" />
<button class="search-form__btn" type="submit">検索する</button>
</form>【コードの説明】
- method=”get”
フォームのデータを送信する方法を指定しています。"get" を指定すると、データがURLパラメータとして送信（GETメソッドとして送信）されます。
inputタグのname属性とid属性に”s”という名前が指定されていますが、こちらはフォームデータが送信されるときに使用されるパラメータ名です。例えば、ユーザーが 「キーワード」 というテキストをフォームに入力した場合、URLパラメータとして「?s=キーワード」が生成されます。
GETメソッドについては、以下のサイトにて詳しく説明がされています。
参考サイト
- action=”<?php bloginfo('url'); ?>”
フォームのデータが送信される先のURLを指定しています。「bloginfo(’url’)」は、現在のウェブサイトのURLを返す関数です。 - placeholder=””
検索フォーム内に表示されるプレースホルダーテキストになります、ここは自由に変更してください。
「検索結果ページ」のテンプレート（search.php）を作成する
テーマファイルにsearch.phpを作成し、そのsearch.phpに、以下のコードを追加します。
<?php get_header(); ?>
<section class="data-search">
<div class="data-search__inner">
<?php if (have_posts()) : ?>
<?php
$number_searches = $wp_query->found_posts; // 検索キーワードの該当件数
// 表示タイトルに検索キーワードを表示させたい時は、「検索キーワード」を「echo $_GET['s'];」で出力する
if (isset($_GET['s']) && empty($_GET['s'])) : ?>
<p>検索キーワードが入力されていません</p>
<?php else : ?>
<h1 class="data-search__title"><?php echo esc_html($_GET['s']); ?>の検索結果： <?php echo esc_html($number_searches); ?> 件</h1>
<?php endif; ?>
<ul class="data-search__lists">
<?php while (have_posts()) : the_post(); ?>
<li class="data-search__list">
<a href="<?php the_permalink(); ?>"><?php echo esc_html(get_the_title()); ?></a>
</li>
<?php endwhile; ?>
</ul>
<?php else : ?>
検索されたキーワードにマッチする記事はありませんでした
<?php endif; ?>
</div>
</section>
<?php get_footer(); ?>これで、WordPressサイトに検索結果ページが表示されます。
【コードの説明】
- isset($_GET[’s’])
「$_GET[’s’]」が存在しているかどうかをチェックします。 - empty($_GET[’s’])
「$_GET[’s’]」が空かどうかをチェック（ユーザーが検索キーワードを入力していないかどうかを判定）します。 - 「 」と「 」
HTML特殊文字です。「 」は全角スペース、「 」は半角スペースになります。
HTML特殊文字については、以下のサイトにて詳しく紹介がされています。
参考サイト
「検索フォーム」を表示する場所に、コードを追加する
作成した検索フォームのテンプレートは、「get_search_form」関数で好きな場所に表示することができます。
検索フォームを表示する場所に、以下のコードを追加します。
<?php get_search_form(); ?>これで、WordPressサイトに検索フォームが表示されます。
まとめ
WordPressでサイト内検索機能を実装するための「検索フォーム」や「検索結果ページ」の実装方法について紹介しました。
ウェブサイトにサイト内検索機能を実装することで、ユーザーが必要な情報を素早く見つけることができます。
参考サイト
