WordPressの検索機能を使いやすくカスタマイズする

Internet

WordPressにはキーワードで検索できる検索ボックスの機能が標準で準備されておりコードを1行書くだけで表示させることができます。おかげで私のようなphpも書けない、検索ロジックも分からない人が間単に検索機能をWEBページに実装することができます。ですが標準の検索機能はちょっと使いづらいところもあります。この記事では検索の基本的な事やカスタマイズの方法を紹介しています。

目次※クリックするとページ内の見出しにジャンプします

1.デフォルトの検索機能の基本的な事

1-1.検索の仕様

検索機能における一番の重要なポイントはどのような入力に対してどのような結果が返ってくるかです。
当たり前の事かもしれませんがこの事がまとめられているサイトが見つけられなかったのでデフォルトの検索の挙動をまとめてみました。

  • 検索の条件はキーワード検索のみ
  • キーワードに何も指定しないとトップページに遷移する
  • 検索の対象となるページは投稿データと固定ページのみ
  • 検索結果の表示順序は日付降順(新しい順)
  • キーワードの対象になるのは内容の部分のみであり投稿データのタイトル等は検索の対象にならない
  • 半角スペースで区切るとAND検索になる。(全角スペースは一つの単語として認識される。)
  • 検索方法はAND検索のみでor検索や除外検索はできない

検証した結果こんな感じでしたがかなり使えないですね。。。検索機能を使う人はyahooやgoogle等の検索機能と同じだと思って使うのではないでしょうか。googleで検索するとサイトのタイトルも引っかかるし全角スペースでもAND検索はできますよね。
つまりデフォルトのままだと検索機能を使うユーザーにとっては非常にストレスになります。yahooやgoogleは検索エンジンだけあってor検索や除外検索などの様々な条件検索が指定できて便利ですよね。
ですので、カスタマイズの方法は後記しますがデフォルトのまま使う場合はあくまで補助的な要素としてである事を認識しておく必要があります。

1-2.とりあえず使ってみる

とりあえず使うという意味で実装していきましょう。検索にはキーワードを入力して検索ボタンを押すインプット画面と、検索の結果を表示させるアウトプット画面が必要になります。その辺のphpコードやhtmlコードを見てみましょう。

①インプット画面

get_search_formを表示したいページに記述します。すると以下のコードがhtmlとして出力されます。

<form role="search" method="get" id="searchform" action="${URL}" >
  <div>
  <label class="screen-reader-text" for="s">検索:</label>
  <input type="text" value="" name="s" id="s" />
  <input type="submit" id="searchsubmit" value="検索" />
  </div>
</form>

idやclassがついているのであとはcssで装飾してあげればインプット画面は完成です。楽チンですな!

②アウトプット画面

逆にアウトプット画面は自分で作りこむ必要があります。アウトプットの画面はsearchform.phpに記述する事で検索結果の表示ページになります。
WordPressのデフォルトテンプレートのtwentyelevenを参考にしながら最低限必要なロジックを見ていきましょう。日本語で書くとこんな感じの事が書いてあると思います。

  • 投稿データがあるか調べる
  • 投稿データがある場合投稿データの数だけ表示する
  • 投稿データがない場合投稿データがないメッセージを表示する

コードにするとこんな感じです

<?php if ( have_posts() ) : ?>
  <?php while ( have_posts() ) : the_post(); ?>
    <?php the_content();?>
  <?php endwhile; ?>
<?php else : ?>
  <p>検索条件にヒットした記事がありませんでした。</p>
<?php endif; ?>

通常の記事を投稿するのと同じコードを書いてあげれば検索にヒットした記事が表示されます。ですがこれだけだと寂しいですよね。
get_search_query()で検索文字と$wp_query->found_postsで検索にヒットした件数を表示させてあげましょう。
さらに表示する記事もタイトル、抜粋、投稿日時と細かく指定してあげます。

