1. トップページ
  2. BLOG
  3. WordPress
  4. WordPress サイト内検索機能の実装方法

WordPress

WordPress サイト内検索機能の実装方法

最終更新日 - 公開日 2016.03.14

by Takumi Hirashima

WordPress サイト内検索機能の実装方法

WordPress でサイト内検索機能を実装するための、検索フォームや検索結果ページを作る方法を紹介します。
例えば、WordPress サイトに検索フォームを組み込んで、投稿記事を検索できるようになります。

検索フォームの実装には次のテンプレート作成が必要になります。
・検索フォームのテンプレート作成
・検索結果ページのテンプレート作成
検索フォームの設置から検索結果ページの作成方法と合わせて、よくリクエストされるカスタマイズ方法を合わせて紹介します。

  1. 検索フォームのテンプレートを作成
  2. 検索フォームの設置
  3. 検索結果ページの作成
  4. 検索結果ページのタイトルをカスタマイズする
  5. 投稿タイプを指定して検索対象を絞り込む
  6. カテゴリやカスタムフィールドも検索対象にする
  7. 検索結果ページで検索フォームに検索キーワードを残す方法
  8. 検索ワードをハイライトして表示する方法
  9. 検索結果の表示件数を変更する方法
  10. 複数キーワード検索ができない時の対処方法
  11. WordPress で検索結果を日付順や順序順にする方法
    1. 検索結果を日付順で表示する方法
    2. 検索結果を日付順（降順）で表示する方法
    3. 検索結果を日付順（昇順）で表示する方法
    4. 検索結果を順序順で表示する方法
  12. クロスサイトスクリプティングの対策方法

検索フォームのテンプレートを作成

まずは検索フォームのテンプレートを作りましょう。
テーマディレクトリに、ファイル searchform.php を作成します。
作ったテンプレートファイルに次のコードを追加してください。

<form method="get" id="searchform" action="<?php bloginfo('url'); ?>">

<input type="text" name="s" id="s" placeholder="SEARCH"/>

<button type="submit">検索する</button>

</form>

placeholder や buttonの文言は自由に変更してください。
これで検索フォームのベースは完成です。

検索フォームの設置

作った検索フォームのテンプレートは、関数 get search form で任意のテンプレートの好きな場所に追加できます。
次のコードを、検索フォームを設置したい場所に追加します。

<?php get_search_form(); ?>

検索結果ページの作成

次に検索結果を表示するためのページテンプレート search.php を作成します。
テーマディレクトリに search.php ファイルを作成。
作ったテンプレートファイルに次のコードを追加します。

<?php if (have_posts()): ?>

<?php

if (isset($_GET['s']) && empty($_GET['s'])) {

echo '検索キーワード未入力'; // 検索キーワードが未入力の場合のテキストを指定

} else {

echo '“'.$_GET['s'] .'”の検索結果：'.$wp_query->found_posts .'件'; // 検索キーワードと該当件数を表示

}

?>

<ul>

<?php while(have_posts()): the_post(); ?>

<li>

<a href="<?php the_permalink(); ?>"><?php echo get_the_title(); ?></a>

</li>

<?php endwhile; ?>

</ul>

<?php else: ?>

検索されたキーワードにマッチする記事はありませんでした

<?php endif; ?>

ここまでできたらひとまず完成。
表示された検索フォームにキーワードを入力して動作を確認してみましょう。

検索結果ページのタイトルをカスタマイズする

ページタイトルの表示に wp_title などを使用していると、
検索結果ページで定型のタイトルが表示されます。
この時に表示されるタイトルをカスタマイズしたい場合は、
次のコードを functions.php に追加します。

// 【出力カスタマイズ】検索結果のタイトルをカスタマイズ

function wp_search_title($search_title){

if(is_search()){

$search_title = '「'.get_search_query().'」の検索結果';

}

return $search_title;

}

add_filter('wp_title','wp_search_title');

投稿タイプを指定して検索対象を絞り込む

投稿タイプを指定して検索対象を絞り込む方法を紹介します。
例えば、投稿（post）と固定ページ（page）の他に、カスタム投稿（blog）を検索対象にしたい場合、
次のコードを functions.php に追加します。

