【WordPress】ノーマルな検索バーと検索結果ページを実装する

アイキャッチ Web制作

今日は、お仕事で実装した「【WordPress】ノーマルな検索バーと検索結果ページを実装する」をアウトプットします!

こんにちは。Webコーダーのharuです。

*わたしについて*
3歳1歳の育児をしながら、5~7時・21~0時にプログラミングを独学しています。
2020.5.11~学習スタート
2020.8.10~実務でコーディングしています
HTML/CSS(SCSS)/jQuery/WordPress。
これからもっと知識をつけていきたく、インプット・アウトプットを続けています。
【学習記録やアウトプットのTwitterはこちらです*】

普段から学習していてわかったことや、気付きをログに残しています。
※認識の間違っている箇所があれば、ご教授いただけるとうれしいです!

【WordPress】ノーマルな検索バーと検索結果ページを実装する

お仕事で実装した、ベーシックな検索機能の実装をアウトプットします。

今回のゴールは以下です。

①デフォルトの検索バーを表示させる(下のピックアップとかはまだ未完なので無視してください...)

②検索バーにスタイルを当てる

③検索をすると、検索結果の文字と内容を表示。また、ボックスには検索キーワードが残る。

④マッチングする記事がなかった場合は、コメントを表示させる。

以上です!アウトプットしていきます!

①デフォルトの検索フォームを表示させる

デフォルトの検索フォームを表示させるには、

・searchform.phpの作成
・検索バーを表示させたい場所に <?php get_search_form(); ?>を記述

が必要です。

新しく作成したsearchform.phpには、以下を記述しました。

<form method="get" class="search" id="searchform" action="<?php bloginfo('url'); ?>">
  <input class="search__text" type="search" name="s" placeholder="<?php if(!is_search()){ echo 'キーワードで検索';} ?>" value="<?php if(is_search()){ echo get_search_query();} ?>">
  <button type="submit">検索</button>
</form>

・<form>のactionにはWordPressのトップページURLを入れます。

<?php bloginfo('url'); ?>

の部分です。

bloginfoは、WordPress管理画面で入力したプロフィールやサイト情報を呼び出すのに使う関数です。()内のパラメーターを変えることでいろいろな情報を呼び出せます。今回はurlを入れることで、トップページのURLを呼び出します。詳しくは、codexの記事をどうぞ!

・inputのname属性はかならず"s"にする。

placeholderは、検索窓にデフォルトで入っている色の薄い文字のことです。任意のものを入れることができます。今回は

<?php if(!is_search()){ echo 'キーワードで検索';} ?>

と記述しました。

これは「search.phpのページを表示していないなら、"キーワードで検索"と表示する」の意です。search.phpは検索結果ページのことです(この後詳しく説明します)。

検索結果のページを表示しているときは
*placeholderの表示はなし
*value属性(デフォルトの表示)に

<?php if(is_search()){ echo get_search_query();} ?>

と記述して、検索したキーワードが窓に残るようにします

ここまでで、検索バーを表示させたい場所に

<?php get_search_form(); ?>

を記述すると、デフォルトの検索バーが表示されます。(あっ..検索窓にキーワード打ち込んだ画像を撮ってしまったw)

②検索バーにスタイルを当てる

次に、検索バーにスタイルを当てていきます。

今回は、検索ボタンを虫眼鏡アイコンにして、それをフォーム内に入れてみたいと思います。こんなイメージです。

まず、searchform.phpの<button></button>内に記載した、"検索" を削除します。

次に、SCSSは次のように記述しました。

.search {
  position: relative;
  width: 100%;
  &__text {
    width: 100%;
    border: 1px solid #ccc;
    padding: 8px 10px 8px 33px;
    font-size: 1rem;
  }
  button[type="submit"] {
    position: absolute;
    top: 0;
    left: 1em;
    width: 33px;
    height: 100%;
    background: url("../images/grass.png") no-repeat center center/22px auto;
    border: none;
    cursor: pointer;
    transition: 0.3s;

    &:focus,&:hover {
      opacity: 0.7;
    }
  }
}

buttonには、背景画像として虫眼鏡のアイコンを読み込んで、position:absoluteで検索バーの中に表示させました。

③検索をすると、検索結果の文字と内容を表示

検索結果を表示させるページを作成します。下記のように、"キーワード"の検索結果:◯件と表示されるようにしていきます。

search.php(検索結果が表示されるページ)を作成し、記事取得のループを書きます。(割愛)

次に"キーワード"の検索結果:◯件と表示させたい場所に以下を記述。

<h2 class="new-post__head">
  <?php echo '“'.$_GET['s'] .'”の検索結果:'.$wp_query->found_posts .'件'; ?>
</h2

④マッチングする記事がなかった場合は、コメントを表示させる

search.phpの、記事取得ループの終わりに以下を記述。

<?php if (have_posts()): ?>

(記事取得・・割愛します)

<!--ここから記述する部分-->
<?php else: ?>
 <p>検索されたキーワードにマッチする記事はありませんでした</p>
<?php endif; ?>

飾り気がないですが、こうなりました。笑

あとがき

かなり端折ってしまいましたが、アウトプットすることに意味がある..!笑

まだまだWP勉強中なので、もし間違えているところや、もっと良い書き方があればぜひご教授くださいませ🙇‍♀️

今日は以上です。

Thanks:師匠「もりけんさん」(@terrace_tec)・・・もりけん塾に所属しています。

タイトルとURLをコピーしました