サイト内検索の機能を追加する
ワードプレスには、基本的に、標準で検索機能がありますので、ヘッダーなどに、検索用のタグを追加して、
検索結果を表示するページデザインを記入した 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に追加して、デザインを整えます。
以上で、完成です。ヘッダーに追加できました。
この記事へのコメント
【コメントの投稿の仕方について】
このサイトでは、「Disqus」と呼ばれるコメント機能を使っています。
ツイッターやフェイスブックなどにアカウントをお持ちの方は、ログインすることで
自分の各プロフィールでコメントすることが出来ます。
なんのアカウントもない人もメールアドレスさえ入力すればコメントできます。
(入力したメアドはコメント投稿には表示されません。)
また、コメント欄には画像を張ることも出来ます。
なにか書いていただけると管理人が嬉しがります。