/*【出力カスタマイズ】検索対象をカスタム投稿タイプで絞り込む */

function my_pre_get_posts($query) {

	if ( !is_admin() && $query->is_main_query() && $query->is_search() ) {

		$query->set( 'post_type', array('post','page','blog') );

	}

}

add_action( 'pre_get_posts','my_pre_get_posts' );

function my_posts_search($search) {

  if(is_search()) {

    $search .= " AND (post_type = 'past' OR post_type='page' OR post_type='blog')";

  }

  return $search;

}

add_filter('posts_search', 'my_posts_search');

上記コードの4行目、
$query->set('post_type', array('post', 'page'));
この部分に手を加えます。
例えばカスタム投稿タイプ「ブログ（スラッグ：blog）」を加える場合は次のように追加します。
array('post', 'page', 'blog')
合わせて
$search .= " AND (post_type = 'past' OR post_type='page' OR post_type='blog')";
にも同じポストタイプを指定します。

または register_post_type 関数を使って WordPress へカスタム投稿タイプを追加している場合は、
パラメーターに exclude_from_search を加えることで対応が可能です。
例えば、カスタム投稿タイプを検索に含める場合は register_post_type の値を false にしてパラメーターとして追加します。

'exclude_from_search' => false,

逆に、検索に含めない場合は register_post_type の値を true にしてパラメーターとして追加します。

'exclude_from_search' => true,

末尾のカンマは挿入箇所に応じて調整してください。

カテゴリやカスタムフィールドも検索対象にする

カスタムフィールドやカテゴリなどを検索対象に含める場合はプラグインを使うと簡単です。
例えば Search Everything などは導入が簡単でおすすめですが、
サポートが終了しているプラグインも多いため注意が必要です。

カスタムフィールドやカテゴリを検索対象とした場合、and検索が意図した通りに動かない場合があります。
実装を決める際は、検証作業を入念に行うことをおすすめします。

検索結果ページで検索フォームに検索キーワードを残す方法

検索結果ページに遷移すると検索フォームに入力されたキーワードは消えてしまいます。
最初に検索したキーワードに追加して検索を続けたい場合もあると思います。
その場合、検索結果ページで検索フォームに検索キーワードが入力されるように検索フォームのテンプレートを調整します。

<form method="get" id="searchform" action="<?php bloginfo('url'); ?>">

<input type="text" name="s" id="s" placeholder="<?php if(!is_search()){ echo 'SEARCH';} ?>" value="<?php if(is_search()){ echo get_search_query();} ?>"/>

<button type="submit">検索する</button>

</form>

input タグの placeholder と value の値にif文を追加します。

検索ワードをハイライトして表示する方法

検索結果ページで検索ワードをハイライトして表示する方法を紹介します。
次のコードを function.php に追加します。

/*【検索カスタマイズ】検索ワードをハイライトする */

