Web Coding


Warning: Use of undefined constant   - assumed ' ' (this will throw an Error in a future version of PHP) in /home/wanwan888/www/wordpress01/wp-content/themes/w-note1102/single.php on line 25

2011年05月08日

WP:検索フィールドを加える

このブログも、ボチボチ情報が貯まってきたので、
検索フィールドを加えてみました。
ウィジェットを使えば簡単ですが、あえてコードで加えてみました。
以下がその手順です。
*表示上の都合により、このページのコードの一部に、日本語の記号「<」「>」を使用しています。コードをコピーする際はご注意ください。すべての「<」「>」を英語表記に置き換えてご使用ください。
全体の流れ
1、sidebar.phpにコードを加える
2、functions.phpに関数を加える
3、search.phpをつくる
4、common.cssにコードを加える
5、header.phpにコードを加える
6、ファイルをアップして完成!

1)sidebar.phpにコードを加える

検索フィールドを入れたい場所に以下のコードを加える。
今回はsidebar.phpに加えた。

<div class="clearfix">
<?php get_search_form(); ?>
</div>

2)functions.phpに関数を加える

1)のget_search_form();が機能するようにするために、
functions.phpに以下のコードを加える。

//検索フィールド
function my_search_form( $form ) {
  $form = '<form role="search" method="get" id="searchform" action="'.home_url( '/' ).'" >
  <div>
  <label>' . ('') . '</label>
  <input type="text" value="' . get_search_query() . '" name="s" id="s" /><input type="submit" id="searchsubmit" value="'. esc_attr__('Search') .'" />
  </div>
  </form>';
  return $form;
}
add_filter( 'get_search_form', 'my_search_form' );

3)search.phpをつくる

検索結果を表示するページsearch.phpをつくる。
主なコードは、category.phpからコピーして、一部を検索結果用に修正した。
<?php echo wp_specialchars($s, 1); ?>は、検索したキーワードを表す。
<?php else : ?>以下は、検索結果が0の場合の記述。

<?php get_header(); ?>
<?php get_sidebar(); ?>
<div id="center" class="clearfix">
<h3 id="category_name">「<?php echo wp_specialchars($s, 1); ?>」の検索結果</h3>
 <h4 class="entry_ttl" style="margin-top: 20px; padding: 20px 0 15px 20px; border-bottom: 1px dotted #666; ">「<?php echo wp_specialchars($s, 1); ?>」の検索結果:<?php echo $wp_query->found_posts; ?>件</h4>
  <?php if ( have_posts() ) : ?>
   <?php while (have_posts()) : the_post(); ?>
   <div class="latest_list clearfix">
   <div class="eyecatch"><a href="<?php the_permalink() ?>"><?php the_post_thumbnail(); ?></a></div>
   <div class="anti_eyecatch clearfix">
   <h5 class="entry_ttl"><a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h5>
   <p class="lead"><?php the_content('続きを読む'); ?></p>
   <p class="date"><?php the_time('Y年m月d日') ?></p>
   </div>
   </div>
  <?php endwhile; ?>
  <?php else : ?>
   <div class="latest_list clearfix">
   <div>
   <p style="padding: 10px 0 30px;">指定された条件に一致する情報は見つかりませんでした。<br />
   別の条件で再度検索してみてください。</p>
   </div>
   </div><!-- .latest_list -->
   <?php endif; ?>
   </div><!-- center-->
<?php get_footer(); ?>

4)common.cssにコードを加える

以下のコードを加え、表示の調節をした。

#searchform {
width: 186px;
margin: 0;
padding: 18px 0px 25px 15px;
background: url(../images/bg_gray_grada.gif) repeat-x bottom;
float: left;
}
#searchform label {
display: none;
}
#searchform #s {
width: 126px;
padding: 2px;
margin-right: 0;
border: 1px solid #777;
border-bottom: 1px solid #bbb;
border-right: 1px solid #bbb;
}
#search #searchsubmit {
margin-left: 0;
}

5)header.phpにコードを加える

search.phpがcommon.cssを読み込めるように、
header.php(<?php endif ?>の手前)に以下のコードを加えた。

<?php elseif (is_search()): ?>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('url'); ?>/wp-content/themes/w-note1102/css/category.css" media="all" />

6)ファイルをアップして完成!

search.php、functions.php、common.css、header.php、sidebar.php
の順でアップした。
(ちなみに、sslのページ用に作ったheader-2.php、sidebar-2.php、もあったので、
これも同様の処理をしてアップした。)

W-Note http://wanwan.jpn.org/