韓国留学、ベルリン短期ワーホリ、転職、Webデザイン、英語勉強、旅行、食べ物、ディズニーなど

WordPressでブログ作り15(サイト内検索)

サイト内検索をサイドバーに設置したいと思います。
ウィジェットを使ってサイドバーに検索フォームを設置する方法もありますが、今回は、「get_search_form()」で検索フォームを設置したいと思います。

1、検索フォームの表示

検索フォームを表示したい場所(このブログではsidebar.php)に、「get_search_form()」と書きます。
そうすると、searchform.phpが表示されます。
まだsearchform.phpを作っていないので、新規で「searchform.php」というファイルを作成します。
searchform.phpの中には、以下のように記述します。

<?php $form = '
<form role="search" method="get" class="search-form" action="' . esc_url( home_url( '/' ) ) . '">
 <dl class="search1">
  <dt><input id="search-area__field" autocomplete="off" placeholder="サイト内検索…" type="search" class="search-area__text" name="s" value=""></dt>
  <dd><button class="search-area__submit"><span><i class="fa fa-search"></i></span></button></dd>
 </dl>
</form>';
echo $form;

こちらのフォームのHTML構造は、action属性だけいじらなければ、他は好きなようにして大丈夫です。
idやclass名も任意のもので大丈夫です。

【参考サイト】
検索フォームのカスタマイズ [WordPressテーマ作成の手順7]

そして、CSSでデザインを整えます。

このブログでは、「現場のプロが教える WEBデザイン 新・スタンダードテクニック37」に載っている検索フォームを参考にしました。

CSSは、こちらです。

/* サイト内検索 */
.search1 {
  position: relative;
  width: 100%;
  background-color: #fff;
  border: 2px solid #ccc;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}
.search1 dt {
  padding: 3px;
}
.search1 dt input {
  width: 86%;
  height: 30px;
  line-height: 30px;
  background: none;
  border: none;
  font-size: 14px;
}
.search1 dd {
  position: absolute;
  top: 0;
  right: 0;
}
.search1 dd button {
  display: block;
  padding: 3px;
  background: none;
  border: none;
  cursor: pointer;
}
.search1 dd button span {
  display: block;
  width: 30px;
  height: 30px;
  font-size: 24px;
}
.search1 dt input:focus,
.search1 dd button:focus {
  outline: none; /*青色の枠線を消す*/
}

これで、下のイメージのような検索フォームを表示することができました。

スポンサーリンク

2、search.phpの作成

次に、実際に検索フォームに検索ワードを入力したあとに検索結果が表示されるページを作ります。
このページは、search.phpというテンプレートファイルになります。

以前の工程で作った、category.phpをコピーして、「search.php」という名前で新規保存します。

<?php get_header(); ?>
<div class="contents">
  <div class="contents-left">
    <h2 class="category-name"><i class="fa fa-search"></i>検索結果:<?php the_search_query(); ?></h2>
    <?php if (have_posts() && get_search_query()) :  ?>
      <?php while ( have_posts() ): ?>
        <?php get_template_part('each_exrpt_post'); ?>
      <?php endwhile; ?>
      <div class="pagenation">
        <?php wp_pagenavi(); ?>
      </div>
    <?php else : ?>
      <p>検索キーワードに該当する記事がございませんでした。</p>
    <?php endif; ?>
  </div>
  <?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>

category.phpから変更を加えたところは、まず、タイトル部分です。
入力された検索ワードを、the_search_query()で出力しています。
そして、category.phpでは、特定のカテゴリだけ説明文を表示していたので、その部分は削除しました。
category.phpでは、「if(have_posts())」で始まっていたところを、「if (have_posts() && get_search_query())」にします。
そして、elseの部分は、検索ワードに該当する記事がなかった場合に表示される文言を書きます。

【参考サイト】
検索ワードに該当する記事一覧を表示するsearch.phpを作る [WordPressテーマ作成の手順15]

3、function.phpへ追記

最後に、検索フォームに「0」や、未入力で検索されば場合でもsearch.phpが使われるように、function.phpに以下を追記します。

//検索ワードが0や未入力のときにもsearch.phpを使うようにする
function search_template_redirect() {
  global $wp_query;
  $wp_query->is_search = true;
  $wp_query->is_home = false;
  if (file_exists(TEMPLATEPATH . '/search.php')) { 
    include(TEMPLATEPATH . '/search.php');
  }
  exit;
}
if (isset($_GET['s']) && $_GET['s'] == false) {
  add_action('template_redirect', 'search_template_redirect');
}

【参考サイト】
検索ワードに該当する記事一覧を表示するsearch.phpを作る [WordPressテーマ作成の手順15]

スポンサーリンク