<?php if ( have_posts() ) : ?>
  <p><?php printf( '"' . get_search_query() . '"' . __( 'で検索した結果' ) . $wp_query->found_posts . __('件がヒットしました')); ?></p>
  <?php while ( have_posts() ) : the_post(); ?>
    <h1><?php the_title(); ?></h1>
    <p><?php the_date();?></p>
    <?php the_excerpt();?>
  <?php endwhile; ?>
<?php else : ?>
  <p>検索条件にヒットした記事がありませんでした。</p>
<?php endif; ?>

これで基本的な検索の入力と結果の出力を実装する事ができました。ここからはカスタマイズしてより使いやすくしていきたいと思います。

2.検索ボックスの機能的カスタマイズ

①検索対象に固定ページを含めない

デフォルトでは検索の対象は記事と固定ページとなります。固定ページはサイトの仕様にもよりますが検索の対象にしたくない場合は結構多いと思います。functions.phpに以下のコードを記述すれば検索の対象から外すことができます。

functions.php
function SearchFilter($query) {
  if ($query->is_search) {
    $query->set('post_type', 'post');
  }
  return $query;
}
add_filter('pre_get_posts','SearchFilter');

特定の固定ページのみを含めたくない場合はページIDを指定したコードをfunctions.phpに記述します。
${id}の部分の除外したい固定ページのIDに変えてあげます。この方法はテスト環境等を使っている場合に本番環境とIDが異なるとうまく表示されないので注意してください。

functions.php
function SearchFilter($query) {
  if ( !$query -> is_admin && $query -> is_search) {
    $query -> set('post__not_in', array(${id}, ${id}, ${id}) );
  }
  return $query;
}
add_filter( 'pre_get_posts', 'SearchFilter' );

②キーワード未入力時でもsearch.phpを表示する

デフォルトでは検索のキーワードを未入力で検索をするとトップページが表示されます。表示を検索ページにしたい場合はfunctions.phpに以下のコードを追加します。

functions.php
function search_no_keywords() {
  if (isset($_GET['s']) && empty($_GET['s'])) {
    include(TEMPLATEPATH . '/search.php');
    exit;
  }
}
add_action('template_redirect', 'search_no_keywords');

キーワードを未入力にした場合、検索は全件表示になります。しかし、get_search_queryと$wp_query->found_postsの値は空になってしまいます。そこでキーワードが未入力の場合のメッセージを表示させてあげます。

search.php
<?php
  if (isset($_GET['s']) && empty($_GET['s'])) {
    printf('<p>' . '全ての記事を表示しています' . '</p>');
  } else {
    printf('<p>' . '"' . get_search_query() . '"' . __( 'で検索した結果' ) . $wp_query->found_posts . __('件がヒットしました') . '</p>');
  }
?>

③結果の表示順を変更する

デフォルトでは検索結果の表示順は記事が新しいものが上から表示されます。これを変えるためにIntuitive Custom Post Orderというプラグインがあります。
このプラグインは記事の管理画面上で記事の順番を手動でドラッグすることにより検索結果の表示の順番を変える事ができるようになります。

④キーワードを全角スペースで区切る

デフォルトの場合は半角スペースでの区切りはAND検索になりますが全角スペースの場合は1つの単語として認識されてしまいます。
私の使っているWordPress3.5.1のバージョンではWP Multibyte Patchプラグインを有効化する事で全角スペースでもAND検索にする事ができます。

3.最後に。。。

キーワード検索というのはとても便利なもので自分が求めているキーワードで見たい記事を探す事ができます。ですがその分使い方の幅も広がるのでどのような検索ができるかといった事がユーザビリティにつながります。
やはり最高はyahooやgoogleと同様の使い方ができるという事だと思います。何故なら検索エンジンのシェア(2012年)のトップ3がyahoo、google、youtubeだからです。それだけ沢山の人が使っているので同じように検索できることはユーザビリティの向上につながりますよね。
今後はカンマ(、)区切りや除外検索等ができるようになるともっと使いやすくなる(私がやり方を知らないだけの可能性は大です)と思います。