WordPressでサイト内キーワード検索の検索結果画面を作ってみた

WordPressでサイト内キーワード検索の検索結果画面を作ってみた

Posted 2014/01/29 by oredayo

サイト内検索結果ページを作ってみた

やあ。おれだよ。雪、すごいっすねー。こんなに寒いとおかしくなっちゃうよね。

ふとした瞬間に気がついたのですが、当ブログで使用しているテーマGUMBALL SPECIALには検索結果画面のテンプレートがありませんでした…
例によって恐らくTopページのテンプレートが使われているんだと思われます。
検索窓がデフォで付いているのに検索結果画面のテンプレートが用意されてないのはいかがなものなのか、そういえば404のテンプレートも無かったし…
というわけで、作ってみました。

まずは色々な検索結果画面を調べてみた

Google

おなじみのGoogleですが、キーワードによってかなり検索結果画面が違いますね。
人名ならプロフィールやら画像やら、製品ならショッピング枠という形で、キーワード毎にユーザーが最も求めている情報を即座に見つけられるような仕組み作りがなされています。
CLEの検索結果

渋谷ラーメンの検索結果

堀北真希の検索結果

Nexus7の検索結果

カカクコム&食べログ

値段やレビューの数なんかが一瞬で分かる構成です。検索結果上部にはGoogleと同様にAdSenseが設置されています。
食べログの検索結果

カカクコムの検索結果

Amazon

同様に価格やポイント数、通販ならではのお届け時間がぱっと見で分かるようになっています。
Amazonの検索結果

表示する項目とデザインを決めた

上記の参考サイトを元に、ブログの場合だったらどのような検索結果画面が求められるのかを考えてみました。
記事のタイトル、記事の概要(ディスクリプション)、記事が作成された日付、そのどのくらい支持されているか(FacebookやTwitterなどでの拡散数)、その記事が属しているカテゴリーあたりがパッと思いつきます。

個人的にブログのサイト内検索を使う時って「あーたしかこのブログでこんな記事を読んだ気がするんだけど、もう1回読みたいなぁ」的なシチュエーションしか想像できなかったので、まぁ概ね上記5つが網羅されていればいいよねという結論に至りました。

デザインはTopページと同じようなグリッドでの管理or参考サイトのような縦割りのどちらかで迷いましたが、1回のスクロールでより多くの検索結果が表示されるように横割りのグリッドでいくことにしました。
Amazonみたいなスッキリした感じに作れたらいいなぁくらいのノリです。

作ってみた

基本的にはhtml&cssとWordPress初心者でも簡単に使えるタグしか使用していません。

ヘッダーの設定

header.phpに検索結果画面ページのタイトルやディスクリプションを追加します。当ブログではとりあえず記事がたまるまではnoindexを入れることにしておきます。

<?php if(is_search()) { ?><meta name="robots" content="noindex"><?php } ?>
<title>
<?php } if(is_search()) { ?>
<?php echo wp_specialchars($s, 1); ?> |
<?php } ?><?php bloginfo(‘name’); ?>
</title>

当ブログはnoindexを入れているので、そこまで気を使って設定しているわけではありませんが、検索結果ページもランディングページに成り得る場合は、head内の情報もしっかりと記述しておいたほうがよいでしょう。

search.phpの作成

テーマディレクトリ内にsearch.phpというファイルを作成します。
多分home.phpやcategory.phpをコピーして作成したほうが早いです。
当ブログではhome.phpと同じような構成にしてみました。

参考サイト
jQueryでツイート数、いいね数などを取得して、WordPressの記事別に設置する方法
http://www.webantena.net/wordpress/jquery-get-social-count/

完成

こんな感じ!Topページとほぼおなじになってしまいました。。。
完成!

参考サイト

下記の記事を読むとより優れた検索結果画面を作れるかも(?)
カテゴリーページもあんまりイケてないし、サイト内検索と同様の構成にしようかなぁと模索中です。作成した際には備忘録的にブログを更新しようかなぁと考えています。

検索結果0件のサイト内検索ページやレビュー件数0件のレビューサイトをGoogleはどう扱うか | 海外SEO情報ブログ
http://www.suzukikenichi.com/blog/how-google-hanldes-empty-review-sites-in-search-results/

Google カスタム検索導入手順(サイト内検索) | パシのSEOブログ
http://www.jweb-seo.com/blog/wordpress/2010/02/09/750