function highlight_search_word($text){ // 関数「highlight_search_word」を定義

if(is_search()){ // 検索ページが表示されている時に実行

$keys = implode('|', explode(' ', get_search_query())); // 検索ワードを分割して配列にして返す

$text = preg_replace('/('. $keys .')/iu', '<mark>
/*【検索カスタマイズ】検索ワードをハイライトする */

function highlight_search_word($text){ // 関数「highlight_search_word」を定義

if(is_search()){ // 検索ページが表示されている時に実行

$keys = implode('|', explode(' ', get_search_query())); // 検索ワードを分割して配列にして返す

$text = preg_replace('/('. $keys .')/iu', '<mark>\0</mark>', $text); // 該当ワードを mark で囲む

}

return $text; // 変更した値を呼び出し元に戻す

}

add_filter('the_title', 'highlight_search_word'); // タイトルに適用

add_filter('the_content', 'highlight_search_word'); // 本文に適用

add_filter('the_excerpt', 'highlight_search_word'); // 抜粋に適用


</mark>', $text); // 該当ワードを mark で囲む

}

return $text; // 変更した値を呼び出し元に戻す

}

add_filter('the_title', 'highlight_search_word'); // タイトルに適用

add_filter('the_content', 'highlight_search_word'); // 本文に適用

add_filter('the_excerpt', 'highlight_search_word'); // 抜粋に適用

検索ワードのハイライトには mark タグを使用しています。

画像のaltにタグが挿入されてしまう時の回避方法

この方法の場合、検索結果ページで表示される投稿の画像の alt に get_the_title() を使っていると、alt にタグが挿入されてしまいます。
これを回避するためには strip_tags() を使って、タイトルからタグを除く処理を追加します。

<?php echo strip_tags(get_the_title()); ?>

検索結果の表示件数を変更する方法

検索結果の表示件数を変更したい場合は query_posts() を使用します。
検索結果テンプレートの search.php の have_posts 上に query_posts() の記述を追加します。
次のコードは、検索結果の表示件数を1ページあたり12件にする方法です。



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

<?php if (have_posts()): ?>

-- 以下省略 --

複数キーワード検索ができない時の対処方法

複数のキーワード検索する時に「全角スペース」でキーワードを区切ると、全角スペースが文字扱いされて意図した検索ができない場合があります。
そんな時はプラグイン「WP Multibyte Patch」をインストールして有効化してください。
WordPress を手動でインストールするとこのプラグインのインストールを忘れがちなので気をつけましょう。

WordPress で検索結果を日付順や順序順にする方法

WordPress で検索結果を日付順や順序順にする方法を紹介します。
検索結果の順番をカスタマイズするにはフィルターフックを利用します。

検索結果を日付順で表示する方法

検索結果を日付順で表示する場合は post_date を指定して対応します。
例えば、検索結果を日付順に表示したい場合は次のコードを function.php に追加します。

// 【出力カスタマイズ】検索結果の順番を日付順にカスタマイズ

add_filter('posts_search_orderby', custom_posts_search_orderby);

function custom_posts_search_orderby() {

return 'post_date';

}

検索結果を日付順（降順）で表示する方法

検索結果を日付順（降順）で表示する場合は post_date と desc を指定して対応します。
例えば、検索結果を日付順（降順）に表示したい場合は次のコードを function.php に追加します。

// 【出力カスタマイズ】検索結果の順番を日付順（降順）にカスタマイズ

add_filter('posts_search_orderby', custom_posts_search_orderby);

function custom_posts_search_orderby() {

return 'post_date desc';

}

検索結果を日付順（昇順）で表示する方法

検索結果を日付順（昇順）で表示する場合は post_date と asc を指定して対応します。
例えば、検索結果を日付順（昇順）に表示したい場合は次のコードを function.php に追加します。

// 【出力カスタマイズ】検索結果の順番を日付順（昇順）にカスタマイズ

add_filter('posts_search_orderby', custom_posts_search_orderby);

function custom_posts_search_orderby() {

return 'post_date asc';

}

検索結果を順序順で表示する方法

検索結果を順序順で表示する場合は menu_order を指定して対応します。
例えば、検索結果を順序順に表示したい場合は次のコードを function.php に追加します。

// 【出力カスタマイズ】検索結果の順番を順序順にカスタマイズ

add_filter('posts_search_orderby', custom_posts_search_orderby);

function custom_posts_search_orderby() {

return 'menu_order';

}

クロスサイトスクリプティングの対処方法

サイトの脆弱性検査で「クロスサイトスクリプティング対策」をリクエストされた時の対処方法を紹介します。
対策をしていない場合、次のようなアラートを表示するコードをキーワードに入れて検索すると、検索結果ページで任意のプログラム（下記例の場合はアラート）が動いてしまいます。

<script>alert(document.cookie)</script>

自身のサイトでアラートが表示される場合、悪意あるプログラムも動いてしまう可能性があります。
対処として、プログラムに使われる文字列「&」「’」「”」「<」「」「>」などを、プログラムと認識されないように htmlspecialchars() を使ってエスケープ処理をします。
例えば、検索キーワードを「$_GET[‘s’]」で取得している場合のエスケープ処理は次のようになります。

$str = $_GET['s']; // 検索文字列の取得

$e_str = htmlspecialchars($str, ENT_QUOTES, "utf-8"); // 検索文字列のエスケープ処理

echo $e_str; // 検索文字の表示

まとめ

WordPress でサイト内検索機能を実装するための、検索フォームや検索結果ページを作る方法を紹介しました。