ケケンタWordPressのオリジナルテーマで「検索機能」ってどうやったら実装できるの……？
このようなお悩みをお持ちの方に向けて、この記事では
WordPressのオリジナルテーマで
検索機能と検索結果ページを作成する方法
をご紹介します。
一見すると難しそうに思うかもしれませんが、WordPressではシンプルな検索機能であればプラグインを使用しなくても簡単に実装することが可能です。
ケケンタこの記事の手順通りに作業を進めれば簡単に実装できますので、ぜひ最後までご覧下さい！
- 検索対象はタイトルと本文（それ以外の部分を検索対象に含めたい場合はプラグイン等でのカスタマイズが必要）
- 半角スペースで区切れば複数キーワード検索が可能（全角スペースは不可）
格安レンタルサーバーを
お探しなら
格安サーバーをお探しならリトルサーバーがおすすめ！
- 月額150円～利用可能
- 標準で全サーバー毎日自動バックアップ付き
- 全プランWordPress対応（簡単インストール機能付き）
- 独自SSLが無料（全プランがSSLに完全対応）
- 提供ドメインが複数あるため独自ドメインが無くても複数サイト運営可能
- 独自ドメイン無制限（サブドメインも無制限で利用可能）
- 無料お試し期間がある
リトルサーバーの最大の特徴は安価な月額料金です
＼ 利用料金比較表 ／
| ミニプラン | ワードプラン | リトルプラン | ビッグプラン | |
|---|---|---|---|---|
| 月額料金 | 150円～ | 195円～ | 250円～ | 430円～ |
| SSD容量 | 20GB | 30GB | 60GB | 120GB |
| 提供ドメイン | アカウント＋２ | アカウント＋２ | アカウント＋３ | アカウント＋５ |
| 独自ドメイン | 無制限 | |||
| バックアップ | ７日分 | |||
有名なサーバーだと月額料金は1000円前後であることが普通です。
仮にリトルサーバーで同じ料金（1000円）を支払ったとすると
最も安いミニプランだと半年分、
おすすめのリトルプランでも４カ月分のサーバーがレンタル可能！
こんな方にオススメ
- 実案件でテスト用のサーバーを用意したい
- とりあえずサーバーというものに触れてみたい
- 試しにWordPressを本番運用してみたい
- いま利用しているサーバーが高額だから安価なレンタルサーバーに乗り換えたい
ケケンタリトルサーバーには無料お試し期間があります。
ご興味のある方は是非ご検討してみてはいかがでしょうか。
＼無料お試しのお申し込みはこちら／
「仕事が忙しい方」、「すぐに商品が欲しい方」にピッタリのサービス
日時指定便が「無料」で使えるので不在で商品を受け取れないという心配が無くなる
最短で注文した「翌日」に商品が届くので欲しいものがすぐ手に入る
※ご注文の時間帯やお住まいの地域によります。
Amazonプライムの無料体験は「何度でも」利用可能
Amazonプライムの無料体験を何度も利用する方法
- Amazonプライムに会員登録する
- 会員の自動更新を解除しておく＝期限が来たら自動解約
- １～３ヶ月ぐらいすると再度無料体験の案内が表示される
ケケンタ僕自身、過去に少なくとも３回は無料体験を利用しています。
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の情報を発信しています。
ご興味のある方は他の記事もご覧いただけると嬉しいです。
コメント