wordpress WordPress での検索フォームの利用

CATEGORY: WordPress | TAG:

2013年6月9日

検索フォームの設置

  • 「searchform.php」という名前のファイルを新規に作成し、以下を記述
  • 検索キーワードを入力するテキストボックスは「name 属性」を「s」と指定する
  • 「the_search_query()」タグを利用して検索結果ページに検索ワードを出力する
  • スタイリングしやすいようにクラス属性などを付ける。（class=”search-form”）
<!-- searchform.php -->
<form method="get" action="<?php echo home_url('/'); ?>" class="search-form">
<input type="text" name="s" id="s" value="<?php the_search_query(); ?>" />
<input type="image" src="<?php echo get_template_directory_uri(); ?>/images/btn_serch.gif" alt="検索ボタン" />
</form>

設定したフォームの読み込み

  • searchform.php テンプレートの読み込みは、「get_search_form()」を利用する
  • header.php の検索フォームを設置する場所に<?php get_search_form(); ?>を記述
  • 検索の form 要素には class=”search-form” を付けたのでそれを使ってスタイルを調整
<!-- header.php 抜粋 -->
<head>
･･･
<body <?php body_class(); ?>>
･･･
<div class="search">
<?php get_search_form(); ?>
</div><!-- end of .search-->
･･･

CSS でのスタイリングの例。

/*search*/
.search-form{ 
  padding-top: 15px; 
  margin-right: 10px;  
}
.search-form input{ 
  vertical-align: middle;
}
.search-form #s{
  width: 150px;
  height: 17px;
  line-height:17px;
  padding: 2px;
  background: #eeeeee;
  border:1px solid #c7c7c7;
  font-size: 12px; font-size: 1.2rem;
  font-weight: normal;
  color: #666666;
}

ボタンを文字列で表示する場合。

<!-- searchform.php -->
<form method="get" action="<?php echo home_url('/'); ?>" class="search-form">
<input type="text" name="s" id="s" value="<?php the_search_query(); ?>" />
<input type="submit" value="検索" class="search_btn_text" />
</form>

ボタンを文字列で表示する場合のスタイリング。

div#search form.search-form input.search_btn_text {
  border:none;
  background-color:transparent;
  cursor: pointer;
}
/*class="search_btn_text" を指定しない場合は、 type 属性でも指定可能*/
input[type="submit"] {
  border:none;
  background-color:transparent;
  cursor: pointer;
}

検索結果を表示するページの作成

  • 検索結果は「search.php」テンプレートで表示することができる。
  • 「search.php」でループを記述すると、取得された検索結果を出力できる。
  • 検索ワードに該当する記事がない場合の処理も記述する。
  • 検索ワード（ユーザーの入力したキーワード）は the_search_query() で出力できる。
  • 検索ワードを取得するには get_search_query() が使用できる。
<!-- search.php 抜粋 -->
<?php get_header(); ?>
<div id="contents">

<div class="search_results">
<?php if(have_posts()): ?>
<!-- 検索ワードを出力 -->
<h2>検索結果：「<?php the_search_query(); ?>」</h2>

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

<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<p class="date"><?php echo get_the_date(); ?></p>
<div class="excerpt">
<?php the_excerpt(); ?>
<p><a href="<?php the_permalink(); ?>">続きを読む</a></p>
</div><!-- end of .excerpt -->
<?php endwhile; ?>

<!-- 検索ワードに該当する記事がない場合の処理-->
<?php else: ?>
<!-- 検索ワードを出力-->
<h2>「<span><?php the_search_query(); ?></span>」の検索結果が見つかりませんでした。</h2>
<p>別のキーワードでお試しください。</p>
<!-- 検索フォームを表示-->
<?php get_search_form(); ?>
<?php endif;  ?>
</div><!-- end of .search_results -->

</div><!-- end of #content -->

以下は、2ヶ国語での検索結果（検索ワードに該当する記事がない場合の処理）で「get_search_query()」を使用する例

<h2><?php _e('Search Results', 'mysite'); ?>：「<?php the_search_query(); ?>」</h2>
<?php if(have_posts()): while(have_posts()): the_post(); ?>
・・・省略・・・
<?php endwhile; ?>
<?php else: ?>
<?php $search = esc_html(get_search_query()); ?>
<h2><?php echo sprintf((__('Your search for "<span>%s</span>" did not yield any results.', 'mysite')),$search ); ?></h2>
<p class="keyword"><?php _e('Enter your keywords:', 'mysite'); ?></p>
<?php get_search_form(); ?>
<?php endif;  ?>