以下の記事ではget_search__form()を使ってサイト内の記事を検索するための検索ボックスをWordPressが用意したデフォルトのまま使う方法を解説しました。
本記事ではサイト内の記事を検索するための検索ボックスをカスタマイズし、自作する方法を解説します。
急ぎの方は以下のコードをコピペすればOKです！
<form action="<?php echo esc_url(home_url('/')); ?>" method="get" class="search-form">
<input type="text" name="s" id="search" value="<?php the_search_query(); ?>" placeholder="キーワードを入力してください" />
<button type="submit"><img src="<?php echo get_template_directory_uri(); ?>/img/icon_search.svg" alt=""></button>
</form>検索機能に必要なファイル
検索機能に必要なのは、検索したいワードを入力する検索ボックスとその結果一覧を表示するページです。
これらを実現するためには2つのテンプレートファイルを使用します。
searchform.phpsearch.php
searchform.phpは検索窓用のテンプレートファイルです。
search.phpは検索結果の一覧を表示させるテンプレートファイルです。
searchform.phpの有無で読み込む内容が変わる
searchform.phpがない場合
上記記事リンクで解説したように、get_search__form()を記述するとWordPressが用意したデフォルトのコードが出力され、検索ボックスが表示されます。
以下のようなコードが出力されます。
<form role="search" method="get" id="searchform" class="searchform" action="http://localhost:10124/">
<div>
<label class="screen-reader-text" for="s">検索:</label>
<input type="text" value="" name="s" id="s">
<input type="submit" id="searchsubmit" value="検索">
</div>
</form>searchform.phpがある場合
get_search__form()を記述するとsearchform.phpを読み込みます。
本記事で解説するのはこちらのパターンです。
＊実際にはsearchform.phpを用意せず、検索ボックスを表示させたい箇所に直接コードを記入することも可能。
searchform.php（検索ボックス）の書き方
書き方は様々ですが、一例を挙げておきます。
<form action="<?php echo esc_url(home_url('/')); ?>" method="get" class="search-form">
<input type="text" name="s" id="search" value="<?php the_search_query(); ?>" placeholder="キーワードを入力してください" />
<button type="submit"><img src="<?php echo get_template_directory_uri(); ?>/img/icon_search.svg" alt=""></button>
</form>searchform.php（検索ボックス）のコード解説
searchform.phpのコード要点
- formタグのmethodをgetにする
- actionはブログのホームページを指定(
<?php echo esc_url(home_url('/')); ?>) - 入力テキストフィールドの名前(name)は
sにする - 入力テキストフィールドのvalueは
<?php the_search_query(); ?>
the_search_query()の解説
検索に入力したワードをvalue属性に設定してくれます。
例えば、検索ボックスの中に”アーカイブ”と入力したとします。
するとvalueの値が”アーカイブ”に置き換わります。
実際に検索ボックスにワードを入れて検索してみましょう(ワードを入力し、Enter)。
するとsearch.phpまたはindex.phpにページが推移します。
そこで、URLを確認してみましょう。
URLにvalueの値がパラメーターとしてくっついているのが確認できます。
search.php（検索結果）の表示
検索結果の表示については前記事の検索結果の表示(【WordPress】検索フォームの設置と検索結果一覧の表示方法)と全く同じなのでそちらをご覧くださいm(_ _)m
コメント