ブログ
WordPressのサイト内検索を自作する
こんにちは、エンジニアのRt.Sです！
今回は、業務で扱うことも多いWordPressをテーマに、サイト内検索機能を作成したいと思います。
簡単に実装できるプラグインなどもありますが、以下ではそれらは使わず基本的な検索機能を作成していきます。
Before
After
WordPressの検索機能について
WordPressの検索機能を作るには、以下のファイルが必要です。
- searchform.php
- search.php
searchform.phpは検索フォームを作成するファイルで、search.phpは検索一覧を出力するファイルとなります。
検索フォーム作成
searchform.php
先述しましたがsearchform.phpは、検索フォームを作成するためのファイルです。
ファイルを作成し、以下のコードを記述します。
<form action="<?php get_home_url() ?>" method="get" class="p-search-form">
<input name="s" type="text" value="<?php the_search_query(); ?>" placeholder="検索する"/>
<button type="submit"><span>検索</span></button>
</form>formのactionでサイトのURLを指定し、methodはgetとすることで検索した一覧を取得することができます。
作成した検索フォームを表示させるには、get_search_form関数を使用します。
表示したい箇所に以下のコードを記述します。
<?php get_search_form(); ?>get_search_form関数は、searchform.phpファイルの内容を出力する関数となります。
関数リファレンス/get search form – WordPress Codex 日本語版
search.php
search.phpは、検索一覧を出力するファイルです。
以下は例ですが、表示内容はarchive.phpなどの記事一覧画面と同じレイアウトになることが多いかと思います。
<h2><?php the_search_query(); ?> の検索結果</h2>
<?php
if (have_posts() && get_search_query()) :
while (have_posts()) :
the_post();
// 一覧画面で表示する記事リンク
endwhile;
else :
?>
<p>検索キーワードに該当する記事がありませんでした。</p>
<?php
endif;
?>1行目のh2タグでthe_search_query関数を使用し、検索クエリを出力しています。検索が行われたときに、そのリクエストの検索クエリを表示します。
2行目以降は記事一覧画面とほぼ一緒ですが、違いは3行目にif文でget_search_query関数を使用しているところです。検索時にクエリ文字列があった際にtrueを返し、検索結果を表示しています。
まとめ
あとはcssでスタイルを整えれば、検索機能の完成です。
上記に加え、タグやカテゴリで絞り込みができるSearch & Filterなどプラグインを使用して機能を拡張するのもいいかと思います！
株式会社ウイングドアは福岡のシステム開発会社です。
現在、私達と一緒に"楽しく仕事が出来る仲間"として、新卒・中途採用を絶賛募集しています！
ウイングドアの仲間達となら楽しく仕事できるかも？と興味をもった方、
お気軽にお問い合わせ下さい！