WordPress 検索フォームの実装

検索フォームの実装についてまとめます。

このコードを変更します。

  <form class="header_search">
      <input type="text" placeholder="キーワードを入力">
      <i class="fas fa-search"></i>
  </form>

ポイントは3つ

formタグのaction属性へhomeへのURLを設定

formタグのmethodにはgetを指定

name属性には s を利用する

このパラメーター s が送信されて、DBの検索に利用される
こんな感じになる

 <form action="<?php echo home_url( '/' ); ?>" method="get" class="header_search">
 
//ポイント     
       <input type="text" name="s" value="<?php echo the_search_query( ); ?>" placeholder="キーワードを入力">
       <i class="fas fa-search"></i>
 </form>

検索結果に投稿だけを(固定ページ等を除外して)表示したければ、name属性を変更する

<input type="hidden" value="post" name="post_type" id="post_type" />

公式サイト

wpdocs.osdn.jp