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

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

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

• 検索フォームをサイドバーに設置（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の記事表示部分とほぼ同じテンプレートになります。表示内容やデザインを変えるときはこのテンプレートを編集することになります。

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

関連する投稿

• 最近の記事を表示する[WordPressテーマ作成#10] (0)
• 最近のコメントを表示する[WordPressテーマ作成#11] (1)
• 必要なテンプレートをさらに追加する[WordPressテンプレート作成#9] (0)
• ループで記事を表示する [WordPressテーマ作成 #2] (0)
• テンプレートファイルをわけてみた[WordPressテーマ作成#7] (0)