[WordPress]自作テーマに検索フォームを設置する方法
公開:2019.10.07 更新:2019.10.08

こんにちは、木彫り猫です。

最近のサイトには無いことも多いですが、検索フォームはサイトに一つはあるイメージがありますよね。

かくいう私も、見本にしているサイトに検索フォームがあったので、いつも通り、実装しながら解説していこうと思います。

検索フォームの呼び出し方

さて、解説していきますが、そも検索フォームとはそんなに簡単に設置できる物なのでしょうか。

答えはYesだ……..(謎ボイス)

さすがのWordpress様なだけあって、他の機能と同様、テンプレートタグを記述するだけで使えるようです。

出てきた。

これだけでも、最低限のフォームは用意できるようですね。

しかし、精緻なスタイリングをする場合には、これでは物足りませんね…..。

そういう場合は他の方法があるのでしょうか?

テンプレートファイルを用意する

WordPressが自動出力するフォームでは物足りないと感じる時は、Searchform.phpを用意することによって自由な検索フォームを作ることが出来ます。

多くのサイトでは、こちらの方法が一般的なようですね。さすがテンプレート一族…….。

では、Searchform.phpのひな形を紹介します。(当サイトのコードを引用しております)

<form id="searchform" method="get" action="/" class="form-inline" role="search">
  <div class="input-group">
    <input type="text" name="s" class="form-control" placeholder="検索" id="searchword">
    <button class="btn btn-info" type="submit">
      <i class="fas fa-search"></i><span class="searchmark"></span>
    </button>
  </div>
</form>

こんな感じになります。(スタイリング済み)↓

これで完了!!

と、言いたいところですが…..このまま検索しても……何も出てきません。

ガーン……

検索結果ページを作るには?

そう、検索フォームの動作には検索結果ページの作成が必要なのです。

これも、おなじみのテンプレートファイルですが、内容はとても単純で、ほぼアーカイブページと同じです。

名前だけあればいい感じの奴ですね。(サンプル↓)

<?php get_header(); ?>

  <div id="wrap" class="clearfix">   
    <main class="content">  
      <!--パンくずリスト-->
      <!--パンくずリスト終わり-->

     <h1><?php echo get_search_query(); ?>の検索結果</h1>
          <div class="search-form-block">
            <?php get_search_form(); ?>
          </div>
<!--アーカイブループ -->
        <!-- アーカイブページのループ部分を挿入してください -->
<!--アーカイブループ -->
      
<!--ページネーション -->

<!--ページネーション -->
    </main>
    
    <aside class="sidebar">
      <!--サイドバー -->
    </aside>
  </div>

<?php get_footer(); ?>

コードサンプルは大雑把に書きましたので、他の要素は各自、自らが使っているコードを当てはめてください。

これで検索結果ページが表示されます。

これで一安心

だいたい完成ですね!基本はこれで終わりですが、細かいカスタマイズを次章で解説します。

パンくずリストのカスタマイズ(おまけ)

検索結果ページを表示できたのは良いですが、パンくずリストが気に入りません。なんか変な英語…….。

このサイトはパンくずリストにBreadcrumb NavXTプラグインを利用しているので、設定から変更できると思いますが…..。

赤線の箇所がタイトルに出力されている様です。ここを変えれば、パンくずリストも変わりますね。たぶん。

適当に変えちゃりました。

やったぜ。

まとめ

今回は検索フォームの導入を解説してみました。検索フォームの構成だけかと思っていたのですが、結果のページも用意せねばならなかったとは予想外でしたね……。

しかし、これで自由に検索フォームを使えますね。多分一番得するのは私なんだろうけど(自分得)

それでは!!

おすすめ商品

[基本を学ぶにはこれ]
参考にしているWordpress教本

[テーマ作成のお供に!]
WordPressデザインレシピ集

コメント

内容をご確認の上、送信してください。