検索結果用のページsearch.php

検索結果用のページsearch.php

まず新規でsearch.phpを作ります。中身はまだ空です。

まずsearch.phpの中にとをまず記述します。

との間にまずmainタグを入力。クラス名をsearch-wrap clearfixにします。

<main class="search-wrap clearfix">

</main>

そのmainタグの間にまず下記のasideタグを記述します。

<aside>
  <?php get_sidebar(); ?>
</aside>

さらにasideタグのすぐ下に下記のdivタグを記述します。

<div>


  <?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>

      <section class="search">
        <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
        <p><a href="<?php the_permalink(); ?>"><?php the_time('Y/n/j'); ?></a></p>
        <?php the_category(); ?>
      </section>

    <?php endwhile; ?>
    <?php else : ?> <p>コンテンツがありません</p>
  <?php endif; ?>

</div>

これで大体完成なのですが検索した時にどのワードで検索したか表示させます。
divタグの中にh4タグでクラス名をsearch-queryとして記述します。

<h4 class="search-query">#<?php echo get_search_query(); ?></h4>

mainタグのクラス名をsearch-wrapに変更しましたのでCSSを追加します。

.search-wrap div{
  width: 70%;
  float: left;
}
.search-wrap .search{
  padding-bottom:50px;
}
.search-wrap h2{
  font-size: 30px;
  padding-top: 50px;
  padding-bottom:50px;
}
.search-query{
  font-size: 30px;
  padding-bottom:50px;
}

リロードしてみます。
それでは検索してみましょう。投稿した記事のワードを検索してみます。入力してリターンキーを押します。

検索したワードが#の後ろで表示され、その下にワードに関する記事が一覧で表示されます。

最終的なsearch.phpは以下です。

<?php get_header(); ?>


<!-- main -->

<main class="search-wrap clearfix">
  
  <aside>
    <?php get_sidebar(); ?>
  </aside>
  <div>

    <h4 class="search-query">#<?php echo get_search_query(); ?></h4>

    
    <?php if (have_posts()) : ?>
      <?php while (have_posts()) : the_post(); ?>

        <section class="search">
          <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
          <p><a href="<?php the_permalink(); ?>"><?php the_time('Y/n/j'); ?></a></p>
          <?php the_category(); ?>
        </section>

      <?php endwhile; ?>
      <?php else : ?> <p>コンテンツがありません</p>
    <?php endif; ?>

  </div>
</main>

<!-- main -->



<?php get_footer(); ?>