サイト内検索の機能を追加する
サイト内の記事のキーワードなどを検索する機能を追加します。
ワードプレスには、基本的に、標準で検索機能がありますので、ヘッダーなどに、検索用のタグを追加して、
検索結果を表示するページデザインを記入した 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> ›
</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に追加して、デザインを整えます。
以上で、完成です。ヘッダーに追加できました。
この記事へのコメント