ワードプレスで検索フォームを作る方法

ワードプレスのオリジナルテーマに検索フォームを作る

検索フォームを作るには、以下を記載した　searchform.php　という名前のファイルを作り、テーマファイルに入れます。

<form role="search" method="get" id="searchform" action="/" >
<input type="text" value="" name="s" class="s" />
<input type="submit" class="searchsubmit" value="検索" />
</form>

検索フォームを入れる場所に以下を記述します。

<?php get_search_form(); ?>

検索結果一覧を記載する為のファイル「search.phhp」を作ります。

<?php get_header(); ?>

<!--以下の記述で検索キーワードと検索結果の件数を取得して変数に格納 -->
<?php
    global $wp_query;
    $total_results = $wp_query->found_posts;
    $search_query = get_search_query();
?>
<!-- 以下より記事を表示するためのデザイン -->
<div>
<h1><?php echo $search_query; ?>の検索結果<span>（<?php echo $total_results; ?>件）</span></h2>
 </h1>
           <?php
if( $total_results >0 ):
if(have_posts()):
while(have_posts()): the_post();
?>
<!-- 記事を表示するループ開始 -->
      <div>
           <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
      </div>
                    <dl>
                        <dt><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></dt>
                        <dd>
                            <p><?php the_excerpt(); ?></p>
                        </dd>
    </dl>

<!-- 記事を表示するループ終了　以下より記事がなかった場合 -->
<?php endwhile; endif; else: ?>

<?php echo $search_query; ?> に一致する情報は見つかりませんでした。

<?php endif; ?>
<!-- pager -->
<?php if ( $wp_query -> max_num_pages > 1 ) : ?>
<!--もしページ数が 1ページより多かったら-->
<div class="navigation">
<div class="alignleft"><?php next_posts_link('« PREV'); ?></div>
<div class="alignright"><?php previous_posts_link('NEXT »'); ?></div>
</div> <?php endif; ?>
<!-- /pager -->
           </div>
            <?php get_sidebar(); ?>
        <?php get_footer(); ?>