ヘッダーコンテンツ内を編集する
<!-- ヘッダーの修正 content-header.php-->
<!-- esc_url(home_url());フォーム送信後の処理先を指定します。esc_url(home_url())の部分は、WordPressのサイトのトップページのURLを取得し、セキュリティ対策を施しています。 -->
<form class="search-form" role="search" method="get" action="<?php echo esc_url(home_url()); ?>"> <div class="search-box"> <!-- name属性に"s"を指定する必要があります --> <input type="text" class="search-input" name="s" placeholder="キーワードを入力してください" value="<?php the_search_query(); ?>" /> <button type="submit" class="button-submit">検索</button> </div> <div class="search-buttons"> <button type="button" class="close-icon js-searchIcon"></button> <button type="button" class="search-icon js-searchIcon"></button> </div>
</form><div class="page-main" id="pg-search"> <form class="search-form" role="search" method="get" action="<?php echo esc_url(home_url()); ?>"> <div class="search-box"> <input type="text" name="s" class="search-input" placeholder="キーワードを入力してください" value="<?php the_search_query(); ?>" /> <button type="submit" class="button button-submit">検索</button> </div> </form> <div class="searchResult-wrapper"> <?php if (get_search_query()): ?> <div class="searchResult-head"> <h3 class="title">「<?php the_search_query(); ?>」の検索結果</h3> <div class="total">全<?php echo $wp_query->found_posts; ?>件</div> </div> <?php endif; ?> <ul class="searchResultLlist"> <?php if (have_posts() && get_search_query()): while (have_posts()): the_post(); ?> <li class="searchResultLlist-item"> <a href="#"> <div class="item-wrapper"> <div class="image"> <?php $image = get_the_post_thumbnail($post->ID, 'search'); if ($image): echo $image; else: echo '<img src="' . get_template_directory_uri() . './assets/images/img-noImage.png" />'; endif; ?> </div> <dl> <dt><?php the_title(); ?></dt> <dd class="description"> <?php the_excerpt(); ?> </dd> </dl> </div> </a> </li> <?php endwhile; endif; ?> </ul> <div class="pager"> <p class="pagerList"> <?php if (paginate_links()): //ページが1ページ以上あれば以下を表示 ?> <!-- pagination --> <div class="pagination"> <?php echo paginate_links( array( 'end_size' => 1, 'mid_size' => 1, 'prev_next' => true, 'prev_text' => '<i class="fas fa-angle-left"></i>', 'next_text' => '<i class="fas fa-angle-right"></i>', ) ); ?> </div><!-- /pagination --> <?php elseif (!get_search_query()): ?> <p>検索ワードが入力されていません</p> <?php else: ?> <p>該当ワードが見つかりません</p> <?php endif; ?> </p> </div> </div>
</div>