code_note

<form class="search_content" action="exmample（送信先）">
<input class="search_input" type="search" name="search" placeholder="">
<button class="search_button"><img src="assets/img/search.png" alt="検索ボタン"></button>
</form>

.search_content {
  background-color: #FFF;
  border: solid 1px #333;
  border-radius: 50px;
  height: 50px;
  width: 100%;
  max-width: 500px;
  margin: 0 0 0 auto;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
}
.search_input {
  border: none;
  flex: 8;
  font-size: 1.6rem;
  outline: none;　/*入力を選択したときの装飾をなくす */
}
.search_button {
  border: none;
  background-color: transparent;
}

1. searchform.phpを作成。

formに「method=”get”」、inputに「name=”s”」を記述。

<form class="search_content" method="get" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<input class="search_input" type="text" name="s" placeholder="SEARCH"/>
<button class="search_button" type="submit"><img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/img/search.png" alt="検索"></button>
</form>

2.search.phpを作成。

aichive.phpなどを複製して作る。

<?php get_header(2) ?> 
<?php get_sidebar() ?>
 <div class="codenote-content">
    <h2 class="codenote-content__category-title">検索結果</h2>
      <div class="codenote-content__category-list-wrapper">
        <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        <a href="<?php the_permalink(); ?>"><div class="codenote_article-tag">
          <span></span>
          <img class="article-thumbnail" src="<?php the_post_thumbnail_url('large'); ?>" alt="<?php the_title(); ?>">
          <div class="article-tag_container">
            <div class="article-tag_container-title">
              <img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/img/icon_codenote_arrow.png" alt="矢印アイコン">
              <h3><?php the_title(); ?></h3>
            </div>
            <div class="article-tag_container-line"></div>
            <?php
              $categories = get_the_category();
              if( $categories ){
                echo '<ul class="article-category__list">';
                foreach( $categories as $category ){
                  echo '<li class="article-category"><a href="' . get_category_link( $category->term_id ) . '">' . $category->name . '</a></li>';
                }
                echo '</ul>';
              }
            ?>
          </div>
        </div>
        </a>
        <?php endwhile; else : ?>
          <img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/img/not_found.png" alt="投稿は見つかりませんでした">　//検索結果なしの場合の表示
        <?php endif; ?>
      </div>
    </div>
</div>
<?php get_footer(2) ?>

標準では、固定ページ等も検索にかかってしまうので、
投稿記事のみで検索したい時は、functios.phpに下記を記述する。

//検索結果を投稿記事のみにする
function SearchFilter( $query ) {
	if ( $query -> is_search ) {
		$query -> set( 'post_type', 'post' );
	}
	return $query;
}
add_filter( 'pre_get_posts', 'SearchFilter' );

WP検索フォームの作り方