WordPressで制作したWebサイトはコンテンツの更新が簡単なので、まじめに更新を重ねていけばすぐに100本、200本の記事数を作ることができます。
コンテンツの数が増えてきたとき、サイト上にあると便利なのが検索フォームです。
検索フォームがあればサイト内のコンテンツをキーワード入力で探すことができるので、何ページもアーカイブを辿っていく手間が省けてユーザーにもやさしいホームページになります。
get_search_formで検索フォームを設置
WordPressには検索フォームを設置するためのget_search_formという便利な関数があります。
テンプレートの好きな箇所に以下の1行を書き加えれば、その場所に検索フォームが表示されるようになります。
1 |
<?php get_search_form(); ?> |
とてもシンプルで簡単ですよね?
ただ、このままではWordPressデフォルトの検索フォームが出力されるだけなので、もう少しカスタマイズを考えていきましょう。
searchform.phpでオリジナル検索フォームを作成する
検索フォームに独自のclassを設定して装飾を加えたり、要素を追加したい場合には検索フォームをカスタマイズする必要があります。
そんな時はテーマフォルダ内にsearchform.phpというテンプレートを用意しましょう。
このテンプレートを作成しておくと、get_search_form関数を実行したときにsearchform.phpの内容が読み込まれるようになります。
次のコードはWordPressデフォルトの検索フォームのコードですので、参考にしてsearchform.phpにカスタマイズしたコードを書きましょう。
1 2 3 4 5 6 7 |
<form role="search" method="get" id="searchform" class="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>"> <div> <label class="screen-reader-text" for="s"><?php _x( 'Search for:', 'label' ); ?></label> <input type="text" value="<?php echo get_search_query(); ?>" name="s" id="s" /> <input type="submit" id="searchsubmit" value="<?php echo esc_attr_x( 'Search', 'submit button' ); ?>" /> </div> </form> |
searchform.phpカスタマイズで気をつけたいのは次の2点です。
- form要素のaction属性にはWordPressのホームURLを指定
- name属性がsのinput要素、そのinput要素に対するlabelを含める
WordPressの検索フォーム設置についてもっと詳しく知りたい方はWordPress Codexに情報がありますのでご確認ください。
以上、WordPressで作ったWebサイトに検索フォームを設置する方法でした。
売上アップ、人材採用、顧客獲得など様々なご要望に最適なホームページを制作いたします。