WordPressでは以下のタグを入れると標準の検索フォームを設置することができます。<?php get_search_form(); ?>
このタグは下記のようなHTMLになります。
<form role="search" method="get" id="searchform" class="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<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>
上記タグを見るとidが使われているため、同じページに2つ設置するとエラーになります。
そこで下記の方法で設置するとidを使わずに設置することができます。
searchform.phpの設置
カスタマイズでフォームを作ります。
その方法はsearchform.phpというphp作成します。
idを使わずにclassで対応すると複数設置が可能です。
下記が参考例文です。
デザインに合わせてボタンに変更したり、クラスを追加したりして自由に変更できます。
<form role="search" method="get" class="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<label class="screen-reader-text" for="s">検索</label>
<input type="text" placeholder="検索" value="<?php echo get_search_query(); ?>" name="s" />
<input type="submit" class="searchsubmit" value="検索" />
</form>
制作の際、気をつけないといけないことは以下の3点です。
- formのaction属性にはWordpressのホームURLを設定すること
- formのmethodはgetにすること
- inputのname属性をsに設定
searchform.phpを制作すると、タグを記載したHTMLがこちらに置き換わります。
function.phpにて設定する場合
以下のコードを追加すると、検索フォームをHTML5に対応し、idがなくなりclassでの表示になります。
そのため、検索フォームを同じページに複数設置してもエラーになることはありません。
add_theme_support( 'html5', array( 'search-form' ) );
こちらのほうがお手軽で簡単かもしれません。
お好みに応じて使い分けると良いかもしれません。
詳しくは WordPress Codex に記載してますのでご確認ください。
コメント