サイドバーの一番上、SEARCHの部分を作ります。
htmlで作った時はフォームの外観だけで、実際に検索はできませんでした。 Wordpressに搭載されている機能を使うと、簡単にサイト内の文書を検索できるようになりますよ。
1. 検索に必要なテンプレートを作成
検索フォームを作り、動かすために以下2つのphpファイル（テンプレート）を使用します。
- searchform.php
- search.php
2. searchform.phpを作る
2-1.searchform.php新規作成
htmlで作成したのは検索ボックス部分です。 まず、そこに該当する「searchform.php」を作りましょう。
空のファイルを新規作成し、searchform.phpという名前で保存して下さい。
sidebar.phpの<form>～</form>までをコピー。
sidebar.php
新しく作ったsearchform.phpに貼り付けます。
searchform.php
searchform.phpに、htmlで作成したフォームのコードが入っている状態です。
2-2.sidebar.phpから呼び出す
新しく作ったsearchform.phpを、sidebar.phpから呼び出しましょう。 以下のコードを使います。
<?php get_search_form(); ?>
sidebar.phpのformタグ部分をまるっと削除。 searchform.phpを呼び出すコードを入れます。
sidebar.php
<aside class="col-md-4">
<div class="search bg-white p-3 p-md-4 mb-4">
<h2 class="mb-3">SEARCH</h2>
<?php get_search_form(); ?>
</div>
<ul class="list-unstyled">
<?php dynamic_sidebar( 'sidebar1' ); ?>
</ul>
</aside>
ブラウザで一覧ページの表示を確認します。 変更前と変わらず、検索バー部分が表示されていたら成功！
sidebar.phpを使う作業はこれで完了です。 エディタのタブは閉じておくと、誤操作が減るのでおすすめです。
2-3.searchform.phpを使えるようにする
searchform.phpに移動させたフォーム部分のコードですが、まだ検索は実行されません。 WordPressのサイト内検索を動かすためには以下２つの設定が必要です。
- フォームタグのaction属性をホームURL、method属性をGETにする
- テキストボックスのname属性をsにする
ボタンタグのtype属性もsubmitに変更しておいた方が良いですね。
では、検索機能が動くように必要箇所を修正しましょう。
searchform.php
<form id="form" action="<?php echo home_url('/'); ?>" method="get" class="input-group py-3">
<input type="text" name="s" class="form-control" placeholder="Search for..." aria-label="Search for...">
<button type="submit" class="btn btn-primary">
<i class="fas fa-search"></i>
</button>
</form>
保存してブラウザで動作を確認します。 フォームに適当な文字を入れて、検索ボタンをクリックしてみましょう。
パンくずリストの表示が変わり、検索ワードを含む記事だけが表示されるようになっていれば上手く動いています。
これでsearchform.phpの作成は完了です。
3. search.phpを作る
search.phpが無い状態でも検索結果は表示されました。 これはWordPressのテンプレート階層設計で、search.phpが無いときはindex.phpを使うと設定されているためです。
おかげで今のままでも見られますが、検索結果のページか分かりにくいですね。 少しアレンジしてみましょう。
3-1.search.phpのベースを作る
index.phpを開き、search.phpと名前を付けて保存します。 （この時点でsearch.phpはindex.phpのコピーです）
3-2.検索結果に応じた分岐を書く
search.phpを編集していきます。 記事一覧を呼び出しているwhile文の上に「検索結果があれば」という条件式を加えます。
<?php if (have_posts()): ?>
search.php
<?php endwhile; ?>の下に、検索結果が無かった時のための文言を加えて分岐を閉じます。
search.php
<?php else: ?>
検索されたキーワードにマッチする記事はありませんでした
<?php endif; ?>
search.php
存在しないキーワードを使って確認すると、if文が機能しているかわかります。
3-3.見た目を整える
トップに「BLOG DETAILS」の文言があると、検索結果だと分かりにくいですね。 h1タグの中身を変えましょう。
search.php
<h1 class="display-4 text-center">
<?php the_search_query(); ?> の検索結果</h2>
</h1>
パンくずリストのスタイルも効いていない箇所がありますので、セレクタを変更しておきましょう。
style.css
.blog-top .breadcrumb a,
.blog-top .breadcrumb{
color: #FFF;
}
/* 現在地のみ文字色を変える */
.blog-top .current-item,
.blog-top .current-item::before {
color: #cde1f8;
}
↓
これで検索・検索結果ページの作成は完了です。
確認用ファイルについて
ここまでのレッスン作成分までが入ったテーマディレクトリを「レッスン素材一覧」にアップロードしています。
画像フォルダは含まれておりませんので、WordPressでカテゴリーや記事を作成するのレッスンでダウンロードしたimgフォルダを移してご利用ください。