WordPressでサイト内検索フォームを実装しよう
Webコーディング
2022.10.17
2024.02.10
Webサイトでコンテンツが増えてきた時にユーザーが探しているコンテンツを見つけるのに時間がかかるなんてことは多々あります。
そこで、サイト内検索フォームの導入を検討してみてはいかがでしょうか?
サイト内検索フォームを実装することで、サイト回遊率もアップすることでしょう。
テーマフォルダにsearchform.phpとsearch.phpを用意。
「/{ルートディレクトリ}/wp-content/themes/{該当のテーマ}/」の中にsearchform.phpとsearch.phpを作成します。
searchform.php
searchform.phpにはサイトの検索フォームを設置します。使用する際にWordPress独自関数で読み込むことができます。
<form method=“get” action=“<?php echo home_url(‘/‘); ?>” >
<input type=“text” name=“s”
placeholder=“サイト内を検索” >
<button type=“submit”>検索</button>
</form>
search.php
search.phpには検索結果一覧を表示させます。
get_search_query関数を使うことでリクエストパラメータを取得できます。
WordPressのクエリの設定パラメータに「’s’ => $s」とすることで検索キーワードでの絞り込みが可能になります。
<?php
//get_search_query関数を使用
$s = urldecode(get_search_query());
$s_args = array(
‘post_type’ => ‘post’, //投稿タイプ
‘posts_per_page’ => 10, //件数
’s’ => $s //ここに検索を設定する
);
$s_query = new WP_Query( $s_args );
if ( $s_query->have_posts() ) :
while ( $s_query->have_posts() ) :
$s_query->the_post(); ?>
<?php the_title(); //タイトルを出力 ?>
<?php
endwhile;
endif; ?>
実際に使用するときは「get_search_form()」を使う。
例えばindex.phpに検索フォームを表示させたい場合、「get_search_form関数」を使用することで表示されます。
<?php get_search_form(); ?>
実際にサイドバーに検索フォームを作成しているので使ってみてください!