
今日は、お仕事で実装した「【WordPress】ノーマルな検索バーと検索結果ページを実装する」をアウトプットします!
こんにちは。Webコーダーのharuです。
3歳1歳の育児をしながら、5~7時・21~0時にプログラミングを独学しています。
2020.5.11~学習スタート
2020.8.10~実務でコーディングしています
HTML/CSS(SCSS)/jQuery/WordPress。
これからもっと知識をつけていきたく、インプット・アウトプットを続けています。
【学習記録やアウトプットのTwitterはこちらです*】
普段から学習していてわかったことや、気付きをログに残しています。
※認識の間違っている箇所があれば、ご教授いただけるとうれしいです!
【WordPress】ノーマルな検索バーと検索結果ページを実装する
お仕事で実装した、ベーシックな検索機能の実装をアウトプットします。
今回のゴールは以下です。
①デフォルトの検索バーを表示させる(下のピックアップとかはまだ未完なので無視してください…)
②検索バーにスタイルを当てる
③検索をすると、検索結果の文字と内容を表示。また、ボックスには検索キーワードが残る。
④マッチングする記事がなかった場合は、コメントを表示させる。
以上です!アウトプットしていきます!
①デフォルトの検索フォームを表示させる
デフォルトの検索フォームを表示させるには、
・検索バーを表示させたい場所に <?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'); ?>
の部分です。
・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)・・・もりけん塾に所属しています。