閉じる
wordpress
  • 2011.08.28 (Sun)

WordPress カスタマイズに便利な検索フォームのテンプレート作成方法

ヘッダーやサイドバーなんかに設置されているWordPressの検索フォームについてのちょっとしたハックです。

この検索フォームですが、以前困ったなぁってことがあったことを思い出したので、備忘録的にまとめました。

以前はWordPressのデフォルトの検索フォームをデザインなどカスタマイズしてテンプレートタグでレンダリングしていました。

ソースをみると以下のようになっています。

<form role="search" method="get" id="searchform" action="http://aqua-create.com/" > 
	<div><label class="screen-reader-text" for="s">検索:</label> 
	<input type="text" value="" name="s" id="s" /> 
	<input type="submit" id="searchsubmit" value="検索" /> 
	</div> 
</form>

ここでやっかいだったのが、ボタン部分の[value=”検索”]です。

Firefoxでは何ら問題なかったのですが、chromeで見ると以下のようになってしまうのです。

そうっ!!ボタン部分に[検索]と出てしまうのです。

これは・・・どういうことやねん!!

ってことです。

早い話、検索フォームのテンプレートを自分で作るしかないなと結論がでたとこで、色々調べた結果とても簡単でした。

まず、下記のコードをsearchform.phpという名前でファイルを作成します。

 <form method="get" id="searchform" action="<?php bloginfo( 'url' ); ?>">
    <div><label class="screen-reader-text" for="s">検索:</label> 
	<input type="text" value="" name="s" id="s" />
      <input type="submit" id="searchsubmit" value="" /> 
	</div>
  </form>

もちろん[value=””]にしてしまいます!!

ここで重要なのが、input要素のname、idは必ず”s”にしておかないと検索クエリが実行してくれません。

ここまでは、あくまで検索フォームです。

次は、検索フォームからの情報を結果として出力するテンプレートを作成しなければなりません。

search.phpというファイルを作成し下記コードを作成します。

<?php get_header(); ?>
<div id="wrapper">
  <div id="search_title">
      <h1>検索結果</h1>
      <?php if(have_posts()) : ?><?php while (have_posts()) : the_post(); ?>
      ~ここに記事を表示するためのコードを記述~
      <?php endwhile; ?>
      <?php if(function_exists('wp_page_numbers')) { wp_page_numbers(); } ?>
	<?php else : ?>
<div class="notfound">
      <p>~検索キーワードの記事が見つからなかったときに表示する内容~</p>
</div>
	<?php endif; ?>
    </div>
<!-- /#search_title -->
<?php get_sidebar(); ?>
</div><!-- /#wrapper -->
<?php get_footer(); ?>

上記はあくまで例ですが、index.phpとほぼ同じ内容のテンプレートになります。

あとは、検索フォームを設置したい箇所に、下記テンプレートタグを記述するだけです。

<?php get_search_form(); ?>

searchform.phpを作ることで、さらにカスタマイズの可能性が広がるので、作っておいて損はないですね。