WordPressでプラグインを使わず、
簡易的な検索機能の実装。
はじめに
概要
ウェブサイトには検索機能があります。この機能は、ユーザビリティを向上させるために重要です。WordPressでは、デフォルトで検索結果をsearch.phpに表示する機能があります。今回は、プラグインを使わずに、この検索機能を利用してカテゴリーやタグを選択し、検索結果を表示する方法を実装します。
※本記事の情報は執筆時点のものであり、閲覧時点では変更されている可能性があります。また、ご利用の環境によっては、本記事の内容が正常に動作しないことがあります。最新の情報については、公式サイトなどでご確認ください。
検索機能の実装
search.php
このファイルは、ユーザーが特定のキーワードやクエリを入力して検索を実行する際に使用されます。一覧ページと同様に、検索結果がタイトルや画像とともに表示されるように設定してください。
formタグ
formタグは通常、ユーザーからの情報を受け取り、それをサーバーに送信するために使用されます。このため、formタグにはaction属性があり、データを送信する先のURLを指定する必要があります。また、method属性を使用して、データの送信方法（GETまたはPOST）を指定することもできます。ここではGETを使用します。”action”属性は、HTMLフォームが送信された際にブラウザがデータを送信する先のURLを指定します。ここではhome_url()関数を使用して、サイトのURLを取得します。
inputタグ
一例として以下のようにnameとidをしてformタグ内に記述します。
<form method="get" action="<?php echo esc_url(home_url()); ?>">
<input name="s" id="s" class="input-search" placeholder="記事を検索" />
</form>
<form method="get" action="<?php echo esc_url(home_url()); ?>">
<input name="s" id="s" class="input-search" placeholder="記事を検索" />
</form>
<form method="get" action="<?php echo esc_url(home_url()); ?>"> <input name="s" id="s" class="input-search" placeholder="記事を検索" /> </form>
こちらを記述するだけで、簡易的な検索機能が実装されます。以下はindex.phpに上記を記述し検索した結果です。
カテゴリーとタグの検索
カテゴリー
formタグの中に以下を記述します。コピペでOKです。
<?php wp_dropdown_categories('orderby=name&hide_empty=-&show_option_all=カテゴリー選択&selected=0'); ?>
<input id="submit" type="submit" value="検索" />
<?php wp_dropdown_categories('orderby=name&hide_empty=-&show_option_all=カテゴリー選択&selected=0'); ?>
<input id="submit" type="submit" value="検索" />
<?php wp_dropdown_categories('orderby=name&hide_empty=-&show_option_all=カテゴリー選択&selected=0'); ?>
<input id="submit" type="submit" value="検索" />
こちらを入力するとカテゴリーのセレクトボタンが表示されます。そして登録しているカテゴリーでの絞り込みができます。
タグ
タグ表示の一例は以下の通りです。
<?php $tags = get_tags();
if ($tags) : ?>
<select name='tag' id='tag'>
<option value="" selected="selected">タグ選択</option>
<?php foreach ($tags as $tag) : ?>
<option value="<?php echo esc_attr($tag->slug); ?>"><?php echo esc_html($tag->name); ?></option>
<?php endforeach; ?>
</select>
<?php endif; ?>
<?php $tags = get_tags();
if ($tags) : ?>
<select name='tag' id='tag'>
<option value="" selected="selected">タグ選択</option>
<?php foreach ($tags as $tag) : ?>
<option value="<?php echo esc_attr($tag->slug); ?>"><?php echo esc_html($tag->name); ?></option>
<?php endforeach; ?>
</select>
<?php endif; ?>
<?php $tags = get_tags();
if ($tags) : ?>
<select name='tag' id='tag'>
<option value="" selected="selected">タグ選択</option>
<?php foreach ($tags as $tag) : ?>
<option value="<?php echo esc_attr($tag->slug); ?>"><?php echo esc_html($tag->name); ?></option>
<?php endforeach; ?>
</select>
<?php endif; ?>カテゴリー同様タグが表示され絞り込みの検索が可能になりました。
検索機能の強化
現在、何も入力せずにも検索が行われてしまいます。そこで、Javascriptを使って何も入力されていないときは検索が行われないようにコードを修正します。
Javascript
<script>
function preventEmptySearch() {
var searchInput = document.getElementById('s');
var selectedCategory = document.getElementById('cat');
var selectedTag = document.getElementById('tag');
// Check if the search query, category, and tag are empty or have default values
if (searchInput.value.trim() === '' && selectedCategory.value === '0' && selectedTag.value === '') {
return false; // Prevent form submission
}
}
</script>
<script>
function preventEmptySearch() {
var searchInput = document.getElementById('s');
var selectedCategory = document.getElementById('cat');
var selectedTag = document.getElementById('tag');
// Check if the search query, category, and tag are empty or have default values
if (searchInput.value.trim() === '' && selectedCategory.value === '0' && selectedTag.value === '') {
return false; // Prevent form submission
}
}
</script>
<script>
function preventEmptySearch() {
var searchInput = document.getElementById('s');
var selectedCategory = document.getElementById('cat');
var selectedTag = document.getElementById('tag');
// Check if the search query, category, and tag are empty or have default values
if (searchInput.value.trim() === '' && selectedCategory.value === '0' && selectedTag.value === '') {
return false; // Prevent form submission
}
}
</script>そしてこちらの関数をformタグで実行します。
<form method="get" class="flex-column" onsubmit="return preventEmptySearch()" action="<?php echo esc_url(home_url()); ?>">
<form method="get" class="flex-column" onsubmit="return preventEmptySearch()" action="<?php echo esc_url(home_url()); ?>">
<form method="get" class="flex-column" onsubmit="return preventEmptySearch()" action="<?php echo esc_url(home_url()); ?>">
まとめ
- WordPressではデフォルトで検索を実装できる機能が用意されている
- カテゴリーやタグで絞り込みが可能
