検索フォームを設置する[WordPressテンプレート作成#8]

20090312_01

サイドバーに検索フォームを設置します。

今回の目標は次のようにします。

  • 検索フォームをサイドバーに設置(searchform.php)
  • 検索結果を表示するテンプレートを作成(search.php)

検索フォーム(searchform.php)

searchform.phpという名前で新規ファイルを作成しておきます。コードは以下。

<!--BEGIN #searchform-->
<div id="SearchForm">
  <form method="get" action="<?php bloginfo( 'url' ); ?>">
    <fieldset>
    <legend><label for="s">検索</label></legend>
    <p>
      <input name="s" id="s" type="text" value="keyword(s)" tabindex="1" />
      <input id="submit" type="submit" tabindex="2" />
    </p>
    </fieldset>
  </form>
</div>
<!--END form#searchform-->

Web標準を意識してコーディングしてみました。

ひとつめのinput要素のnameとid属性はかならず"s"でないと検索クエリが送信できないのでここは変更不可です。あまり関係ないことですが、送信ボタンにname属性をつけると検索時に

?s=キーワード&submit=実行

と無駄なクエリがついてしまうのでボタンのname属性はなしです。

検索結果テンプレート(search.php)

search.phpという名前で新規ファイルを作成します。コードは以下。

<?php get_header(); ?>
<div id="PageBody">
  <div id="Primary">
    <div id="PrimaryInner">
      <h1>検索結果</h1>
      <?php if(have_posts()) : ?><?php while (have_posts()) : the_post(); ?>
      ~ここに記事を表示するためのコード~
      <?php endwhile; ?> 
      <ul class="navigation">
        <li class="next-posts"><?php next_posts_link('Older Entries') ?></li>
        <li class="previous-posts"><?php previous_posts_link('Newer Entries') ?></li>
      </ul>
      <?php else: ?>

      ~キーワードに合った記事が見つからなかったときに表示する内容~
      <?php endif; ?>
    </div>
  </div>
<!-- END div#Primary -->
<?php get_sidebar(); ?>
</div>
<!-- END div#PageBody -->
<?php get_footer(); ?> 

基本的にindex.phpの記事表示部分とほぼ同じテンプレートになります。表示内容やデザインを変えるときはこのテンプレートを編集することになります。

シンプルすぎるのでいずれは変更します。いまのところはこのままいきます。

そうのひとりごと

© 2017 PAOLOG