»

サイト内検索の機能を追加する

WordPressカスタマイズ


サイト内検索の機能を追加します。 サイト内の記事のキーワードなどを検索する機能を追加します。

 ワードプレスには、基本的に、標準で検索機能がありますので、ヘッダーなどに、検索用のタグを追加して、

検索結果を表示するページデザインを記入した search.php のファイルを作るだけでサイト内検索を作ることが出来ます。

 

 ココでは、練習としてヘッダーに検索フォームを追加する方法を説明いたします。

 

まずは、以下の記述をheader.phpの検索フォームを追加したい箇所に入れてください。

 

※記述部分をダブルクリックすると記述が全て選択されます。右クリックで保存して貼り付けてください。

<div id="subinfo"><?php echo get_search_form(); ?></div>

 このようにタグを追加してください。
<?php echo get_search_form();?>が検索フォームを追加する記述です。
続いて、検索フォームのデザインを整えるCSSの記述です。

※記述部分をダブルクリックすると記述が全て選択されます。右クリックで保存して貼り付けてください。

/* 検索フォーム */
#searchform, #searchform div  {
  display: inline;
  margin: 0px 0px 0px 0px}
#searchform label  {display: none;
  margin: 0px 0px 0px 0px}
#s  {border: solid 1px #aaaaaa;
  border-radius: 5px;
  padding: 3px 8px;
  margin: 0px 0px 0px 0px}
#s:hover, #s:focus  {background-color: #eeeeee}
#searchsubmit  {background-color: #666666;
  border-radius: 5px;
  color: #ffffff;
  border: solid 1px #aaaaaa;
  padding: 2px 8pxx;
  margin: 0px 10px 0px 0px}
#searchsubmit:hover  {background-color: #aaaaaa}

 ココの検索フォームのCSSはサンプルですので、自分のヘッダーに搭載するときに 位置の微調整などおこなってみてください。

  検索フォームは追加しましたが、このままでは、「検索結果」を表示するページを作っていませんので検索しても何も表示されません。

 続いて検索結果のページを作成します。 検索結果のデザインレイアウトは、search.phpの記述が
読み込まれますので、テーマにsearch.phpを作成してください。
内容は、カテゴリーのページを参考に以下のようなデザインにしましょう。

※記述部分をダブルクリックすると記述が全て選択されます。右クリックで保存して貼り付けてください。

<?php get_header(); ?><!--  ヘッダー部分(上部分)呼び出し  -->
<!-- パンくずリスト -->
<div id="breadcrumb">
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="<?php echo home_url(); ?>" itemprop="url">
    <span itemprop="title">トップ</span>
  </a> &rsaquo;
</div>

<div>検索結果</div>
</div>
<!-- パンくずリスト終了 -->

<div id="body2">
<div id="content"><!--  記事コンテンツ(中央部分)  -->

<p class="title">『<?php the_search_query(); ?>』の検索結果</p>

<?php query_posts('posts_per_page=-1&' . $query_string); ?>  

<?php if(have_posts()): while(have_posts()):
the_post(); ?>
  <br /><br /><?php get_template_part('content','itiran'); ?>
<?php endwhile; else: ?>
  <p>一致する記事は見つかりませんでした。<br />
  キーワードを変更してお試しください。</p>
  <?php echo get_search_form(); ?>
<?php endif; ?>

<?php get_template_part('pagenation'); ?>
</div>

<?php get_sidebar('2'); ?><!--  左サイドバー  -->
</div>
<?php get_sidebar(); ?><!--  右サイドバー  -->

<?php get_footer(); ?><!--  フッター部分(下部分)呼び出し  -->

 ココに記載したものは、当サイトで説明してきたサンプルテーマのレイアウトを参考に3カラムのデザインにしてますので、自分のテーマに張る場合はデザインに会うようにカスタマイズしましょう。

続いて、検索結果のページのCSSを追加します。

※記述部分をダブルクリックすると記述が全て選択されます。右クリックで保存して貼り付けてください。

/* 検索結果 */
.search p.title  {width: auto;
  background: #333333;
  color: #ffffff;
  padding: 10px;
  font-size: 1.25em}
.search-no-results p.title  {text-align: left;
  margin-bottom: 50px}
.search-no-results #content  {text-align: center;
  line-height: 2;
  border: solid 1px #333333;
  padding-bottom: 40px}

 
この記述をCSSに追加して、デザインを整えます。

以上で、完成です。ヘッダーに追加できました。

 

»

この記事へのコメント

【コメントの投稿の仕方について】

   このサイトでは、「Disqus」と呼ばれるコメント機能を使っています。
  ツイッターやフェイスブックなどにアカウントをお持ちの方は、ログインすることで
  自分の各プロフィールでコメントすることが出来ます。
  なんのアカウントもない人もメールアドレスさえ入力すればコメントできます。
  (入力したメアドはコメント投稿には表示されません。)
  また、コメント欄には画像を張ることも出来ます。


ひと言コメントや、記事の質問や感想など お気軽にお書きください。
  なにか書いていただけると管理人が嬉しがります。