ケケンタWordPressのオリジナルテーマで「検索機能」ってどうやったら実装できるの……？
このようなお悩みをお持ちの方に向けて、この記事では
WordPressのオリジナルテーマで
検索機能と検索結果ページを作成する方法
をご紹介します。
一見すると難しそうに思うかもしれませんが、WordPressではシンプルな検索機能であればプラグインを使用しなくても簡単に実装することが可能です。
ケケンタこの記事の手順通りに作業を進めれば簡単に実装できますので、ぜひ最後までご覧下さい！
- 検索対象はタイトルと本文（それ以外の部分を検索対象に含めたい場合はプラグイン等でのカスタマイズが必要）
- 半角スペースで区切れば複数キーワード検索が可能（全角スペースは不可）
WordPressにおける検索機能実装の流れ
WordPressで検索機能を実装する際は、大まかには以下のような流れをたどります。
- 検索フォーム用のPHPファイル（searchform.php）を作成する
- 検索結果ページ用のPHPファイル（search.php）を作成する
- ①で作成した検索フォームを任意の場所で呼び出す
ケケンタそれでは各工程について順番にご説明していきます。
【手順①】検索フォーム用のPHPファイル（searchform.php）を作成する
まずは使用中のテーマディレクトリ直下に検索フォーム用のPHPファイルを作成します。
searchform.phpをテーマディレクトリ直下に設置
続いて、作成したファイルに検索フォームのソースコードを記述します。
searchform.phpに記述
<form action="<?php echo esc_url(home_url('/')); ?>" method="get" class="my_searchform">
<input name="s" id="s" type="text" value="<?php the_search_query(); ?>" placeholder="検索キーワードを入力して下さい" />
<input id="submit" type="submit" value="検索" />
</form>- <form>タグのaction属性には「自分のサイトのトップページURL」を指定する
- <form>タグのmethod属性は「get」にする
- ひとつ目の<input>タグのname属性は「s」にする
- ひとつ目の<input>タグのvalue属性には「the_search_query();」を設定し、検索結果ページで検索キーワードを表示できるようにする
- ふたつ目の<input>タグのtype属性は「submit」にする
ケケンタWordPressではたったこれだけのソースコードで検索機能が動くようになります！
【手順②】検索結果ページ用のPHPファイル（search.php）を作成する
【手順①】で検索機能自体は動くようになりましたが、これでは検索結果が表示されないため、今度は検索結果ページ用のファイルを準備していきます。
まずは使用中のテーマディレクトリ直下に検索結果表示用のPHPファイルを作成します。
search.phpをテーマディレクトリ直下に設置
続いて、作成したファイルに検索結果表示用のソースコードを記述します。
<div>
<p><?php echo '「' . get_search_query() . '」の検索結果：' . $wp_query->found_posts . ' 件の記事が該当しました。';?></p>
</div>
<div>
<main>
// メインループを回して検索結果として取得できた記事を出力する
<?php if ( have_posts() ): ?>
<?php while ( have_posts() ) : the_post();?>
<div>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php the_excerpt(); // 記事の抜粋?>
<div>
<p>投稿日：<?php echo get_the_date(); ?>投稿時間：<?php the_time(); ?>カテゴリー：<?php the_category(" , "); // 「,」区切りでカテゴリーを出力?></p>
</div>
</div>
<?php endwhile; ?>
<?php else: ?>
<p>該当する記事はありませんでした。</p>
<?php endif; ?>
</main>
</div>- get_search_query()（ソースコード2行目）で「入力された検索キーワード」を取得
- $wp_query->found_posts（ソースコード2行目）で「見つかった検索結果件数」を取得
- メインループを回して「取得できた検索結果の記事」を1件ずつ出力
- 取得した記事が無ければ「該当する記事はありませんでした。」のテキストを出力（ソースコード19～21行目）
【手順③】①で作成した検索フォームを任意の場所で呼び出す
ケケンタ最後に、作成した検索フォームを任意の場所で呼び出します。
呼び出し方はいたって簡単で、以下のソースコードを検索フォームを出力したい場所に記述するだけです。
<?php get_search_form(); ?>これはget_header()やget_footer()のようなインクルードタグの１種です。
get_search_form()によって【手順①】で作成したsearchform.phpが自動的に呼び出され、その中身である検索フォーム部分が表示されます。
最後にCSSで自分好みの見た目に調整すれば完成！
以上がWordPressで検索機能を実装する方法でした。
検索フォームや検索結果ページは、HTMLやCSSを使用してご自身が好きな見た目に調整可能です。
ケケンタ検索フォームの一部の属性だけは決められた値を設定する必要がありますが、class名やid名などは任意のものを設定可能です。
また、検索結果ページに出力する内容も、基本的には「メインループで１件ずつ出力する」という部分を抑えていれば自由にカスタマイズできます。
この記事のソースコードをベースに、ぜひご自身の状況に適したカスタマイズを行ってみて下さい。
それでは最後までご覧いただきありがとうございました。
当ブログではWordPressやWeb制作、PHPの情報を発信しています。
ご興味のある方は他の記事もご覧いただけると嬉しいです。
コメント